/* Math answer input (exponents, roots, fractions) and formula rendering. Loaded after app.css. */

/* ---------- Formulas in questions and solutions (markup() in visual.js) ---------- */
/* Superscripts never push the line apart. */
sup { font-size: .68em; line-height: 0; position: relative; top: -.55em; vertical-align: baseline; margin-left: .04em; }
/* Root: the sign is drawn so its tail meets the bar over the number exactly, in any font. */
.sqrt { display: inline-block; position: relative; padding-left: .58em; margin: 0 .06em; line-height: 1; white-space: nowrap; }
.sqrt .rad { display: inline-block; border-top: 2px solid currentColor; padding: .12em .1em 0 .06em; line-height: 1.05; }
.rsign, .mi-rsign { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sqrt .rsign { position: absolute; left: 0; top: 0; width: .6em; height: calc(100% + .04em); }
/* The empty box of "2^{?}" and "?√3". */
.qbox { display: inline-block; width: .8em; height: .95em; vertical-align: -.12em; margin: 0 .08em;
  border: 2px dashed var(--accent-ink); border-radius: 4px; background: var(--accent-soft); }
sup .qbox { width: .9em; height: 1.05em; border-width: 1.5px; vertical-align: -.1em; }
.sqrt .qbox { vertical-align: -.1em; }
/* Fractions sit a little apart from the text and roots around them. */
.frac { padding: .1em 0; }
.frac sup { top: -.4em; }

/* ---------- The answer editor (mathinput.js) ---------- */
.mi {
  min-width: 128px; max-width: 100%; min-height: 64px; padding: 6px var(--sp-4); border-radius: var(--r-md);
  border: 2px solid var(--accent); background: var(--surface); display: flex; align-items: center;
  font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15;
  cursor: text; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.mi::-webkit-scrollbar { display: none; }
.mi-row { display: inline-flex; align-items: center; white-space: nowrap; }
.mi-top { min-height: 1.2em; margin: 0 auto; } /* auto margins, not centring: a long answer scrolls instead of being cut on the left */
.mi-c { padding: 0 .02em; }
.mi-gap { width: .3em; }
.mi-caret { display: inline-block; width: 2px; height: 1.05em; margin: 0 -1px; background: var(--accent); border-radius: 1px;
  animation: blink 1s steps(1) infinite; position: relative; z-index: 1; }

/* A slot (top/bottom of a fraction, exponent, inside of a root): a soft box while it is empty
   or the caret is in it, so she always sees where the next digit goes. */
.mi-slot { min-width: .9em; min-height: 1.1em; justify-content: center; border-radius: 6px; border: 2px solid transparent; padding: 0 3px; }
.mi-slot.mi-empty { border: 2px dashed var(--line); background: var(--bg); }
.mi-slot.mi-here { border: 2px solid var(--accent); background: var(--surface); }

.mi-frac { display: inline-flex; flex-direction: column; align-items: stretch; margin: 0 .12em; font-size: .78em; }
.mi-frac > .mi-row { justify-content: center; }
.mi-bar { height: 3px; margin: 3px 0; background: currentColor; border-radius: 2px; }
/* The fraction screen starts with one big fraction: two clear boxes, like before. */
.mi-frac.mi-big { font-size: .85em; }
.mi-frac.mi-big > .mi-slot { min-width: 3.4em; min-height: 1.6em; border-color: var(--line); border-style: solid; background: var(--bg); }
.mi-frac.mi-big > .mi-slot.mi-here { border-color: var(--accent); background: var(--surface); }
.mi:has(> .mi-top > .mi-big) { border-color: transparent; background: transparent; padding: 0; }

.mi-sup { display: inline-flex; font-size: .6em; align-self: flex-start; margin: -.15em 0 0 .06em; }
.mi-sup .mi-caret { height: 1em; }

.mi-root { display: inline-flex; align-items: stretch; margin: 0 .06em; }
.mi-rsign { width: .55em; flex: none; margin-right: -1px; stroke-width: 3px; }
.mi-root > .mi-rad { border-top: 3px solid currentColor; border-radius: 0; padding: .08em .08em 0; }
.mi-root > .mi-rad.mi-empty { border: 2px dashed var(--line); border-top: 3px solid currentColor; }
.mi-root > .mi-rad.mi-here { border-color: var(--accent); border-top-color: currentColor; }

/* ---------- Keypad extras ---------- */
.key { touch-action: manipulation; }
.key-wide { grid-column: 1 / -1; }
.key-math { color: var(--accent-ink); }
.key-math sup { top: -.6em; }