/* help.css — the shared "How it works" explainer pattern.
 *
 * Every tool page (Rug Sniffer, The Receipt, Revoker, Multisender, the
 * notary) carries a side panel that explains itself. They had all drifted
 * into three or four dense paragraphs, which is the wrong shape for the job:
 * an explainer is read by someone who wants ONE answer, and prose makes them
 * read everything to find it. A procedure belongs in steps, a set of possible
 * outcomes belongs in a legend, and a caveat belongs somewhere it can't be
 * mistaken for an instruction.
 *
 * Shared here, not copied into each page's stylesheet, for the same reason
 * nav.css is shared: five copies of a rule become five different rules.
 *
 * The panels supply their own colours; this file only supplies STRUCTURE, so
 * it can be linked from any tool page without fighting that page's palette.
 * It inherits currentColor and the page's own --c-gold where one exists.
 */

/* A small label that opens a group ("Using it", "The signal"). Deliberately
   not a heading — these panels already have an <h2>, and stacking h3s under
   it for two-line groups would be noise in the document outline. */
.help-lede {
    margin: 14px 0 6px;
    font-size: .78rem;
    font-weight: bold;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .65;
}

/* Numbered steps. The number is the point — it tells the reader this is a
   sequence they follow, not a list of facts they weigh. */
ol.help-steps {
    margin: 0 0 10px;
    padding-left: 1.25rem;
}

.help-steps li {
    margin: 0 0 6px;
    line-height: 1.55;
}

.help-steps li:last-child { margin-bottom: 0; }

/* A legend: one row per possible outcome, so "what does Medium mean" is
   answerable at a glance instead of by reading a paragraph. Unstyled marker
   because each row opens with its own emoji. */
/* Selector is `ul.help-legend`, not `.help-legend`, on purpose. Each tool page
   styles its own panel lists — honeypot.css has `.honeypot-panel ul
   { padding-left: 20px }` at specificity (0,1,1), which beat a bare class and
   left the legend indented 20px out of line with its own label. Matching that
   specificity is enough because help.css is linked AFTER the page stylesheet,
   so the tie resolves here. No !important needed. */
ul.help-legend {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.help-legend li {
    margin: 0 0 5px;
    line-height: 1.5;
}

.help-legend li:last-child { margin-bottom: 0; }

/* A paragraph following a step list or legend needs air, or it reads as the
   last item of the list rather than as the next thought. */
ol.help-steps + p,
ul.help-legend + p { margin-top: 12px; }

/* Caveats. Set apart with a rail so they are not read as another instruction —
   these are the "and here is what this does NOT tell you" lines, which is
   exactly the part a skimming reader must not miss. */
.help-caveat {
    margin: 8px 0 0;
    padding-left: 10px;
    border-left: 2px solid currentColor;
    /* The rail carries the emphasis; the text itself stays at panel colour. */
    border-left-color: rgba(255, 207, 72, .45);
    line-height: 1.55;
    opacity: .92;
}