/* Math keyboard: own skin. Desktop (full) vs phone (compact) layout is chosen by the WIDTH OF THE BOARD
   (container query), not of the window: the same 760px lives in config.php (desktop_min_width). */
.mkb {
  --mkb-ink: #17181a;
  --mkb-muted: #6b6f76;
  --mkb-line: #dfe2e6;
  --mkb-card: #fff;
  --mkb-key: #26282b;
  --mkb-key-ink: #f3ec6a;
  --mkb-key-shadow: rgba(0, 0, 0, .35);
  --mkb-fn: #23905a;
  --mkb-fn-ink: #fff;
  --mkb-edit: #f0d83a;
  --mkb-edit-ink: #151515;
  --mkb-nav: #3aa6dc;
  --mkb-nav-ink: #fff;
  --mkb-light: #fff;
  --mkb-accent: #2f6fe0;
  --mkb-hit: #ff7a1a;
  --mkb-hit-soft: rgba(255, 122, 26, .2);
  --mkb-cnt-ink: #fff;
  --mkb-pill: #eef1f6;
  --mkb-pill-focus: #f6f8fb;
  --mkb-pill-line: #c3cad6;
  --mkb-off: #b4551b;
  --mkb-shadow: 0 10px 30px rgba(20, 25, 35, .14);
  --mkb-k: 48px;
  --mkb-gap: 6px;
  --mkb-cl-gap: 14px;
  --mkb-radius: 10px;
  --mkb-card-radius: 14px;
  --mkb-card-pad: 12px;
  --mkb-bar-h: 40px;
  --mkb-bar-h-phone: 34px;
  --mkb-out-min-phone: 56px;
  --mkb-out-font-phone: 22px;
  --mkb-out-max-phone: 40dvh;   /* a stuck field must leave room for the keys */
  --mkb-stick-z: 30;
  --mkb-stick-shadow: 0 6px 16px rgba(20, 25, 35, .16);
  --mkb-k-max: 52px;
  --mkb-k-min: 34px;
  --mkb-k-max-phone: 60px;
  --mkb-desktop-cols: 16;   /* keys across the full layout: 4 + 4 + 4 + 4 */
  --mkb-desktop-clusters: 4;
  --mkb-phone-cols: 6;
  --mkb-math-font: "Cambria Math", "STIX Two Math", "Latin Modern Math", "Noto Sans Math", "Segoe UI Symbol", Cambria, serif;
  --mkb-ui-font: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--mkb-ink);
  max-width: 1012px;
  margin-inline: auto;
  text-align: left;
}
.mkb-card {
  background: var(--mkb-card);
  border: 1px solid var(--mkb-line);
  border-radius: var(--mkb-card-radius);
  padding: var(--mkb-card-pad);
  margin-bottom: 12px;
}

/* ---------- field + edit bar ---------- */
.mkb-out.form-control {
  min-height: 72px;
  resize: none;          /* height follows the text (mkb.js fitField) */
  overflow-y: hidden;
  border-radius: var(--mkb-radius);
  padding: 10px 12px;
  font: 24px/1.35 var(--mkb-math-font);
  color: var(--mkb-ink);
}
.mkb-out.form-control::placeholder { font: 16px/1.9 var(--mkb-ui-font); color: var(--mkb-muted); font-style: italic; }
.mkb-bar { display: flex; flex-wrap: wrap; gap: var(--mkb-gap); margin-top: 8px; align-items: center; }
.mkb-bar .mkb-key { height: var(--mkb-bar-h); min-width: 0; padding: 0 12px; }
.mkb-sys { display: none; }
@media (pointer: coarse) { .mkb-sys { display: inline-block; } }
.mkb-sys[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--mkb-edit-ink); }
.mkb-status { color: var(--mkb-muted); font-size: 13px; margin-left: auto; min-height: 1em; }

