/* keyboard.css */
/* Mid-gray theme with darker keys and subtle shadows */
:root {
  --kb-bg: #e5e7eb;          /* light gray background */
  --kb-key: #d1d5db;         /* gray-300 keys (darker) */
  --kb-key-hover: #cbd5e1;   /* gray-400 hover */
  --kb-key-active: #9ca3af;  /* gray-500 pressed */
  --kb-text: #111827;        /* dark text */
  --kb-accent: #2563eb;      /* blue outline for active Caps/Shift */
  --kb-radius: 12px;
  --kb-gap: 6px;
  --kb-key-h: 42px;
  --kb-z: 9999;
}

/* Keyboard shell (fixed to viewport so it never covers the field) */
.vkbd {
  position: fixed;
  display: none;
  z-index: var(--kb-z);
  background: var(--kb-bg);
  color: var(--kb-text);
  border-radius: var(--kb-radius);
  box-shadow: 0 20px 45px rgba(0,0,0,.25);
  padding: 10px;
  user-select: none;
  touch-action: manipulation;
  width: max-content;
  max-width: min(100vw - 16px, 720px);
}
.vkbd.visible { display: block; }

.vkbd-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.vkbd-title { font-size: 12px; opacity: .8; }
.vkbd-close {
  background: transparent; color: var(--kb-text);
  border: 0; font-size: 16px; cursor: pointer; padding: 6px 8px;
  border-radius: 8px;
}
.vkbd-close:hover { background: var(--kb-key-hover); }

.vkbd-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--kb-gap);
  margin: 6px 0;
}

/* Keys: darker gray, subtle outline + shadow */
.vkbd-key {
  display: inline-grid;
  place-items: center;
  height: var(--kb-key-h);
  padding: 0 10px;
  background: var(--kb-key);
  color: var(--kb-text);
  border: 1px solid #9ca3af;      /* subtle outline */
  border-radius: 8px;              /* slightly rounded corners */
  cursor: pointer;
  transition: background .08s ease, transform .05s ease, box-shadow .08s ease;
  font: 500 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);  /* gentle depth */
}
.vkbd-key:hover { background: var(--kb-key-hover); }
.vkbd-key:active {
  background: var(--kb-key-active);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); /* pressed look */
  transform: translateY(1px);
}

.vkbd-key.wide  { grid-column: span 2; }
.vkbd-key.wider { grid-column: span 3; }
.vkbd-key.space { grid-column: span 5; }
.vkbd-key.accent { outline: 2px solid var(--kb-accent); }