/* The shortcut sheet (help.js), a card like the Share dialog; outside #viewer, so it sets its
   own type. */
.sv-help {
  width: min(760px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  padding: 0;
  border: 1px solid var(--sv-border);
  border-radius: 12px;
  color: var(--sv-ink);
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow);
  font: 13px/1.5 var(--sv-font);
  -webkit-font-smoothing: antialiased;
}

.sv-help::backdrop {
  background: rgb(23 23 26 / 0.25);
}

.sv-help form {
  margin: 0;
  padding: 16px 20px 20px;
}

.sv-help__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sv-help__head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
}

/* Focused on open so Tab starts inside the sheet; no ring on a heading (the ✕ keeps its own). */
.sv-help__head h2:focus {
  outline: none;
}

.sv-help__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--sv-muted);
  background: none;
  cursor: pointer;
}

.sv-help__close:hover {
  color: var(--sv-ink);
  background: var(--sv-hover);
}

.sv-help__close:focus-visible {
  outline: 2px solid var(--sv-accent);
  outline-offset: 2px;
}

.sv-help__groups {
  columns: 2 300px;
  column-gap: 32px;
  margin-top: 8px;
}

/* Wide windows: three columns and a wider card, so every group fits without scrolling. */
@media (min-width: 1100px) {
  .sv-help {
    width: min(1040px, calc(100% - 32px));
  }

  .sv-help__groups {
    columns: 3 240px;
  }
}

.sv-help__group {
  break-inside: avoid;
  padding-top: 10px;
}

.sv-help__group h3 {
  margin: 0 0 4px;
  color: var(--sv-faint);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.sv-help__group dl {
  display: grid;
  grid-template-columns: minmax(0, 11em) 1fr;
  gap: 5px 14px;
  align-items: center;
  margin: 0;
}

.sv-help__group dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  color: var(--sv-muted);
  font-size: 12px;
}

.sv-help__group dd {
  margin: 0;
}

.sv-help__combo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.sv-help__or {
  color: var(--sv-faint);
  font-size: 11px;
}

/* The line under the groups: what needs a pointer (help.js). */
.sv-help__note {
  margin: 14px 0 0;
  color: var(--sv-muted);
  font-size: 12px;
}

.sv-help kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--sv-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--sv-ink);
  background: #faf9f7;
  font: 600 11px/1 var(--sv-font);
}

/* Touch: a finger-sized ✕. */
@media (pointer: coarse) {
  .sv-help__close {
    width: 44px;
    height: 44px;
  }
}