/* Pannello scorciatoie ("?"), vedi shortcuts_controller.js. La ricerca
   (Ctrl+K) sta nella barra in alto: shell.css. */

@layer components {
  /* ── Pannello scorciatoie ── */
  .shortcuts-dialog {
    inline-size: min(90vw, 28rem);
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background: var(--color-canvas);
  }

  .shortcuts-dialog::backdrop {
    background: rgb(0 0 0 / 0.45);
  }

  .shortcuts-list {
    list-style: none;
    margin: 0;
    padding: var(--space-2) var(--space-5) var(--space-5);
  }

  .shortcuts-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-block-end: var(--border-light);
  }

  .shortcuts-list__row:last-child {
    border-block-end: none;
  }

  kbd {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--color-surface-alt);
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
  }
}