/* MathEntry — math keys and MathPrint preview around a scholar's answer box.
   Every colour is a studio token, so the widget follows the band it sits in
   (daylight .light-band or the dark shell) and the per-course --accent.
   Sizes are in em so the Large / Extra Large Text accommodations scale it. */

.me { display: flex; flex-direction: column; gap: 0.5em; min-width: 0; }
.me-row { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: stretch; min-width: 0; }
/* The box keeps room for a real answer; with Extra Large Text the keys button
   moves under it instead of squeezing it. */
.me-row .me-input { flex: 1 1 8em; min-width: 0;
  /* Math glyphs (∠ ≅ △ ∥ ⊥ ∛) are missing from many UI fonts; KaTeX's own
     self-hosted faces and the platform math fonts cover them. */
  font-family: var(--font-mono), 'KaTeX_Main', 'KaTeX_AMS', 'Cambria Math', 'STIX Two Math', 'Noto Sans Math', 'Segoe UI Symbol', serif; }

/* A written answer (textarea) keeps the reading font of the page, with the
   math fonts behind it for ∠ ≅ △ ∥ ⊥. */
.me-row textarea.me-input { flex-basis: 12em; font-family: var(--font-body), 'KaTeX_Main', 'Cambria Math', 'STIX Two Math', 'Noto Sans Math', 'Segoe UI Symbol', sans-serif; }
.me-help, .me-preview { font-weight: 400; }
.me[data-me-prose] .me-toggle { align-self: flex-start; }

.me-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45em;
  min-height: 44px; min-width: 44px; padding: 0 0.85em; box-sizing: border-box;
  border: 2px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  color: var(--accent); font: 600 0.88em var(--font-body); cursor: pointer;
}
.me-toggle:hover { border-color: var(--accent); background: var(--accent-tint); }
.me-toggle[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-tint); }
.me-toggle-face { font-family: 'KaTeX_Main', 'Cambria Math', serif; font-size: 1.15em; line-height: 1; }
.me-toggle:focus-visible, .me-tab:focus-visible, .me-key:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.me-preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.15em 0.75em; min-height: 2.8em; min-width: 0;
  padding: 0.35em 0.85em; box-sizing: border-box;
  border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--recessed);
}
.me-preview[hidden] { display: none; }
.me-preview-label { flex: 0 0 auto; font: 700 0.62em var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.me-preview-math { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; font-size: 1.3em; color: var(--ink); padding: 0.2em 0; }
.me-preview-math .katex { color: inherit; white-space: nowrap; }
.me-preview.is-partial .me-preview-math { color: var(--ink-2); }
/* Sentences wrap like sentences. */
.me[data-me-prose] .me-preview-math { font-size: 1.05em; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; padding: 0.35em 0.2em 0.3em 0; }
/* A math phrase may break after = or + like printed text; never inside a
   symbol (KaTeX keeps each piece whole). */
.me[data-me-prose] .me-chunk { overflow-wrap: normal; }
.me[data-me-prose] .me-preview-math .katex { white-space: normal; }
.me[data-me-prose] .me-chunk .katex { font-size: 1.12em; }
.me .pe-preview { padding-left: 0.85em; }

.me-tray { border: 1px solid var(--line); border-radius: 12px; padding: 0.6em; background: var(--surface); min-width: 0; }
.me-tray[hidden] { display: none; }
/* Once the answer is graded the keys step aside so the feedback and the worked
   solution sit right under the answer; the reading line stays. */
.me[data-me-locked] .me-tray { display: none; }
.me[data-me-locked] .me-toggle { visibility: hidden; }
.me-tabs { display: flex; flex-wrap: wrap; gap: 0.35em; margin: 0 0 0.55em; }
.me-tab {
  flex: 0 0 auto; min-height: 44px; padding: 0 0.95em; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent;
  color: var(--ink-2); font: 600 0.82em var(--font-body); cursor: pointer; white-space: nowrap;
}
.me-tab:hover { border-color: var(--accent); color: var(--ink); }
.me-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--ah-text-on-accent); }
/* At least four keys per row even with Extra Large Text, so the tray never
   becomes a long single column. */
