/* 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. */

/* ------------------------------------------------ the two simulations
 * One screen, in every state. The card is one grid that fills the dialog:
 * the canvas row takes the spare height (`minmax(0, 1fr)`) and the script
 * (ix-sim.js `layout`) draws the canvas at the largest size that row allows,
 * at the device's pixel density; the controls and readouts below are fixed
 * rows, so nothing grows with use and nothing scrolls. 44px targets; no text
 * under 13px (the labels drawn on the canvases are 11 and 12px). */

.sci-ixdlg .ix-card.ix-sim {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    background: var(--cream);
    overflow: hidden;
}
.sci-ixdlg .ix-sim > .ix-head, .sci-ixdlg .ix-sim .ix-fallback { display: none; }

/* the canvas sits centred in its cell at the size the script worked out */
.sci-ixdlg .ix-simview,
.sci-ixdlg .ix-simcell { position: relative; min-width: 0; min-height: 0; }
.sci-ixdlg .ix-simview > .ix-simcanvas,
.sci-ixdlg .ix-simcell > .ix-simcanvas {
    position: absolute;
    inset: 0;
    margin: auto;
    box-sizing: content-box;
    --ix-cw: 100%; /* ix-sim.js sets both on the canvas in the dialog */
    --ix-ch: 100%;
    width: var(--ix-cw);
    height: var(--ix-ch);
    aspect-ratio: auto;
}

/* ---- the buttons and chips: borders restated, 44px, 13px or more */
.sci-ixdlg .ix-sim .ix-btn { min-height: 44px; padding: 0 14px; font-size: 0.9375rem; }
.sci-ixdlg .ix-sim .ix-btn.is-ghost { border: 2px solid var(--line); background: var(--paper); color: var(--teal-deep); }
.sci-ixdlg .ix-sim .ix-btn.is-teal { border: 2px solid var(--teal-deep); background: var(--teal-deep); color: var(--paper); }
.sci-ixdlg .ix-sim .ix-chip { border: 2px solid var(--line); font-size: 0.8125rem; line-height: 1.15; }
.sci-ixdlg .ix-sim .ix-chip[aria-pressed="true"] { border-color: var(--ink); }
.sci-ixdlg .ix-sim .ix-seg { border: 2px solid var(--line); }
.sci-ixdlg .ix-sim .ix-seg button { font-size: 0.8125rem; line-height: 1.15; }

/* a slider you can hit with a thumb: the input is 44px tall, the thumb 32px */
.sci-ixdlg .ix-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 44px;
    background: transparent;
    touch-action: pan-y;
}
.sci-ixdlg .ix-slider input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: var(--line); }
.sci-ixdlg .ix-slider input[type="range"]::-moz-range-track { height: 10px; border-radius: 999px; background: var(--line); }
.sci-ixdlg .ix-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    margin-top: -11px;
    border: 3px solid var(--paper);
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 0 2px var(--teal-deep);
}
.sci-ixdlg .ix-slider input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border: 3px solid var(--paper);
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 0 2px var(--teal-deep);
}

