/* The help dialog, opened from the round control in the bar and from the
   footer's Help link.

   Framed like the dictionary — same card, same sticky header, same scrolling
   panel — because they are the same kind of surface and two modals that framed
   themselves differently would read as two different applications. Narrower,
   because this one is prose and prose does not want a 66rem measure. */

.help {
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(42rem, calc(100vh - 3rem));
  padding: 0;
  border: 1px solid var(--colour-border);
  border-radius: 12px;
  background: var(--colour-shell);
  color: var(--colour-text);
  box-shadow: 0 18px 48px rgb(0 0 0 / 24%);
  overflow: hidden;
}

.help::backdrop {
  background: rgb(26 26 25 / 45%);
}

.help__panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: inherit;
  padding: 0 1.25rem 1.25rem;
  overflow: auto;
}

/* align-self and an explicit width, because a bare <img> is a flex item like any
   other and the panel's default stretch would have decided its size for it. The
   max-width line only ever engages on a screen narrower than the logo itself —
   the dialog is 38rem, the logo 240px — where scaling it down beats cropping. */
.help__logo {
  align-self: center;
  width: 240px;
  max-width: 100%;
  height: auto;
  margin-top: 1rem;
}

.help__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 -1.25rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--colour-border-soft);
  background: var(--colour-shell);
}

.help__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.help__close {
  margin-left: auto;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--colour-border);
  border-radius: 50%;
  background: var(--colour-surface);
  color: var(--colour-text-muted);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.help__close:hover {
  border-color: var(--colour-accent);
  color: var(--colour-accent-ink);
}

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

.help__section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.help__heading {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.help__section p {
  margin: 0;
  font-size: 0.85rem;
  max-width: 60ch;
}

.help__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

.help kbd {
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--colour-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--colour-surface);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}