.me-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(3.4em, 22%), 1fr)); gap: 0.4em; }
.me-key {
  min-height: 44px; min-width: 0; padding: 0.15em 0.2em; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  box-shadow: 0 1px 0 var(--line-strong); color: var(--ink); cursor: pointer;
  font: 500 1.08em 'KaTeX_Main', 'Cambria Math', 'STIX Two Math', var(--font-body), serif;
  transition: background-color .12s, border-color .12s, transform .08s;
}
.me-key-face { display: block; white-space: nowrap; overflow: hidden; text-overflow: clip; }
/* Segment, ray and line faces: the bar or arrow spans the whole name, as in
   print and in the preview line (KaTeX). The drawn mark stands in until KaTeX
   has loaded, in the same place and the same ink. */
/* One box for all three, letters on its floor, so A and B sit on the same
   line on every key whatever is drawn above them. */
.me-key-face[data-face] { display: flex; align-items: flex-end; justify-content: center; height: 1.45em; overflow: visible; line-height: 1; }
.me-key-face .katex { font-size: 1em; }
.me-mark { position: relative; display: inline-block; padding-top: 0.42em; font-family: 'KaTeX_Math', 'Cambria Math', 'STIX Two Math', serif; font-style: italic; line-height: 1; }
.me-mark-over { position: absolute; left: 0.04em; right: 0.04em; top: 0.17em; height: 0; border-top: 0.07em solid currentColor; }
.me-mark-head { display: none; position: absolute; top: -0.095em; width: 0.26em; height: 0.26em; box-sizing: border-box; border-top: 0.07em solid currentColor; border-right: 0.07em solid currentColor; }
.me-mark-head--end { right: 0.01em; transform: rotate(45deg); }
.me-mark-head--start { left: 0.01em; transform: rotate(-135deg); }
.me-mark--ray .me-mark-head--end, .me-mark--line .me-mark-head { display: block; }
.me-key:hover { border-color: var(--accent); background: var(--accent-tint); }
.me-key:active { transform: translateY(1px); box-shadow: none; }
.me-key:disabled { cursor: not-allowed; border-style: dashed; box-shadow: none; background: transparent; }
.me-key:disabled:hover { background: transparent; border-color: var(--line-strong); }
.me-help { margin: 0.55em 0 0; font-size: 0.76em; line-height: 1.5; color: var(--muted); font-family: var(--font-body), 'KaTeX_Main', 'Cambria Math', 'STIX Two Math', 'Noto Sans Math', 'Segoe UI Symbol', sans-serif; }
.me-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Phones: the toggle keeps its 44px target but drops the words. */
@media (max-width: 480px) {
  .me-tab-more { display: none; }
  .me-tab { padding: 0 0.55em; font-size: 0.78em; }
  .me-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .me-keys { grid-template-columns: repeat(auto-fill, minmax(min(3em, 22%), 1fr)); }
  .me-help { display: none; }
}

/* Accommodations: High Contrast draws every boundary in full ink. */
body.a11y-high-contrast .me-toggle,
body.a11y-high-contrast .me-tab,
body.a11y-high-contrast .me-key,
body.a11y-high-contrast .me-preview,
body.a11y-high-contrast .me-tray { border-width: 2px; border-color: var(--ink); }
body.a11y-high-contrast .me-help,
body.a11y-high-contrast .me-preview-label { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .me-key, .me-toggle, .me-tab { transition: none; } .me-key:active { transform: none; } }
body.a11y-reduce-motion .me-key, body.a11y-reduce-motion .me-toggle { transition: none; }
@media print { .me-toggle, .me-tray { display: none !important; } }