/* On-screen keyboard: one key height, one gap, a fixed 60-column grid for the text layout. */
.kb {
  --kb-key-h: 48px;
  --kb-gap: 6px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 92;
  background: var(--surface-2);
  border-top: 1px solid var(--line-strong);
  padding: .6rem .75rem calc(.75rem + env(safe-area-inset-bottom));
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.kb__inner { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: .55rem; }
/* bar lives directly inside .kb — never inside kb__inner — so layout max-width never affects it */
.kb__bar { display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; padding: 0 .1rem .55rem; max-width: 1000px; margin: 0 auto; width: 100%; }
.kb[data-layout="math"] .kb__inner, .kb[data-layout="point"] .kb__inner { max-width: 440px; }
.kb[data-layout="code"] .kb__inner { max-width: 340px; }
.kb__tabs { display: flex; gap: .3rem; flex-shrink: 0; }
.kb__tab {
  flex-shrink: 0;
  height: 36px; padding: 0 .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--muted); font-weight: 600; font-size: .85rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.kb__tab.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.kb__tab--icon { flex-shrink: 0; width: 44px; padding: 0; }
.kb__preview {
  flex: 1 1 0; min-width: 0; height: 36px; padding: 0 .75rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  font-family: var(--font-mono); font-size: 1rem; white-space: pre; overflow: hidden;
}
.kb__caret { display: inline-block; width: 2px; height: 1.1em; margin: 0 1px; background: var(--primary); animation: kb-blink 1s steps(1) infinite; }
@keyframes kb-blink { 50% { opacity: 0; } }

.kb__grid { display: grid; grid-auto-rows: var(--kb-key-h); gap: var(--kb-gap); }
.kb__key {
  position: relative; min-width: 0; height: 100%;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-family: var(--font); font-size: 1.15rem; font-weight: 500; line-height: 1;
  cursor: pointer; padding: 0;
}
.kb__key .icon { width: 1.15rem; height: 1.15rem; }
.kb__key.is-pressed { background: var(--surface-3); border-color: var(--muted); }
.kb__key--fn { background: var(--surface-3); color: var(--muted); font-size: .8rem; font-weight: 600; }
.kb__key--fn.is-pressed { background: var(--line-strong); }
.kb__key.is-on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.kb__key--done { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.kb__key--done.is-pressed { background: var(--primary-press); }
.kb__key--space { background: var(--surface); }
.kb__key--enter { align-items: center; }
.kb__fnlabel { font-size: .75rem; }
.kb__key--left .kb__fnlabel, .kb__key--right .kb__fnlabel, .kb__key--half .kb__fnlabel { display: none; }
.kb__main { pointer-events: none; }
.kb__alt { position: absolute; top: 4px; left: 6px; font-size: .68rem; color: var(--muted); pointer-events: none; }
.kb__alt + .kb__main { position: relative; top: 6px; }
.kb__alt.is-active { color: var(--primary); font-weight: 700; }
.kb__updown { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; min-width: 0; }
.kb__key--half { height: 100%; }

.kb[data-layout="math"] .kb__key, .kb[data-layout="code"] .kb__key, .kb[data-layout="point"] .kb__key { font-family: var(--font-mono); font-size: 1.35rem; }
.kb[data-layout="math"] .kb__key--fn, .kb[data-layout="code"] .kb__key--fn, .kb[data-layout="point"] .kb__key--fn { font-family: var(--font); font-size: .8rem; }

body.kb-open { padding-bottom: var(--kb-h, 0px); }
body.kb-open .under-menu, body.kb-open .fball { display: none; }
/* Dialogs sit above the page but below the keyboard; they shrink to the space left above it. */
body.kb-open .modal, body.kb-open .ask-overlay { bottom: var(--kb-h, 0px); }
body.kb-open .modal__card { max-height: calc(100dvh - var(--kb-h, 0px) - 2rem); }

[data-layout="smartboard"] .kb { --kb-key-h: 3.2rem; --kb-gap: .4rem; }
[data-layout="smartboard"] .kb__inner, [data-layout="smartboard"] .kb__bar { max-width: 55rem; }
[data-layout="smartboard"] .kb[data-layout="math"] .kb__inner, [data-layout="smartboard"] .kb[data-layout="point"] .kb__inner { max-width: 24rem; }
[data-layout="smartboard"] .kb[data-layout="code"] .kb__inner { max-width: 19rem; }
[data-layout="smartboard"] .kb__tab, [data-layout="smartboard"] .kb__preview { height: 2.1rem; }
[data-layout="smartboard"] .kb__tab--icon { width: 2.5rem; }
[data-layout="mobile"] .kb { --kb-key-h: 42px; --kb-gap: 4px; padding-inline: .3rem; }
[data-layout="mobile"] .kb__fnlabel { display: none; }
/* Game skin: chunky keys that squish down on press */
.kb__key { border-width: 2px; border-radius: 12px; font-weight: 800; box-shadow: 0 3px 0 var(--edge); transition: transform 50ms ease-out, box-shadow 50ms ease-out; }
.kb__key.is-pressed { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
.kb__key--done { box-shadow: 0 3px 0 var(--primary-edge); }