/* tt: on-screen keyboard.
 *
 * Minimal keys cut from the theme's own surface colours, each carrying the
 * same paper grain as the page. Depth is a hairline border and a two-pixel
 * bottom edge, nothing more. A key is only ever highlighted while it is being
 * pressed or clicked. */

.kb {
  width: 100%;
  max-width: min(1180px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--kb-gap, 5px);
  --kb-u: 52px;
  --kb-gap: 5px;
  /* glass: a translucent pane over the page, a hairline rim, and light
     falling on the top edge. No hard drop edge, nothing to cast a slab. */
  --glass: color-mix(in srgb, var(--panel) 62%, transparent);
  --glass-rim: color-mix(in srgb, var(--text) 13%, transparent);
  --glass-lip: color-mix(in srgb, var(--text) 16%, transparent);
  --glass-cast: color-mix(in srgb, var(--bg) 40%, transparent);
  user-select: none;
  touch-action: manipulation;
}
.kb-row { display: flex; gap: var(--kb-gap); justify-content: center; }

.key {
  height: var(--kb-u);
  flex: 0 0 auto;
  position: relative;
  border-radius: 2px;
  background: var(--glass);
  border: 1px solid var(--glass-rim);
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 var(--glass-lip),
    0 1px 2px var(--glass-cast),
    0 6px 16px color-mix(in srgb, var(--bg) 28%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  cursor: default;
  /* nothing moves on press: only the surface lifts, so a fast burst reads as
     a steady ripple rather than keys hopping about */
  transition: background-color 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}

/* the paper grain, matched to the page */
.key::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 200px 200px;
  opacity: .16;
  pointer-events: none;
}

.key .glyph,
.key .glyph-shift {
  position: relative;
  z-index: 1;
  color: var(--text);
  font-family: var(--ui-font);
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
}
.key .glyph {
  font-size: calc(var(--kb-u) * .33);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.key .glyph-shift { font-size: calc(var(--kb-u) * .21); color: var(--dim); font-weight: 600; }
.key.mod .glyph { font-size: calc(var(--kb-u) * .20); color: var(--dim); letter-spacing: .02em; }

/* the F and J nibs */
.key.homebump::after {
  z-index: 1;
  content: '';
  position: absolute;
  bottom: 16%; left: 50%; transform: translateX(-50%);
  width: 28%; height: 2px; border-radius: 2px;
  background: var(--dim);
  z-index: 1;
}

/* home anchors sit one step lighter so the resting row reads at a glance */
.kb.homerow .key.anchor { background: color-mix(in srgb, var(--text) 8%, var(--glass)); }

/* optional teaching aid, off by default: the legend takes the finger colour */
.kb.fingers .key[data-finger="lp"] .glyph { color: var(--f-lp); }
.kb.fingers .key[data-finger="lr"] .glyph { color: var(--f-lr); }
.kb.fingers .key[data-finger="lm"] .glyph { color: var(--f-lm); }
.kb.fingers .key[data-finger="li"] .glyph { color: var(--f-li); }
.kb.fingers .key[data-finger="ri"] .glyph { color: var(--f-ri); }
.kb.fingers .key[data-finger="rm"] .glyph { color: var(--f-rm); }
.kb.fingers .key[data-finger="rr"] .glyph { color: var(--f-rr); }
.kb.fingers .key[data-finger="rp"] .glyph { color: var(--f-rp); }
.kb.fingers .key[data-finger="th"] .glyph { color: var(--f-th); }

/* pressed: one step lighter than the board, and the bottom edge tucks in.
   No transform, so the legend never resamples and stays crisp. */
/* pressed: the pane frosts a shade brighter. Nothing moves, nothing jumps. */
.kb .key.down,
.kb .key.hit,
.kb.homerow .key.anchor.down,
.kb.homerow .key.anchor.hit {
  background: color-mix(in srgb, var(--text) 20%, var(--glass));
  border-color: color-mix(in srgb, var(--text) 34%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 26%, transparent),
    0 0 0 3px color-mix(in srgb, var(--text) 6%, transparent);
  transition-duration: 60ms;
}

/* an optional next-key hint, off unless you turn it on in settings */
.kb .key.next,
.kb.homerow .key.anchor.next { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--glass)); }
.key.next .glyph { color: var(--text); }
.key.nextmod { border-color: color-mix(in srgb, var(--accent) 45%, var(--sub)); }
.key.next, .key.nextmod { transition: none; }

.kb .key.wrong,
.kb.homerow .key.anchor.wrong { background: var(--error); border-color: var(--error); transition: none; }
.key.wrong .glyph, .key.wrong .glyph-shift { color: var(--bg); }

.key.dormant { opacity: .32; }

.kb-legend { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; align-items: center; }
.kb-legend span { display: inline-flex; align-items: center; gap: 5px; }
.kb-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .key { transition: none; }
  .key.down { transform: none; }
}