/* search: a quiet helper, not a second input field; suggestions drop over the page */
.mkb-search { position: relative; width: min(290px, 100%); }
.mkb-q {
  width: 100%; height: 34px;
  border: 1px dashed var(--mkb-pill-line); border-radius: 999px;
  padding: 0 12px 0 32px;
  font: 13px var(--mkb-ui-font); color: var(--mkb-ink);
  background: var(--mkb-pill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b6f76' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") 11px 50% no-repeat;
  outline: none; box-shadow: none;
}
.mkb-q::placeholder { color: var(--mkb-muted); }
.mkb-q:focus { border-style: solid; background-color: var(--mkb-pill-focus); }
.mkb-search:not(:focus-within) .mkb-sugs { display: none; }
.mkb-sugs {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  width: min(520px, 92vw);
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px;
  background: var(--mkb-card); border: 1px solid var(--mkb-line); border-radius: 12px; box-shadow: var(--mkb-shadow);
}
.mkb-sugs:empty { display: none; }
.mkb-sug {
  display: flex; align-items: center; gap: 8px; max-width: 100%;
  border: 1px solid var(--mkb-line); background: var(--mkb-card); border-radius: var(--mkb-radius);
  padding: 4px 10px 4px 6px; cursor: pointer; text-align: left; color: var(--mkb-ink);
}
.mkb-sug:first-child { border-color: var(--mkb-hit); box-shadow: 0 0 0 2px var(--mkb-hit-soft); }
.mkb-sug__sym { font: 24px/1.2 var(--mkb-math-font); min-width: 30px; text-align: center; }
.mkb-sug__nm { display: block; font: 600 13px var(--mkb-ui-font); }
.mkb-sug__via { display: block; font: 11px var(--mkb-ui-font); color: var(--mkb-muted); }
.mkb-sug__off { color: var(--mkb-off); }
.mkb-sugs__empty { color: var(--mkb-muted); font-size: 13px; padding: 2px 4px; }

/* ---------- keys ---------- */
.mkb-board { container: mkb / inline-size; }
.mkb-key {
  position: relative;
  height: var(--mkb-k); min-width: var(--mkb-k);
  border: 0; border-radius: var(--mkb-radius);
  background: var(--mkb-key); color: var(--mkb-key-ink);
  font: calc(var(--mkb-k) * .42) / 1 var(--mkb-math-font);
  padding: 0 6px; cursor: pointer; user-select: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 0 var(--mkb-key-shadow);
}
.mkb-key:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--mkb-key-shadow); }
.mkb-key--long { font-size: calc(var(--mkb-k) * .3); }
.mkb-key--function { background: var(--mkb-fn); color: var(--mkb-fn-ink); font: 600 calc(var(--mkb-k) * .29) / 1 var(--mkb-ui-font); }
.mkb-key--edit { background: var(--mkb-edit); color: var(--mkb-edit-ink); font: 600 14px/1 var(--mkb-ui-font); }
.mkb-key--nav { background: var(--mkb-nav); color: var(--mkb-nav-ink); font-family: var(--mkb-ui-font); }
.mkb-key__base { opacity: .3; }
.mkb-key.is-hit { outline: 3px solid var(--mkb-hit); outline-offset: 1px; animation: mkb-pulse 1s ease-in-out 2; }
@keyframes mkb-pulse { 50% { outline-offset: 4px; } }
@media (prefers-reduced-motion: reduce) { .mkb-key.is-hit { animation: none; } }

.mkb-main { display: grid; gap: 12px var(--mkb-cl-gap); justify-content: start; align-items: start; }
.mkb-cl { min-width: 0; }
.mkb-cl__title { font: 600 12px var(--mkb-ui-font); color: var(--mkb-muted); margin: 0 0 6px 2px; text-transform: uppercase; letter-spacing: .04em; }
.mkb-grid { display: grid; gap: var(--mkb-gap); grid-template-columns: repeat(var(--mkb-cols), auto); }
.mkb-row { display: flex; flex-wrap: wrap; gap: var(--mkb-gap); margin-bottom: var(--mkb-gap); }
.mkb-nav { display: flex; flex-wrap: wrap; gap: var(--mkb-gap); margin-top: 8px; }
.mkb-nav .mkb-key { min-width: calc(var(--mkb-k) * var(--mkb-w, 1)); }
.mkb-nav .mkb-key--edit { font-size: 14px; }

