/* ── On-screen keyboard ───────────────────────────────────────────────────
   Sits fixed at the bottom of the 1920×1200 canvas.
   Hidden by default; shown when a .kb-input gains focus.
──────────────────────────────────────────────────────────────────────────── */

#onscreen-kb {
  position:   fixed;
  bottom:     0;
  left:       0;
  width:      100%;
  z-index:    9999;

  display:        flex;
  flex-direction: column;
  gap:            12px;

  padding:        24px 48px 40px;

  background:     rgba(10, 10, 14, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top:     1px solid rgba(255, 255, 255, 0.08);
  box-shadow:     0 -8px 48px rgba(0, 0, 0, 0.6);

  /* Start hidden — slide up on .kb--visible */
  transform:  translateY(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#onscreen-kb.kb--visible {
  transform: translateY(0);
}

/* ── Row ───────────────────────────────────────────────────────────────── */
.kb-row {
  display:         flex;
  justify-content: center;
  gap:             12px;
}

/* ── Keys ──────────────────────────────────────────────────────────────── */
.kb-key {
  height:    96px;
  min-width: 96px;
  padding:   0 16px;

  display:         flex;
  align-items:     center;
  justify-content: center;

  background:    rgba(255, 255, 255, 0.08);
  border:        1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color:         #f0f0f0;
  font-family:   'Inter', system-ui, sans-serif;
  font-size:     28px;
  font-weight:   500;
  cursor:        pointer;
  user-select:   none;
  -webkit-user-select: none;

  transition: background 0.08s, transform 0.08s, border-color 0.08s, box-shadow 0.08s;
  touch-action: manipulation;
}

.kb-key:hover {
  background:   rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.20);
}

.kb-key:active {
  background:   rgba(255, 255, 255, 0.26);
  transform:    scale(0.90);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow:   inset 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Modifier keys ─────────────────────────────────────────────────────── */

/* Backspace / Shift — wider */
.kb-key--wide {
  min-width: 150px;
  font-size: 24px;
}

/* Space bar */
.kb-key--space {
  flex:      1;
  max-width: 640px;
  min-width: 300px;
}

/* Enter — accent color, most prominent key */
.kb-key--enter {
  min-width:    180px;
  height:       96px;
  background:   var(--primary, #e50914);
  border-color: var(--primary, #e50914);
  color:        #fff;
  font-size:    26px;
  font-weight:  600;
  box-shadow:   0 4px 24px color-mix(in srgb, var(--primary, #e50914) 45%, transparent);
}

.kb-key--enter:hover {
  background:   color-mix(in srgb, var(--primary, #e50914) 85%, #fff);
  border-color: var(--primary, #e50914);
}

.kb-key--enter:active {
  background: color-mix(in srgb, var(--primary, #e50914) 70%, #000);
  transform:  scale(0.90);
}

/* Clear — subtle, low-priority */
.kb-key--clear {
  min-width:    130px;
  color:        rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.06);
  font-size:    22px;
}

.kb-key--clear:hover {
  color:        #f87171;
  border-color: rgba(248, 113, 113, 0.25);
  background:   rgba(248, 113, 113, 0.08);
}

/* Shift — active state when caps on */
.kb-key--shift-active {
  background:   color-mix(in srgb, var(--primary, #e50914) 20%, transparent);
  border-color: var(--primary, #e50914);
  color:        var(--primary, #e50914);
  box-shadow:   0 0 0 1px var(--primary, #e50914);
}

/* ── Keyboard open: top 50% = input only, bottom 50% = keyboard ──────────
   body.kb-open is toggled by keyboard.js show/hide.
──────────────────────────────────────────────────────────────────────────── */

/* Shrink viewport to top 600px — keyboard takes the bottom 600px */
#slide-viewport {
  transition: bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.kb-open #slide-viewport {
  bottom: 600px;
}

/* Hide question text, progress header and nav buttons —
   keyboard slides up over them so the snap is invisible */
body.kb-open .question-slide .survey-header,
body.kb-open .question-slide .question-text,
body.kb-open .question-slide .survey-footer {
  display: none;
}

/* Centre the input vertically in the 600px space */
body.kb-open .question-slide {
  padding:         40px 96px;
  justify-content: center;
}

/* Textarea: fill the available height */
body.kb-open .write-input {
  height: 440px;
}

/* Contact fields: tighten up, use full width */
body.kb-open .contact-fields {
  max-width:   100%;
  padding-top: 0;
  gap:         24px;
}