apps/desktop/src/renderer/styles/help.css

/* ============================================================================
   Help + confirm modals
   ----------------------------------------------------------------------------
   Split out of chat-header.css (#546 PR2, relocate — zero visual change).
   The keyboard-shortcut help modal (`.maka-help-*`) and the confirm
   dialog width (`.maka-confirm-modal`) — both overlay modals that
   previously lived in chat-header.css.                                 */

.maka-confirm-modal {
  width: min(420px, calc(100vw - 48px));
}

.maka-help-modal {
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100dvh - 96px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05);
}

/* The header row (title + close) is the shared DialogHeader primitive
 * (@maka/ui) now — no help-specific header/eyebrow CSS. */

.maka-help-body {
  display: grid;
  gap: var(--space-2-5);
  padding: var(--space-2) var(--space-3) var(--space-3);
  overflow-y: auto;
}

.maka-help-section h3 {
  margin: 0 0 var(--space-1);
  color: var(--foreground-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}

.maka-help-section dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-0-5) var(--space-3);
  margin: 0;
}

.maka-help-section dl > div {
  display: contents;
}

.maka-help-section dt {
  color: var(--foreground-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--leading-normal);
}

.maka-help-section dd {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  justify-self: end;
}

.maka-help-section dd > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.maka-help-plus {
  color: var(--muted-foreground);
  font-size: var(--font-size-caption);
}