/* The ? dialog, and how a key looks anywhere on the start page.

   A native <dialog> opened with showModal(), so the backdrop, the focus trap
   and Esc-to-close are the browser's job and none of them are reimplemented
   here. There is no modal.css in this app — the one in tinylinks belonged to a
   feature that did not come across — so this file is self-contained. */

/* Shared with the editor's toolbar legend: the two have to agree on what a key
   looks like, and the legend is now a pointer at this dialog. */
.keyboard-legend kbd,
.shortcuts-dialog kbd {
  display: inline-block;
  min-width: 1.25em;
  padding: 0.0625em 0.3em;
  border: 0.0625rem solid var(--border-color);
  border-radius: var(--control-radius);
  background: var(--bg-color);
  color: var(--fg-color);
  font-family: inherit;
  font-size: 0.9em;
  text-align: center;
  line-height: 1.4;
}

.shortcuts-dialog {
  margin: auto;
  padding: 0;
  max-width: min(28rem, calc(100vw - 2rem));
  border: 0.0625rem solid var(--border-color);
  border-radius: var(--control-radius);
  background: var(--bg-notification-color);
  color: var(--fg-color);

  &::backdrop {
    background: oklch(from black l c h / 0.4);
  }
}

.shortcuts-dialog-body {
  padding: 1.5em;

  h2 {
    margin: 0 0 1em;
    font-size: 1em;
  }

  /* A two-column list rather than the legend's single flexed line: this one is
     read, not glanced at, so the descriptions line up under each other. */
  dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em 1em;
    margin: 0 0 1.5em;
    padding: 0;
    font-size: 0.875em;
  }

  dl > div {
    display: contents;
  }

  dt, dd {
    margin: 0;
  }

  /* The keys of a chord sit together; ↑ ↓ ← → are alternatives but read the
     same way at this size, and separating them would make one row taller. */
  dt {
    display: flex;
    gap: 0.125em;
    justify-content: flex-end;
  }

  dd {
    color: var(--mid-color);
  }

  form {
    width: auto;
    max-width: none;
    margin: 0;
  }
}

.shortcuts-dialog-close {
  height: var(--control-size);
  padding: 0 1em;
  border: 0.0625rem solid var(--border-color);
  border-radius: var(--control-radius);
  background: var(--bg-color);
  color: var(--mid-color);
  font-size: 0.875em;
  cursor: pointer;

  &:hover {
    color: var(--fg-color);
  }

  &:focus-visible {
    outline: 0.125rem solid var(--highlight-color);
    outline-offset: 0.125rem;
  }
}