/* ---------------------------------------------- particles and heating */
.sci-ixdlg .ix-card.ix-simp {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto auto auto auto auto;
    grid-template-areas:
        "view view"
        "state state"
        "count count"
        "slider play"
        "point point"
        "note note";
    gap: 4px 12px;
}
.sci-ixdlg .ix-simp .ix-simbody,
.sci-ixdlg .ix-simp .ix-simside,
.sci-ixdlg .ix-simp .ix-simctl:not([hidden]) { display: contents; }
.sci-ixdlg .ix-simp .ix-simview { grid-area: view; }
.sci-ixdlg .ix-simp .ix-panels { grid-area: view; align-self: center; }
/* reduced motion: the three still states in a row, not a column */
.sci-ixdlg .ix-simp .ix-panels:not([hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sci-ixdlg .ix-simp .ix-panel figcaption { margin-top: 6px; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-simp .ix-panel figcaption b { font-size: 0.9375rem; }

/* the state, named; two lines reserved so a long French line never moves the rest */
.sci-ixdlg .ix-simp .ix-simstate { grid-area: state; min-height: 3em; margin: 0; font-size: 0.9375rem; line-height: 1.3; }
.sci-ixdlg .ix-simp .ix-simstate b { font-size: 1.3rem; }
.sci-ixdlg .ix-simp .ix-simcount { grid-area: count; margin: 0; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-simp .ix-slider { grid-area: slider; gap: 0; font-size: 0.8125rem; }
.sci-ixdlg .ix-simp .ix-slider-ends small { font-size: 0.8125rem; line-height: 1.2; }
.sci-ixdlg .ix-simp [data-ix-play] { grid-area: play; align-self: center; min-width: 112px; }
.sci-ixdlg .ix-simp .ix-simhint { display: none; }
.sci-ixdlg .ix-simp .ix-simpoint { grid-area: point; margin: 4px 0 0; padding: 8px 12px; border-left-width: 5px; font-size: 0.9375rem; line-height: 1.35; }
.sci-ixdlg .ix-simp .ix-simnote { grid-area: note; padding: 0; font-size: 0.8125rem; line-height: 1.3; }

/* ------------------------------------------------ collisions and rate
 * Tall phones: the box above the graph, each with its key beneath. Short
 * phones (under 700px: a small screen or one with browser bars): the box
 * beside the graph, the keys in full-width rows beneath both. */
.sci-ixdlg .ix-card.ix-simc { grid-template-rows: minmax(0, 1fr) auto auto auto; }
.sci-ixdlg .ix-simc .ix-simbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
    padding: 0;
}
.sci-ixdlg .ix-simc .ix-simcol { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 4px; min-height: 0; }
.sci-ixdlg .ix-simc .ix-simkey { margin: 0; gap: 2px 14px; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-simc .ix-simlegend { margin: 0; gap: 0; min-height: 2.6em; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-simc .ix-lgi { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.sci-ixdlg .ix-simc .ix-simread { gap: 2px 22px; margin: 0; padding: 0 2px; }
.sci-ixdlg .ix-simc .ix-simread dt { font-size: 0.8125rem; }
.sci-ixdlg .ix-simc .ix-simread dd { min-width: 2ch; font-size: 1.15rem; line-height: 1.2; }
.sci-ixdlg .ix-simc .ix-simread > div:nth-child(3) { display: none; }   /* "product made" is the graph, and equals "successful" */

.sci-ixdlg .ix-simc .ix-simpick { gap: 6px; padding: 0; justify-items: stretch; }
.sci-ixdlg .ix-simc .ix-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sci-ixdlg .ix-simc .ix-chip { padding: 0 8px; }
.sci-ixdlg .ix-simc .ix-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.sci-ixdlg .ix-simc .ix-seg button { padding: 0 6px; }
.sci-ixdlg .ix-simc .ix-simrun { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; }
.sci-ixdlg .ix-simc .ix-simrun .ix-btn { flex: 1 1 0; min-width: 0; }
.sci-ixdlg .ix-simc .ix-simrun .ix-btn[hidden] { display: none; }

/* one message row: why this factor matters before a run, what the run showed after it */
.sci-ixdlg .ix-simc .ix-simwhy,
.sci-ixdlg .ix-simc .ix-simresult {
    margin: 0;
    padding: 6px 10px;
    min-height: calc(3.9em + 12px);   /* three lines, always: the row never changes height */
    font-size: 0.8125rem;
    line-height: 1.3;
    overflow: hidden;
}
.sci-ixdlg .ix-simc .ix-simwhy { border-left-width: 5px; font-weight: 600; }
.sci-ixdlg .ix-simc .ix-simresult { border-left: 5px solid var(--teal-deep); border-radius: 0 12px 12px 0; background: var(--paper); }
.sci-ixdlg .ix-simc.is-ran .ix-simwhy,
.sci-ixdlg .ix-simc:not(.is-ran) .ix-simresult { display: none; }
.sci-ixdlg .ix-simc .ix-simnote { display: none; }

@media (max-height: 700px) {
    .sci-ixdlg .ix-simc .ix-simbody { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: 4px 8px; }
    .sci-ixdlg .ix-simc .ix-simcol { display: contents; }
    .sci-ixdlg .ix-simc .ix-simcell { grid-row: 1; }
    .sci-ixdlg .ix-simc .ix-simkey { grid-row: 2; grid-column: 1 / -1; }
    .sci-ixdlg .ix-simc .ix-simlegend { grid-row: 3; grid-column: 1 / -1; }
}