/* Without JS: an alphabet of links that search for the letter. With JS: collapsed until the keyboard button opens it. A calm box like the
   input card's, with soft borderless keys (the owner's choice: keys under the 3:1 boundary; the letters say what they
   are). It fades and slides in and out: `display` changes at the end of the transition (allow-discrete) and
   @starting-style gives the opening its first frame; browsers without them just show and hide it. */
.keyboard {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    opacity var(--duration-base) var(--ease-out),
    translate var(--duration-base) var(--ease-out),
    display var(--duration-base) allow-discrete;
}

html.js .keyboard:not(.open) {
  display: none;
  opacity: 0;
  translate: 0 calc(-1 * var(--space-1));
}

@starting-style {
  html.js .keyboard.open {
    opacity: 0;
    translate: 0 calc(-1 * var(--space-1));
  }
}

.keyboard-keys {
  /* As many columns as fit, each stretched to share the row, so the keys always fill the box edge to edge. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-control-md), 1fr));
  gap: var(--space-2);
}

.keyboard-keys a,
.keyboard-keys button {
  display: inline-grid;
  place-items: center;
  min-width: var(--size-control-md);
  height: var(--size-control-md);
  padding: 0 var(--space-2);
  font: inherit;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 5%, var(--color-surface));
  border: 0;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.keyboard-keys a:hover,
.keyboard-keys button:hover {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

.keyboard-keys a:active,
.keyboard-keys button:active {
  background: color-mix(in srgb, var(--color-accent) 20%, var(--color-surface));
}

.keyboard-keys button[lang] {
  color: var(--color-accent);
}

/* The physical-keyboard shortcuts, as a reference under the keys. */
.keyboard-shortcuts {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.keyboard-shortcuts p {
  margin: 0 0 var(--space-3);
}

.keyboard-shortcuts ul {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-2) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.keyboard-shortcuts li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}

.keyboard-shortcuts kbd {
  padding: var(--space-half) var(--space-2);
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 5%, var(--color-surface));
  border-radius: var(--radius-xs);
}

.keyboard-shortcuts b {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
}