/* Arithmetic refresh, Percentages and everyday money (grown-ups) and First words (little learners) */
.step-vis .vis.ar-column, .fb-vis .vis.ar-column { width: min(100%, 240px); max-height: none; }
.step-vis .vis.ar-receipt, .fb-vis .vis.ar-receipt { width: min(100%, 360px); max-height: none; }
.step-vis .vis.pc-bar, .fb-vis .vis.pc-bar { width: min(100%, 420px); max-height: none; }
.vis.pc-grid { width: min(100%, 230px); height: auto; }
.model .vis.ar-receipt { width: min(100%, 360px); }
.adv-key.ar-a { background: #2A8C82; }
.ar-bars { flex-direction: column; align-items: center; gap: 6px; }
.ar-bars .vis.frac { width: min(100%, 360px); height: auto; }

/* step-by-step expression */
.ar-steps { display: grid; gap: 4px; width: min(100%, 420px); font: 700 20px ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.ar-steps div { padding: 6px 12px; border-radius: 10px; color: var(--ink-2); }
.ar-steps div:first-child { color: var(--ink); }
.ar-steps div.cur { background: var(--surface-2); color: var(--ink); }
.ar-steps:has(div:only-child) div { background: var(--surface-2); }

/* shopping basket */
.ar-till { display: grid; gap: 6px; width: min(100%, 420px); }
.ar-row { display: grid; grid-template-columns: 1fr 44px 32px 44px; align-items: center; gap: 8px; padding: 2px 4px 2px 12px; border-radius: 12px; background: var(--surface); }
.ar-name { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-q { text-align: center; font: 800 18px var(--round); font-variant-numeric: tabular-nums; }
.ar-row .toggle { min-width: 44px; min-height: 44px; padding: 0; font-size: 22px; }

/* first words */
.step-vis .vis.pw-word { width: auto; height: 90px; max-width: 100%; }
.pre-tap .vis.pw-word { width: 100%; max-width: 150px; height: auto; }
.step-vis .vis.pw-sentence { width: min(100%, 520px); height: auto; max-height: 140px; }
.node .vis.pw-word { width: 70%; height: auto; }
.pw-slots { display: flex; gap: 10px; justify-content: center; }
.pw-slot { width: 72px; height: 84px; border-radius: 18px; border: 3px dashed var(--line); background: var(--surface); color: var(--ink); font: 800 42px var(--round); display: grid; place-items: center; padding: 0; }
.pw-slot.full { border-style: solid; border-color: var(--accent); }
.pw-slots.done .pw-slot { border-color: var(--good); background: var(--surface-2); }
.pw-tiles { display: flex; gap: 12px; justify-content: center; min-height: 76px; flex-wrap: wrap; }
.pre-big.pw-tile { font: 800 40px var(--round); min-width: 76px; }
.t-pre .orderer .chip .lbl { font: 800 40px var(--round); }