/* ximera-answer — inline math answer input + attached Check button, plus a
   live-preview popover.

   The input and Check button ride inside a shared .ximera-input-group that
   overlays the hidden \phantom span MathJax renders for our \cssId'd
   placeholder. The group is a flex row so the two controls sit flush and
   look like a single input-group (input on the left, button on the right,
   shared vertical seam in the middle). Original-server achieved the same
   look with Bootstrap's .input-group + .input-group-btn. */

.ximera-input-group {
  position: absolute;
  inset: 0;
  display: flex;
  /* Stretch children to the phantom's height so the input and Check
     button always share the exact same outer height. If we centered
     the input instead, the button (which stretches) would extend past
     the input top+bottom whenever MathJax's phantom is slightly taller
     than the input's intrinsic. Single-line <input> keeps its text
     vertically centered on its own regardless of imposed height. */
  align-items: stretch;
  box-sizing: border-box;
}

.ximera-answer-input {
  flex: 1 1 auto;
  min-width: 0;
  /* Sizing recipe mirrors .ximera-btn--icon (see ximera-core.css) —
     same font-size, padding, line-height, and min-height — so the
     input and adjacent Check button share the exact intrinsic outer
     height. Without this alignment the input's larger padding /
     line-height / 1em font-size made it visibly taller than the
     button, and the visible grey border drew attention to the
     mismatch. Content-box is the default for <input> and matches the
     button's box model. */
  font-size: 0.95em;
  padding: 0.15em 0.5em;
  line-height: 1.2;
  min-height: 1.6em;
  border: 1px solid var(--ximera-color-muted-border);
  /* Rounded on the outside (left) only — the right edge butts against
     the button. */
  border-radius: var(--ximera-radius) 0 0 var(--ximera-radius);
  border-right: 0;
  background: #fff;
  /* Break the font *family* inheritance chain from the mjx-container
     ancestor — otherwise the input picks up MathJax's math font metrics
     (large ascenders/descenders skew where the text row lands). */
  font-family: system-ui, -apple-system, sans-serif;
  color: inherit;
  outline: none;
}

.ximera-answer-input:focus {
  border-color: var(--ximera-color-primary);
  z-index: 1;
}

/* Correct-locked input stays visually neutral — the disabled state
   already conveys "no longer editable" via browser default, and the
   button (which turns green) carries the pedagogical signal. Painting
   the input background green as well over-marks the state. */
.ximera-answer-input:disabled {
  background: #fff;
  color: var(--ximera-color-muted-fg);
  border-color: var(--ximera-color-muted-border);
}

/* The Check button sits flush against the input's right edge. Override
   .ximera-btn--icon's default rounding so only the outer (right) corners
   are rounded. The parent group's align-items: stretch handles the
   height equalization with the input. */
.ximera-input-group .ximera-check-btn {
  border-radius: 0 var(--ximera-radius) var(--ximera-radius) 0;
  flex: 0 0 auto;
  height: auto;
}

/* Anchored to the .ximera-input-group's containing block (the mjx placeholder
   span, which we set to position:relative in mount). Drops just below the
   input, left-aligned with it, with a small gap so the connector arrow
   (see ::before) has room. Sized to its own content — the rendered math
   preview shouldn't be forced to the input's width. Font-size is bumped
   because the popover is the student's read-back of what they typed; it
   needs to be comfortably legible, not miniaturized. */
.ximera-math-popover {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  z-index: 100;
  background: #fff;
  border: 1px solid var(--ximera-color-neutral-border);
  border-radius: var(--ximera-radius);
  padding: 0.4em 0.8em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-size: 1.25em;
  white-space: nowrap;
  pointer-events: none;
}

/* Speech-bubble tail pointing up at the input. A 10×10 white square,
   rotated 45°, with top+left borders drawn — those two edges become the
   two visible sides of the triangle. Positioned so its bottom half hides
   behind the popover body (which is opaque and paints on top), leaving
   only a triangular nub sticking out the top. left aligns it under the
   input's left edge, offset a bit in so it doesn't sit on the popover's
   rounded corner. */
.ximera-math-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 14px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-top: 1px solid var(--ximera-color-neutral-border);
  border-left: 1px solid var(--ximera-color-neutral-border);
  transform: rotate(45deg);
}

.ximera-math-popover[hidden] { display: none; }