/* SPDX-License-Identifier: AGPL-3.0-or-later */
  /* Help: a reading column with a sticky jump row and an accordion of
     sections. Prose is the page's 17px/1.65 serif; steps drop to .95rem. */
  #help { padding-bottom: 4rem; }
  #help .jump-pills .text { flex-shrink: 0; white-space: nowrap; }

  /* the accordion: a full-width header button, hairline between sections */
  .help-sec { border-bottom: 1px solid var(--border); }
  .help-sec > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: baseline; gap: .7rem; padding: 1.1rem 0;
    font: italic 1.3rem var(--font-body); color: var(--accent); text-wrap: pretty;
  }
  .help-sec > summary::-webkit-details-marker { display: none; }
  .help-sec > summary .mark { font: .8rem var(--font-ui); color: var(--text-dim); min-width: .8rem; }
  .help-sec > summary .mark::before { content: "›"; display: inline-block; transition: transform .15s ease; }
  .help-sec[open] > summary .mark::before { content: "⌄"; }
  .help-body { display: flex; flex-direction: column; gap: .8rem; padding: 0 0 1.5rem 1.5rem; }
  .help-body p { text-wrap: pretty; }
  #help b, #help strong { color: var(--accent); font-weight: 600; }
  #help em { color: var(--text); }
  #help code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82em;
    background: var(--bg-input); border-radius: 4px; padding: .1em .4em;
  }

  /* numbered steps: a 1.4rem gutter with the number as an accent glyph */
  .help-steps { display: flex; flex-direction: column; gap: 1.4rem; }
  .help-step { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .3rem .6rem; }
  .help-step .step-n { font: 600 .95rem/1.65 var(--font-ui); color: var(--accent); text-align: center; }
  .help-step .step-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; }
  .help-step h3 { font: 600 .95rem/1.65 var(--font-ui); color: var(--text); }
  .help-step .where { font: .78rem var(--font-ui); color: var(--text-dim); }
  .help-step a.where { color: var(--text-dim); }
  .help-step a.where:hover { color: var(--accent); }
  .help-step .step-body { grid-column: 2; display: flex; flex-direction: column; gap: .8rem; font-size: .95rem; }
  .help-step p { font-size: .95rem; }

  /* the key table: a two-column grid in a raised card */
  .help-keys {
    display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1rem;
    font-size: .92rem; padding: .8rem 1rem; background: var(--bg-raised);
    border: 1px solid var(--border); border-radius: 12px;
  }
  .help-keys .k { font: 600 .9rem/1.65 var(--font-ui); color: var(--accent); white-space: nowrap; }
  .help-keys .d { text-wrap: pretty; }
  .help-keys .d .n { color: var(--text); }
  .help-keys .d .t { color: var(--text-dim); }

  /* the decision table: hairline rows, side by side until ~34rem */
  .help-fixes { display: flex; flex-direction: column; font-size: .95rem; }
  .help-fixes .row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .1rem 1.5rem; padding: .55rem 0; border-top: 1px solid var(--border);
  }
  .help-fixes .when { color: var(--text-dim); text-wrap: pretty; }
  .help-fixes .fix b { font: 600 .9rem/1.65 var(--font-ui); }
  .help-fixes .fix .t { color: var(--text-dim); }