/* group panels: light keys, so they read as "more" and not as the main block */
.mkb-panels .mkb-key:not(.mkb-key--function) {
  background: var(--mkb-light); color: var(--mkb-ink);
  border: 1px solid var(--mkb-line); box-shadow: 0 2px 0 var(--mkb-line);
}

/* group switcher: a tab strip (text + underline), deliberately unlike keys */
.mkb-tabs { display: flex; flex-wrap: wrap; gap: 0 2px; margin: 16px 0 12px; border-bottom: 1px solid var(--mkb-line); }
.mkb-tab {
  position: relative; order: var(--mkb-od);
  border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none;
  margin-bottom: -1px; padding: 8px 10px 7px;
  font: 500 13px var(--mkb-ui-font); color: var(--mkb-muted); cursor: pointer;
}
.mkb-tab:hover { color: var(--mkb-ink); }
.mkb-tab[aria-selected="true"] { color: var(--mkb-ink); font-weight: 700; border-bottom-color: var(--mkb-accent); }
.mkb-tab__g { display: none; font: 500 15px var(--mkb-math-font); }
.mkb-tab__cnt {
  position: absolute; right: -2px; top: 0; min-width: 16px; padding: 0 4px;
  background: var(--mkb-hit); color: var(--mkb-cnt-ink); border-radius: 999px; font: 700 10px/16px var(--mkb-ui-font);
}

/* ---------- desktop: full layout ---------- */
@container mkb (min-width: 760px) {
  .mkb-board > * {
    --mkb-k: clamp(var(--mkb-k-min), calc((100cqw - (var(--mkb-desktop-cols) - var(--mkb-desktop-clusters)) * var(--mkb-gap) - (var(--mkb-desktop-clusters) - 1) * var(--mkb-cl-gap)) / var(--mkb-desktop-cols)), var(--mkb-k-max));
  }
  .mkb-main--mobile { display: none; }
}
/* ---------- phone: compact layout ---------- */
@container mkb (max-width: 759.98px) {
  .mkb-board > * {
    --mkb-k: clamp(var(--mkb-k-min), calc((100cqw - (var(--mkb-phone-cols) - 1) * var(--mkb-gap)) / var(--mkb-phone-cols)), var(--mkb-k-max-phone));
  }
  .mkb-main--desktop { display: none; }
  .mkb-main--mobile .mkb-grid { grid-template-columns: repeat(var(--mkb-cols), var(--mkb-k)); }
  .mkb-tab { order: var(--mkb-om); padding: 7px 9px 6px; }
  .mkb-tab__t { display: none; }
  .mkb-tab__g { display: inline; }
}
/* Phone: the tool is taller than the screen, so the field sticks to the top while the keys scroll
   under it (owner 2026-10-09: "otherwise people ride up and down for every symbol"). It lets go when
   the tool block ends, because sticky is bounded by .mkb. */
@media (max-width: 767.98px) {
  .mkb-field { position: sticky; top: 0; z-index: var(--mkb-stick-z); transition: box-shadow .15s; }
  .mkb-field.is-stuck { box-shadow: var(--mkb-stick-shadow); border-top-left-radius: 0; border-top-right-radius: 0; }
  .mkb-out.form-control { min-height: var(--mkb-out-min-phone); max-height: var(--mkb-out-max-phone); font-size: var(--mkb-out-font-phone); }
  .mkb-bar .mkb-key { height: var(--mkb-bar-h-phone); padding: 0 10px; font-size: 13px; }
}
/* the field card has no container: its own narrow-screen tweaks go by the window */
@media (max-width: 575.98px) {
  .mkb-card { padding: 10px; }
  .mkb-status { order: 1; }
  .mkb-search { width: auto; flex: 1 1 150px; order: 2; }
  .mkb-sugs { left: 0; right: auto; width: 100%; }
}