/* The on-screen keyboard. Colours and sizes come from generated/tokens.css. */
.kb {
  --key-h: var(--phone-key-height);
  --gap: var(--phone-key-gap);
  --glyph: var(--phone-glyph-size);
  --hint: var(--phone-hint-size);
  position: relative;
  /* Tifinagh runs left to right, so the keys keep their order even on an Arabic page. */
  direction: ltr;
  display: grid;
  gap: var(--gap);
  padding: calc(var(--gap) + 9px) var(--gap) var(--gap);
  /* The flag's three bands, in its order, along the top edge: the keyboard's one flag moment. */
  background: linear-gradient(to bottom,
    var(--flag-blue) 0 3px, var(--flag-green) 3px 6px, var(--flag-yellow) 6px 9px, var(--key-fn) 9px);
  border-radius: var(--radius-panel);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-family: var(--font-latin), var(--script-fonts, system-ui), system-ui, sans-serif;
}
.kb.is-desktop {
  --key-h: var(--desktop-key-height);
  --gap: var(--desktop-key-gap);
  --glyph: var(--desktop-glyph-size);
  --hint: var(--desktop-hint-size);
}
.kb-row { display: flex; gap: var(--gap); }
.kb-key {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: calc(var(--key-h) * var(--scale, 1));
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-key);
  background: var(--key);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--key-shadow);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kb-key:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.kb-key.is-down { background: var(--highlight); color: var(--on-highlight); box-shadow: none; }
.kb-glyph { font-family: var(--font-tifinagh), sans-serif; font-size: calc(var(--glyph) * var(--scale, 1)); line-height: 1; }
.kb-hint { font-size: var(--hint); line-height: 1; color: var(--muted); }
.kb-key.is-down .kb-hint { color: inherit; }
/* A dot in the corner marks a key with more letters under a long press. */
.kb-key.has-alt::after {
  content: "";
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--flag-red);
}
.kb-fn { background: var(--key-fn); box-shadow: 0 1px 0 var(--key-shadow); font-size: var(--text-xs); color: var(--ink); }
.kb-row-fn .kb-fn { background: var(--key); }
.kb-delete, .kb-enter { font-size: var(--text-m); }
.kb-delete { flex-grow: 1.4; background: var(--key-fn); }
.kb-space { flex-grow: 4.5; }
.kb-next { flex-grow: 2; padding-inline: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: calc(var(--key-h) * var(--scale, 1)); }
.kb-layer { flex-grow: 1.4; font-family: var(--font-tifinagh), var(--font-latin), sans-serif; }
.kb-enter { flex-grow: 1.4; background: var(--accent) !important; color: var(--on-accent); }
.kb-sep .kb-glyph, .kb-sep { font-family: var(--font-tifinagh), sans-serif; font-size: var(--glyph); }
.kb-sym .kb-glyph { font-family: var(--font-latin), var(--font-tifinagh), sans-serif; }

/* The key preview: the letter large, with its sound, above the finger. */
.kb-preview {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, calc(-100% - 6px));
  display: grid;
  justify-items: center;
  min-width: 64px;
  padding: 8px 12px 6px;
  border-radius: var(--radius-panel);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
  pointer-events: none;
  display: none;
  z-index: 2;
}
.kb-preview.is-on { display: grid; }
.kb-preview-glyph { font-family: var(--font-tifinagh), sans-serif; font-size: var(--preview-glyph-size); line-height: 1.1; }
.kb-preview-hint { font-size: var(--preview-hint-size); color: var(--muted); }

.kb-popup {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, calc(-100% - 6px));
  display: flex;
  gap: var(--gap);
  padding: var(--gap);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
  z-index: 3;
}
.kb-popup[hidden] { display: none; }
.kb-alt { width: 48px; flex: none; }
.kb-alt.is-focus { background: var(--highlight); color: var(--on-highlight); }


/* Key size setting. */
.kb[data-size="s"] { --scale: 0.85; }
.kb[data-size="l"] { --scale: 1.2; }