@layer components {
  .shortcuts { padding: var(--space-3); }

  .shortcuts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .shortcuts__title { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }


  
  .shortcuts__list {
    margin: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    overflow-y: auto;
    min-height: 0;
  }

  
  .shortcuts__row { display: contents; }

  .shortcuts__row > * {
    padding: var(--space) 0;
    border-top: var(--line-w) solid var(--line);
  }

  .shortcuts__row > .shortcuts__keys { padding-right: var(--space-3); }

  .shortcuts__row:first-child > * { border-top: 0; }

  .shortcuts__keys { display: flex; align-items: baseline; gap: var(--space); flex-wrap: wrap; }

  .shortcuts__key {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: 0.125rem var(--space);
    border: var(--line-w) solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    color: var(--ink);
    white-space: nowrap;
  }

  .shortcuts__key .menu__icon { width: 0.875rem; height: 0.875rem; }

  .shortcuts__or { font-size: var(--text-xs); color: var(--ink-faint); }
  .shortcuts__meaning { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }

  @media (width <= 40rem) {
    .shortcuts__list { grid-template-columns: minmax(0, 1fr); }

    .shortcuts__row > .shortcuts__meaning { border-top: 0; padding-top: 0; }
  }
}