/* Year 9 Science: the Lewis diagram guide inside the phone's full-screen
 * dialog (`.sci-ixdlg`, body marked data-ix-fit). Everything here is scoped to
 * `.sci-ixdlg`; the notes and every other layout are untouched. Tokens only.
 *
 * The card takes the step-by-step guides' frame from science-ix-phone.css (the
 * picture in a panel on top, the step's words under it, Back / Next, then the
 * examples). This sheet only adds what the Lewis guide needs: the diagram
 * sized for the panel, the number buttons in two rows of four, and the
 * element presets shown in step 1 only, so every step is one screen. Tap
 * targets 44px (the four sides of the symbol never shrink below that); no
 * text under 13px. */

.sci-ixdlg .ix-lewis .ix-lw-holder { flex: 1 1 0; align-items: center; min-height: 0; }
/* the diagram's own scale: the symbol and the gaps follow the screen's height,
   the sides keep their 44px */
.sci-ixdlg .ix-lewis .ix-lw-pic { font-size: clamp(13px, 2.3vh, 16px); }
.sci-ixdlg .ix-lewis .ix-lw-key { flex: none; margin: 0; }

/* step 1: the arrangement, the question, eight numbers in two rows */
.sci-ixdlg .ix-lewis .ix-lw-arr { gap: 2px 8px; margin: 0 0 4px; font-size: 1.8rem; }
.sci-ixdlg .ix-lewis .ix-lw-ask { margin: 0 0 4px; font-size: 0.9rem; line-height: 1.3; }
.sci-ixdlg .ix-lewis .ix-lw-nums { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 4px; }
.sci-ixdlg .ix-lewis .ix-lw-n { min-width: 0; min-height: 44px; font-size: 1.1rem; }
.sci-ixdlg .ix-lewis .ix-lw-nums:has(.is-ok) { display: none; }
.sci-ixdlg .ix-lewis .ix-lw-fb { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.3; }
.sci-ixdlg .ix-lewis .ix-lw-rule { margin: 2px 0 0; }

/* step 2 */
.sci-ixdlg .ix-lewis .ix-lw-count { margin: 0 0 2px; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-lewis .ix-lw-msg { margin: 0 0 4px; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-lewis .ix-pacectl > .ix-btn { flex: 0 1 auto; min-height: 44px; }

/* step 3 */
.sci-ixdlg .ix-lewis .ix-lw-prog { margin: 0 0 4px; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-lewis .ix-lw-working { margin: 0; }
.sci-ixdlg .ix-lewis .ix-lw-eqn { gap: 0 8px; margin: 0 0 4px; font-size: 1.15rem; line-height: 1.2; }
.sci-ixdlg .ix-lewis .ix-lw-same, .sci-ixdlg .ix-lewis .ix-lw-none { max-width: none; margin: 0; font-size: 0.875rem; line-height: 1.35; }
/* once the ion is made the working says it all */
.sci-ixdlg .ix-lewis.is-finished .ix-gline { display: none; }

/* the presets: twelve at 44px are two rows of six, and only in step 1 */
.sci-ixdlg .ix-lewis .ix-try .ix-chips { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(6, minmax(44px, 1fr)); }
.sci-ixdlg .ix-lewis .ix-chip { min-height: 44px; }
.sci-ixdlg .ix-lewis:not(.is-s1) .ix-try { display: none; }