/* Typed-answer maths (sprview.mjs): the answer box, College Board's preview line and the phone's keypad. Calm, the
   same card language as a choice: a thin line, the ink border when it holds an answer, green or coral once marked. */
.spr{display:grid;gap:8px;max-width:420px}
.spr-label{font:700 15px var(--display);color:var(--ink-soft);letter-spacing:.01em}
.spr-box{display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:4px 6px;min-height:58px}
.spr-box:focus-within{border:2.5px solid var(--ink);padding:3px 5px}
.spr-input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:650 26px var(--display);letter-spacing:.06em;padding:8px 10px;outline:none;font-variant-numeric:tabular-nums}
.spr-input:disabled{opacity:1;-webkit-text-fill-color:var(--ink)}
.spr-input[readonly]{caret-color:transparent;cursor:default}
.spr-box.correct{border:2.5px solid var(--emerald);background:color-mix(in srgb,var(--emerald) 10%,var(--surface));padding:3px 5px}
.spr-box.wrong{border:2.5px solid var(--coral);background:color-mix(in srgb,var(--coral) 9%,var(--surface));padding:3px 5px}
.spr-box.static{min-height:48px}
.spr-preview{margin:0;font-size:17px;color:var(--ink-soft);min-height:1.6em}
.spr-preview .spr-tex{color:var(--ink);font-size:20px;margin-left:4px}
.spr-note{margin:0;min-height:1.3em}
.spr-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:2px}
.spr-key{min-height:46px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:650 22px var(--display);touch-action:manipulation}
.spr-key:active{background:var(--sunk)}
.spr-key.del{color:var(--ink-soft)}
.spr-key.zero{grid-column:span 3}
.spr-key:disabled{opacity:.45}
.spr-review{display:grid;gap:10px;margin:8px 0}
.spr-review .spr-input{display:block}