/* Standard Two Arithmetic kit: abacus and tape measure. Colours from the app tokens, light and dark. */
.tza { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin: 0 auto; }
.tza-svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; }
.tza-svg:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--accent); border-radius: 14px; }

/* abacus */
.tza-abw { max-width: 360px; }
.tza-abw[data-rods="2"] { max-width: 260px; }
.tza-abw[data-rods="1"] { max-width: 160px; }
.tza-abw .tza-svg { background: var(--surface-2); border-radius: 18px; cursor: pointer; }
.tza-hit { fill: transparent; }
.tza-bead { transition: transform .24s cubic-bezier(.2, .9, .25, 1.15), opacity .18s ease-out; pointer-events: none; will-change: transform; }
.tza-bead.off { opacity: 0; transition: transform .2s ease-in, opacity .16s ease-in; }
.tza-ctrls { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; gap: 8px; }
.tza-col { display: flex; align-items: center; gap: 4px; }
.tza-col .tza-btn { flex: 1 1 0; min-width: 0; min-height: 52px; }
.tza-col .tza-count { flex: none; }
.tza-btn { min-width: 48px; min-height: 48px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 800 24px/1 var(--round); display: inline-grid; place-items: center; padding: 0 6px; transition: transform .1s, background .2s; touch-action: manipulation; }
.tza-btn:active { transform: scale(.94); background: var(--accent-soft); }
.tza-count { min-width: 26px; text-align: center; font: 800 20px var(--round); color: var(--ink); font-variant-numeric: tabular-nums; }
.tza-count.lab { display: none; }
.tza-read { min-height: 1.4em; font-size: 17px; font-weight: 600; color: var(--ink-2); text-align: center; }
.tza-read b { color: var(--ink); font-weight: 800; }
.tza.locked .tza-svg, .tza.locked .tza-btn { cursor: default; }
.tza.locked .tza-btn { opacity: .5; }
.tza.shown .tza-svg { box-shadow: 0 0 0 3px var(--good); }
.tza-abw.pre .tza-btn { min-height: 64px; font-size: 30px; }
.tza-abw.pre[data-rods="1"] { max-width: 220px; }

/* tape measure */
.tza-tapew { max-width: 620px; }
.tza-tapew .tza-svg { background: var(--surface-2); border-radius: 18px; cursor: ew-resize; }
.tza-table { stroke: var(--ink-3); stroke-opacity: .5; stroke-width: 2; }
.tza-case { transition: none; will-change: transform; cursor: grab; }
.tza-tapew.dragging .tza-case { cursor: grabbing; }
.tza-pill { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.tza-pilltext { font-size: 14px; font-weight: 800; fill: var(--ink); font-variant-numeric: tabular-nums; }
.tza-tools { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tza-tools .tza-btn { min-width: 64px; font-size: 20px; }
.tza-tapew.pre .tza-btn { min-width: 76px; min-height: 60px; font-size: 28px; }
.opt .vis.tza-ribbon { width: 100%; }

/* pictures in prompts and choices */
.step-vis > .vis.tza-abacus { width: min(100%, 260px); }
.step-vis > .vis.tza-abacus[viewBox^="0 0 200"] { width: min(100%, 180px); }
.step-vis > .vis.tza-tapepic { width: min(100%, 560px); }
.step-vis > .vis.tza-column { width: 180px; }
.step-vis > .vis.tza-bundles { width: min(100%, 460px); }
.step-vis > .vis.tza-things, .step-vis > .vis.tza-share { max-height: 240px; max-width: 100%; }
.step-vis > .vis.tza-money { width: min(100%, 400px); }
.step-vis > .vis.tza-scale { width: 190px; }
.step-vis > .vis.tza-bottles { max-width: 100%; max-height: 210px; }
.step-vis > .vis.tza-solid { width: 170px; }
.step-vis > .vis.tza-shapes { width: min(100%, 340px); }
.step-vis > .vis.tza-cut { width: 150px; }
.opt .vis.tza-cut, .opt .vis.tza-solid { width: 100%; max-width: 110px; }
.opt .vis.tza-coin { width: 76px; }
.opt .vis.clock { width: 100%; max-width: 120px; }
.fb-vis .vis.tza-abacus, .worked .vis.tza-abacus { width: min(100%, 200px); max-height: 200px; }
.worked .vis.tza-tapepic, .fb-vis .vis.tza-tapepic { width: min(100%, 480px); }
.tza-gone { opacity: .45; }