/* 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.
 *
 * Both pieces follow the formula explorer (science-unit-phone.css, section 3):
 * the card is one grid the size of the screen, its wrappers are
 * `display: contents`, what you look at is on top, the controls are at the
 * bottom, and one row (`minmax(0, 1fr)`) takes the spare height, so nothing
 * scrolls and no state makes the card taller. Tap targets 44px, no text
 * under 13px; labels inside a picture go down to 10px and are then dropped. */

.sci-ixdlg .ix-card.ix-ptable,
.sci-ixdlg .ix-card.ix-gp {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    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-ptable > .ix-head,
.sci-ixdlg .ix-gp > .ix-head { display: none; }
.sci-ixdlg .ix-ptable [hidden],
.sci-ixdlg .ix-gp [hidden] { display: none !important; }

/* ------------------------------------------------ 1 · the periodic table
 * The table itself is the map: the first twenty elements in their eight
 * group columns and four period rows, edge to edge, each tile a 44px target
 * (the tile is drawn a little narrower than its hit area, which reaches into
 * the gaps). Under it, the element that was tapped: its working, its diagram,
 * and a previous / next element button each side of its name. Short screens
 * put the diagram beside the name and the reason; tall ones stack them. */

.sci-ixdlg .ix-card.ix-ptable {
    grid-template-columns: minmax(0, 0.55fr) 44px minmax(0, 0.45fr) 44px;
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "modes modes modes modes"
        "table table table table"
        "key key key key"
        "eqn eqn eqn eqn"
        "pic prev name next"
        "pic why why why"
        "pic pace pace pace"
        "ctl ctl ctl ctl";
}
.sci-ixdlg .ix-ptbody,
.sci-ixdlg .ix-ptgrid,
.sci-ixdlg .ix-ptleft,
.sci-ixdlg .ix-ptright,
.sci-ixdlg .ix-ptstage,
.sci-ixdlg .ix-ptpace { display: contents; }

.sci-ixdlg .ix-ptmodes { grid-area: modes; justify-self: start; margin: 0; }
.sci-ixdlg .ix-ptable .ix-seg button { padding: 0 10px; font-size: 0.8125rem; }

/* the map */
.sci-ixdlg .ix-pttable {
    grid-area: table;
    grid-template-columns: 14px repeat(2, minmax(0, 1fr)) 14px repeat(6, minmax(0, 1fr));
    gap: 2px;
}
.sci-ixdlg .ix-ptgh, .sci-ixdlg .ix-ptph { font-size: 0.8125rem; border-radius: 6px; }
.sci-ixdlg .ix-ptgh { min-height: 18px; }
.sci-ixdlg .ix-ptel { min-height: 42px; border-radius: 8px; }
.sci-ixdlg .ix-ptel::after { content: ""; position: absolute; inset: -1px -4px; }
.sci-ixdlg .ix-ptel b { font-size: 1rem; }
.sci-ixdlg .ix-ptel small { top: 2px; left: 3px; font-size: 0.625rem; }
.sci-ixdlg .ix-ptgap { border-width: 1px; border-radius: 6px; }
.sci-ixdlg .ix-ptgap span { display: none; }
.sci-ixdlg .ix-ptgap b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.625rem; font-weight: 700; white-space: nowrap; }
.sci-ixdlg .ix-ptkey { grid-area: key; gap: 2px 8px; margin: 0; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-ptkey span { gap: 4px; }
.sci-ixdlg .ix-ptsw { width: 14px; height: 14px; border-radius: 4px; }
.sci-ixdlg .ix-ptsw.is-g { border-width: 3px; }

/* nothing chosen yet: how to read the map, what to do, the booklet's note */
.sci-ixdlg .ix-ptaxes { grid-column: 1 / -1; grid-row: 4; margin: 0; font-size: 0.8125rem; line-height: 1.35; }
.sci-ixdlg .ix-pthint { grid-column: 1 / -1; grid-row: 5; margin: 0; padding: 10px 12px; font-size: 0.9rem; line-height: 1.35; }
.sci-ixdlg .ix-ptnote {
    grid-column: 1 / -1;
    grid-row: 6;
    align-self: start;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: var(--paper);
    font-size: 0.8125rem;
    line-height: 1.4;
}
.sci-ixdlg .ix-ptable.is-chosen .ix-ptaxes,
.sci-ixdlg .ix-ptable.is-chosen .ix-ptnote,
.sci-ixdlg .ix-ptable.is-find .ix-ptaxes,
.sci-ixdlg .ix-ptable.is-find .ix-ptnote { display: none; }

/* the chosen element */
.sci-ixdlg .ix-ptnav { grid-area: prev; align-self: center; width: 44px; min-height: 44px; padding: 0; border: 2px solid var(--line); color: var(--ink); }
.sci-ixdlg .ix-ptnav.is-next { grid-area: next; }
.sci-ixdlg .ix-ptname {
    grid-area: name;
    align-self: center;
    margin: 0;
    font-size: 1rem;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}
.sci-ixdlg .ix-ptcap { display: none; grid-area: cap; margin: 0; font-size: 0.8125rem; letter-spacing: 0.04em; line-height: 1.2; }
/* the working: the arrangement and the period on one line, the group on the next */
.sci-ixdlg .ix-pteq {
    grid-area: eqn;
    align-content: start;
    gap: 2px 12px;
    min-height: 2.5em;
    margin: 0;
    font-size: min(1.125rem, 4.6cqi);
    line-height: 1.25;
}
.sci-ixdlg .ix-pteq .ix-grp { flex-wrap: nowrap; white-space: nowrap; gap: 0 6px; }
.sci-ixdlg .ix-pteq .ix-grp:nth-child(3) { flex-basis: 100%; }
.sci-ixdlg .ix-ptwhy {
    grid-area: why;
    min-height: 0;
    max-width: none;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.3;
    overflow: hidden;
}
.sci-ixdlg .ix-ptviz {
    grid-area: pic;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-width: none;
    margin: 0;
    overflow: hidden;
}
.sci-ixdlg .ix-ptviz svg { flex: 1 1 0; min-height: 0; width: 100%; height: auto; }
.sci-ixdlg .ix-shnum-f { font-family: inherit; font-weight: 800; text-anchor: middle; fill: var(--ink); }
.sci-ixdlg .ix-ptviz .ix-legend { flex: none; gap: 0 8px; margin: 0; padding-bottom: 2px; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-ptviz .ix-legend span { gap: 4px; }

/* the controls: how it plays, then Back / Next / Show me again (or, on Auto,
   the speed and Pause in the same row) */
.sci-ixdlg .ix-ptpace > .ix-seg:first-child { grid-area: pace; display: flex; align-self: end; }
.sci-ixdlg .ix-ptpace > .ix-seg:first-child button { flex: 1 1 auto; }
.sci-ixdlg .ix-ptpace > .ix-seg[aria-label] { grid-row: ctl; grid-column: 1 / 3; display: flex; }
.sci-ixdlg .ix-ptpace > .ix-seg[aria-label] button { flex: 1 1 0; padding: 0 4px; }
.sci-ixdlg .ix-ptpace > .ix-btn { grid-row: ctl; grid-column: 3 / 5; border: 2px solid var(--line); font-size: 0.875rem; }
.sci-ixdlg .ix-ptctl { grid-area: ctl; flex-wrap: nowrap; gap: 6px; }
.sci-ixdlg .ix-ptable.is-auto .ix-ptctl { display: none; }
.sci-ixdlg .ix-ptctl .ix-btn { flex: none; min-width: 44px; min-height: 44px; padding: 0 12px; font-size: 0.8125rem; line-height: 1.15; }
.sci-ixdlg .ix-ptctl .ix-btn.is-ghost { border: 2px solid var(--line); }
.sci-ixdlg .ix-ptctl .ix-btn.is-teal { flex: 1 1 auto; min-width: 0; text-align: left; }

/* try it first: the question under the map; once it is answered the working
   takes its place, the verdict sits where the reason will go and Next
   question moves up beside the two modes */
.sci-ixdlg .ix-ptfind { grid-column: 1 / -1; grid-row: 4 / -1; align-self: start; margin: 0; }
.sci-ixdlg .ix-ptq { padding: 10px 12px; }
.sci-ixdlg .ix-ptq .ix-tag, .sci-ixdlg .ix-ptprog { font-size: 0.8125rem; letter-spacing: 0.04em; }
.sci-ixdlg .ix-ptq .ix-q { margin: 4px 0 8px; font-size: 1rem; line-height: 1.35; }
.sci-ixdlg .ix-ptq .ix-fb { margin: 0 0 8px; font-size: 0.875rem; line-height: 1.35; }
.sci-ixdlg .ix-ptq .ix-btn { padding: 0 14px; font-size: 0.875rem; line-height: 1.15; }
.sci-ixdlg .ix-ptq .ix-btn.is-ghost { border: 2px solid var(--line); }
.sci-ixdlg .ix-ptable.is-solved .ix-ptfind,
.sci-ixdlg .ix-ptable.is-solved .ix-ptq { display: contents; }
.sci-ixdlg .ix-ptable.is-solved .ix-ptqtop,
.sci-ixdlg .ix-ptable.is-solved .ix-q,
.sci-ixdlg .ix-ptable.is-solved .ix-fb { display: none; }
.sci-ixdlg .ix-ptable.is-solved[data-pt-stage="0"] .ix-fb {
    display: block;
    grid-area: why;
    align-self: start;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.3;
}
.sci-ixdlg .ix-ptable.is-solved .ix-answer-row { grid-area: modes; justify-self: end; }
.sci-ixdlg .ix-ptable.is-solved .ix-answer-row .ix-btn { max-width: 9rem; padding: 0 12px; font-size: 0.8125rem; text-align: left; }

/* a little more height: the working gets its caption back */
@media (min-height: 660px) {
    .sci-ixdlg .ix-card.ix-ptable {
        grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "modes modes modes modes"
            "table table table table"
            "key key key key"
            "cap cap cap cap"
            "eqn eqn eqn eqn"
            "pic prev name next"
            "pic why why why"
            "pic pace pace pace"
            "ctl ctl ctl ctl";
    }
    .sci-ixdlg .ix-ptcap { display: block; }
    .sci-ixdlg .ix-ptfind { grid-row: 4 / -1; }
}
/* a tall phone: the diagram gets the full width, the reason a line of its own */
@media (min-height: 740px) {
    .sci-ixdlg .ix-card.ix-ptable {
        grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px;
        grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto auto auto;
        grid-template-areas:
            "modes modes modes modes"
            "table table table table"
            "key key key key"
            "cap cap cap cap"
            "eqn eqn eqn eqn"
            "prev name name next"
            "pic pic pic pic"
            "why why why why"
            "pace pace pace pace"
            "ctl ctl ctl ctl";
        gap: 8px 6px;
    }
    .sci-ixdlg .ix-pttable { gap: 3px; }
    .sci-ixdlg .ix-ptel { min-height: 44px; }
    .sci-ixdlg .ix-ptname { font-size: 1.25rem; }
    .sci-ixdlg .ix-pteq { font-size: min(1.25rem, 4.9cqi); }
    .sci-ixdlg .ix-ptwhy, .sci-ixdlg .ix-ptable.is-solved[data-pt-stage="0"] .ix-fb { min-height: 3.9em; font-size: 0.875rem; }
    .sci-ixdlg .ix-ptpace > .ix-seg:first-child { justify-self: start; }
    .sci-ixdlg .ix-ptnote { grid-row: 6 / 8; }
}
/* a phone on its side: too short for the fixed rows, so the card scrolls and
   the diagram's row keeps a floor */
@media (max-height: 539.98px) {
    .sci-ixdlg .ix-card.ix-ptable { grid-template-rows: auto auto auto auto auto minmax(110px, 1fr) auto auto; overflow-y: auto; }
}

/* ------------------------------------------------ 2 · down the group
 * One step is one screen: the two groups to pick from, the step's title and
 * its line, the atom and the bars, then Show me again / Back / Next at the
 * bottom. The atom is an svg that takes the row it is given (ix-group.js
 * keeps its symbol readable). On a short phone an element step puts the atom
 * beside the bars, and a consequence step gives the bars the full width (the
 * atom goes under them, or steps aside with its key when there is no room,
 * `.is-noviz`); a tall phone stacks the atom over the bars on every step. */

.sci-ixdlg .ix-card.ix-gp {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
        "pick pick"
        "no no"
        "title title"
        "line line"
        "viz meters"
        "legend legend"
        "beyond beyond"
        "note note"
        "foot foot";
    gap: 6px 8px;
}
.sci-ixdlg .ix-card.ix-gp.is-cons {
    grid-template-rows: auto auto auto auto auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "pick pick"
        "no no"
        "title title"
        "line line"
        "meters meters"
        "note note"
        "answer answer"
        "viz legend"
        "beyond beyond"
        "foot foot";
}
.sci-ixdlg .ix-gp .ix-gp-stage,
.sci-ixdlg .ix-gp .ix-txt,
.sci-ixdlg .ix-gp .ix-viz { display: contents; }

.sci-ixdlg .ix-gp-pick { grid-area: pick; display: block; padding: 0; border: 0; background: none; }
.sci-ixdlg .ix-gp-pick > span { display: none; }
.sci-ixdlg .ix-gp-pick .ix-chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.sci-ixdlg .ix-gp-pick .ix-chip { min-height: 44px; padding: 2px 8px; border: 2px solid var(--line); font-size: 0.8125rem; line-height: 1.15; }
.sci-ixdlg .ix-gp-pick .ix-chip[aria-pressed="true"] { border-color: var(--ink); }

.sci-ixdlg .ix-gp .ix-stepno { grid-area: no; font-size: 0.8125rem; letter-spacing: 0.04em; line-height: 1.2; }
.sci-ixdlg .ix-gp .ix-txt h3 { grid-area: title; margin: 0; font-size: 1.125rem; line-height: 1.2; }
.sci-ixdlg .ix-gp .ix-gline { grid-area: line; max-width: none; margin: 0; font-size: 0.8125rem; line-height: 1.3; }

/* the bars: the readout */
.sci-ixdlg .ix-gpm { grid-area: meters; align-self: start; gap: 2px; margin: 0; }
.sci-ixdlg .ix-gpm .ix-gprow { grid-template-columns: 1.75rem repeat(2, minmax(0, 1fr)); gap: 4px; padding: 2px 4px; border-radius: 8px; }
.sci-ixdlg .ix-gpm.has-ease .ix-gprow { grid-template-columns: 1.75rem repeat(3, minmax(0, 1fr)); }
.sci-ixdlg .ix-gpm.has-react .ix-gprow { grid-template-columns: 1.75rem repeat(4, minmax(0, 1fr)); }
.sci-ixdlg .ix-gph { font-size: 0.8125rem; line-height: 1.15; letter-spacing: 0; }
.sci-ixdlg .ix-gpsym { font-size: 1rem; }
.sci-ixdlg .ix-gpcell { gap: 2px; }
.sci-ixdlg .ix-gpcell small { font-size: 0.8125rem; line-height: 1.15; }
.sci-ixdlg .ix-gpbar { height: 10px; }
.sci-ixdlg .ix-gpnote { grid-area: note; margin: 0; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-gp .ix-answer { grid-area: answer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0; font-size: 1.5rem; line-height: 1.15; }
.sci-ixdlg .ix-gp .ix-answer small { margin: 0; font-size: 0.8125rem; letter-spacing: 0.04em; }

/* the atom and its key */
.sci-ixdlg .ix-gp .ix-viz svg { grid-area: viz; width: 100%; height: 100%; min-height: 0; }
.sci-ixdlg .ix-gpsymfit { font-family: inherit; font-weight: 800; text-anchor: middle; fill: var(--ink); }
.sci-ixdlg .ix-gp svg.is-nolabel .ix-gpsymfit { display: none; }
.sci-ixdlg .ix-gp .ix-legend { grid-area: legend; justify-content: flex-start; gap: 2px 12px; margin: 0; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-gp .ix-legend span { gap: 5px; }
.sci-ixdlg .ix-gp .ix-legend i { flex: none; }
.sci-ixdlg .ix-gp.is-cons .ix-legend { flex-direction: column; flex-wrap: nowrap; align-self: center; }
.sci-ixdlg .ix-gpbeyond { grid-area: beyond; max-width: none; margin: 0; font-size: 0.8125rem; line-height: 1.3; text-align: left; }
.sci-ixdlg .ix-gp.is-noviz .ix-viz svg,
.sci-ixdlg .ix-gp.is-noviz .ix-legend,
.sci-ixdlg .ix-gp.is-noviz .ix-gpbeyond { display: none; }

/* the controls */
.sci-ixdlg .ix-gp .ix-foot {
    grid-area: foot;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    padding: 0;
    border: 0;
}
.sci-ixdlg .ix-gp .ix-dots { grid-column: 1 / -1; gap: 4px; margin: 0; }
.sci-ixdlg .ix-gp .ix-dots i { flex: 1 1 0; width: auto; height: 6px; }
.sci-ixdlg .ix-gp .ix-replay {
    justify-content: center;
    width: 44px;
    min-height: 44px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
}
.sci-ixdlg .ix-gp .ix-foot .ix-btn { min-width: 0; padding: 0 10px; font-size: 0.875rem; }
.sci-ixdlg .ix-gp .ix-foot .ix-btn.is-ghost { border: 2px solid var(--line); }

/* a tall phone: the atom over the bars, on every step */
@media (min-height: 740px) {
    .sci-ixdlg .ix-card.ix-gp,
    .sci-ixdlg .ix-card.ix-gp.is-cons {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto auto auto auto;
        grid-template-areas: "pick" "no" "title" "line" "viz" "legend" "beyond" "meters" "note" "answer" "foot";
        gap: 8px;
    }
    .sci-ixdlg .ix-gp.is-cons .ix-legend { flex-direction: row; flex-wrap: wrap; align-self: auto; }
    .sci-ixdlg .ix-gp .ix-txt h3 { font-size: 1.25rem; }
    .sci-ixdlg .ix-gp .ix-gline, .sci-ixdlg .ix-gpnote { font-size: 0.875rem; }
}
/* a phone on its side: the card scrolls and the atom's row keeps a floor */
@media (max-height: 539.98px) {
    .sci-ixdlg .ix-card.ix-gp { grid-template-rows: auto auto auto auto minmax(120px, 1fr) auto auto auto auto; overflow-y: auto; }
}