/*
 * Math answer field and keypad (public_html/scripts/math-input.js).
 *
 * Layout, top to bottom inside one .mi-host:
 *   answer field + keypad toggle      one row, the field takes the space
 *   Unit tray                         one wrapping row of chips (only when the problem has units)
 *   keypad                            full width of the host, capped at 28rem
 *       relations strip               <  >  <=  >=  !=  =
 *       two blocks side by side       functions (left)  |  digits and operations (right)
 *
 * Tokens only, so light and dark both work. No left-border accents. Text never below 12px.
 * Key labels cannot overflow: keys clip, never wrap, and size from the viewport on narrow screens.
 */

/* One width for the field, unit row and keypad: the column they sit in, capped at --mi-width so a single-column
   sheet gives the same keypad as one half of a two-column sheet. */
.mi-host { --mi-width: 22.8rem; display: block; width: 100%; max-width: var(--mi-width); min-width: 0; contain: inline-size; }

/* ---- answer field row ---------------------------------------------------------------------- */
.mi-field { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.mi-affix { flex: none; font-size: 1rem; color: var(--md-on-surface); white-space: nowrap; }
.mi-affix i { font-family: var(--font-display, serif); }
.mi-unit { font-size: .88rem; color: var(--md-on-surface-variant); }

math-field.mi-math,
.mi-text {
  flex: 1 1 10rem;
  box-sizing: border-box;
  min-width: 0;
  min-height: 42px;
  padding: 0 .6rem;
  border: 1px solid var(--md-outline);
  border-radius: var(--shape-sm, 6px);
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
  font-size: 1.15rem;
}
.mi-text { font-family: var(--font-mono, monospace); font-size: 1rem; }
math-field.mi-math:focus-within,
.mi-text:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -1px; }
math-field.mi-math[read-only],
.mi-text:read-only { opacity: .75; }

/* MathLive draws its own keyboard and menu buttons inside the field; this page has its own keypad. */
math-field.mi-math::part(virtual-keyboard-toggle),
math-field.mi-math::part(menu-toggle) { display: none; }
math-field.mi-math {
  --caret-color: var(--md-primary);
  --selection-background-color: var(--md-primary-container);
  --selection-color: var(--md-on-primary-container);
  --placeholder-color: var(--md-outline);
  --smart-fence-opacity: 1;
}

.mi-kp-toggle {
  flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--md-outline-variant); border-radius: var(--shape-sm, 6px);
  background: var(--md-surface-container-lowest); color: var(--md-on-surface-variant); font-size: 1.2rem; cursor: pointer;
}
.mi-kp-toggle:hover { background: var(--md-surface-container); }
.mi-kp-toggle:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 1px; }

/* ---- unit tray ----------------------------------------------------------------------------- */
/* Even grid of chips under a caption: 3 chips or 6, they line up and never leave an orphan. */
.mi-tray { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: 4px; margin-top: .5rem; }
.mi-tray-label { grid-column: 1 / -1; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--md-on-surface-variant); }
.mi-chip {
  min-width: 0; min-height: 34px; padding: 0 .3rem; text-align: center;
  border: 1px solid var(--md-outline-variant); border-radius: var(--shape-sm, 6px);
  background: var(--md-surface-container-lowest); color: var(--md-on-surface);
  font: inherit; font-size: .88rem; line-height: 1; white-space: nowrap; cursor: pointer; touch-action: manipulation;
}
.mi-chip:hover { background: var(--md-surface-container); }
.mi-chip.on, .mi-chip[aria-pressed="true"] {
  background: var(--md-primary); color: var(--md-on-primary); border-color: var(--md-primary); font-weight: 600;
}
.mi-chip:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.mi-chip:disabled { opacity: .6; cursor: default; }

/* ---- keypad -------------------------------------------------------------------------------- */
.mi-keypad {
  box-sizing: border-box; width: 100%; margin-top: .55rem; padding: .5rem;
  display: flex; flex-direction: column; gap: .45rem;
  border: 1px solid var(--md-outline-variant); border-radius: var(--shape-md, 10px);
  background: var(--md-surface-container-low);
  user-select: none; -webkit-user-select: none;
}
.mi-keypad[hidden] { display: none; }

.mi-kp-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mi-kp-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--shape-full, 999px); background: var(--md-surface-container); }
.mi-kp-tab, .mi-kp-hide {
  min-height: 28px; padding: 0 .8rem; border: 0; background: transparent; color: var(--md-on-surface-variant);
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.mi-kp-tab { border-radius: var(--shape-full, 999px); }
.mi-kp-tab[aria-pressed="true"] { background: var(--md-primary); color: var(--md-on-primary); }
.mi-kp-hide { border-radius: var(--shape-sm, 6px); font-weight: 500; }
.mi-kp-hide:hover { background: var(--md-surface-container-high); }
.mi-kp-tab:focus-visible, .mi-kp-hide:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 1px; }

.mi-kp-grid { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.mi-kp-rel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.mi-kp-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; min-width: 0; }
.mi-kp-fn, .mi-kp-num { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.mi-kp-letters { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }

.mi-key {
  box-sizing: border-box; min-width: 0; height: 40px; padding: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--md-outline-variant); border-radius: var(--shape-sm, 6px);
  background: var(--md-surface-container-lowest); color: var(--md-on-surface);
  font: inherit; font-size: clamp(.85rem, 3.4vw, 1.05rem); line-height: 1; white-space: nowrap;
  cursor: pointer; touch-action: manipulation;
}
.mi-key:hover { background: var(--md-surface-container-high); }
.mi-key:active { background: var(--md-surface-container-highest); }
.mi-key:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 1px; }

/* Three quiet tints instead of loud fills: digits are the plainest, operations and relations are
   tinted with the brand colour, editing keys sit back. */
.mi-key.num { font-weight: 600; }
.mi-key.fn { background: var(--md-surface-container-low); }
.mi-key.op { background: color-mix(in srgb, var(--md-primary) 14%, var(--md-surface-container-lowest)); color: var(--md-primary); font-weight: 600; }
.mi-key.rel { background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface-container-lowest)); color: var(--md-primary); font-weight: 600; }
.mi-key.nav { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }

@media (pointer: coarse) { .mi-key { height: 46px; } .mi-chip { min-height: 42px; } .mi-kp-tab, .mi-kp-hide { min-height: 36px; } }
@media (max-width: 420px) {
  .mi-keypad { padding: .4rem; }
  .mi-kp-body { gap: .4rem; }
  .mi-kp-fn, .mi-kp-num, .mi-kp-rel { gap: 3px; }
}
@media print { .mi-keypad, .mi-tray, .mi-kp-toggle { display: none !important; } }

/* ---- Insert math (written answers in math decks) ------------------------------------------- */
.mi-insert { margin-top: .4rem; }
.mi-insert-btn, .mi-insert-go {
  min-height: 34px; padding: 0 .9rem; border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-full, 999px); background: var(--md-surface-container-lowest);
  color: var(--md-primary); font: inherit; font-size: .88rem; cursor: pointer;
}
.mi-insert-btn:hover, .mi-insert-go:hover { background: var(--md-surface-container); }
.mi-insert-go { background: var(--md-primary); color: var(--md-on-primary); border-color: var(--md-primary); margin-top: .5rem; }
.mi-insert-pop {
  margin-top: .4rem; padding: .6rem; border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-md, 10px); background: var(--md-surface-container-low);
}
.mi-insert-pop[hidden] { display: none; }
.mi-preview { margin-top: .4rem; font-size: 1rem; color: var(--md-on-surface); white-space: pre-wrap; }
.mi-preview:empty { display: none; }