/* ============================================================
   KeyLen Web — Finder Help document
   ------------------------------------------------------------
   `/finder/help` is a PROCEDURAL DOCUMENT for KeyLen Finder: it
   tells the reader what to do, in what order. It reuses the
   site's twelve-column field, type scale, header, footer and
   every design token unchanged.

   This file is ADDITIVE and PAGE-LOCAL. It defines no existing
   selector, so neither the frozen homepage, `/finder`, nor
   `/finder/privacy` can be affected by it — those pages do not
   link this stylesheet at all.

   It introduces no new type scale, no new colour, no new
   component and no interaction. Every value below is an existing
   token. Only four things are set here that the shared system does
   not already provide:

     1. the document's section rhythm
     2. the contents list
     3. two small inline lists (bullets, and the action table)
     4. the figure and its caption

   No JavaScript is involved anywhere on this page, and none is
   required by anything below.
   ============================================================ */

/* ---- the document's section rhythm -------------------------
   A document section is lighter than a marketing section: the
   reader is here to follow steps, not to be moved. `--section-pad`
   is the site's own product-section value, reused rather than
   re-invented, so the document still breathes at the site's tempo. */
.help-doc { padding: var(--section-pad) 0; }
.help-doc .grid { row-gap: var(--space-4); }
.help-doc .t-body + .t-body { margin-top: var(--space-3); }

/* the last section closes the page rather than simply stopping */
.help-end { padding: var(--section-pad) 0 var(--space-16); }

/* ---- contents ----------------------------------------------
   A native anchor list. Deliberately NOT a card grid, a side rail
   or anything sticky: the brief rules all three out, and a
   nine-item list does not need them.

   Desktop lays the nine entries out in columns so the whole
   contents fits one screen without pushing the first section far
   down the page. Mobile collapses to a single vertical list. */
.help-toc { padding: var(--space-12) 0 var(--space-8); }
.help-toc .grid { row-gap: var(--space-3); }

.help-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;          /* the topic headings are unnumbered, so the
                                contents list is unnumbered too — a numbered
                                list would point at numbers that are not there */
  columns: 3;
  column-gap: var(--colgap);
}
.help-toc-list li { margin: 0 0 10px; break-inside: avoid; }
.help-toc-list a {
  color: var(--accent);
  text-decoration: none;
  font-size: var(--fs-body);
}
.help-toc-list a:hover { text-decoration: underline; }

/* ---- inline lists ------------------------------------------
   Used for the four parts of a result and the two cautions on
   automatic updating. A plain list, set in the same column and at
   the same size as the body copy around it — not cards, not a
   panel, not boxed. */
.help-list {
  margin: 0;
  padding-left: 1.15em;
  font-size: var(--fs-body-lg);
  color: var(--muted);
  max-width: var(--measure);
}
.help-list li { margin: 0 0 var(--space-1); }
.help-list li:last-child { margin-bottom: 0; }
.help-list strong { font-weight: 650; color: var(--fg); }

/* ---- the action table --------------------------------------
   Four actions, each with what it does and its shortcut. A real
   table, because it is genuinely tabular: three columns, four
   rows, read across.

   Below 640px it stops being a table visually and becomes a stack
   of labelled rows, so the page never scrolls sideways. The
   markup stays a semantic <table> with <th scope> — only the
   rendering changes, via the `data-label` each cell carries. */
.help-table-wrap { margin: var(--space-2) 0 0; }

.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  text-align: left;
}

.help-table-caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-small);
  color: var(--faint);
  padding-bottom: var(--space-2);
}

.help-table th,
.help-table td {
  padding: 12px 16px 12px 0;
  vertical-align: top;
  border-bottom: var(--rule-w) solid var(--rule);
}

.help-table thead th {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  border-bottom-color: var(--fg);
}

.help-table tbody th {
  font-weight: 650;
  color: var(--fg);
  white-space: nowrap;
}
.help-table td { color: var(--muted); }
.help-table td:last-child,
.help-table th:last-child { padding-right: 0; width: 1%; }

/* The shortcut is a key, not prose. Set in the system's own
   muted tone with a hairline, so it reads as something to press
   rather than something to read. */
.help-table kbd {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--fg);
  border: var(--rule-w) solid var(--rule);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* ---- figure -------------------------------------------------
   The one screenshot on the page. A real capture, published as
   taken — proportional only, never enlarged past its capture
   resolution, no frame, no shadow, no mock chrome. */
.help-shot {
  grid-column: 1 / 13;
  margin: var(--space-6) 0 var(--space-4);
}
.help-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.help-shot figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--faint);
}

/* ---- inline links ------------------------------------------
   The email addresses and the privacy link. Same treatment the
   site already gives an inline action. */
.help-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 620;
}
.help-link:hover { text-decoration: underline; }

/* ---- code (a search term the reader can type) --------------- */
.help-doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
  color: var(--fg);
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ============================================================
   NARROW — the table stops being a table visually
   ------------------------------------------------------------
   640px, not 900px: the four-row action table still reads
   comfortably as a table on a tablet, and stacking it there
   would be a downgrade rather than a fix. */
@media (max-width: 640px) {
  .help-table thead { display: none; }        /* the labels move into the cells */

  .help-table,
  .help-table tbody,
  .help-table tr,
  .help-table th,
  .help-table td { display: block; width: auto; }

  .help-table tr {
    padding: var(--space-3) 0;
    border-bottom: var(--rule-w) solid var(--rule);
  }
  .help-table tr:last-child { border-bottom: 0; }

  .help-table tbody th {
    white-space: normal;
    font-size: var(--fs-body-lg);
    padding: 0 0 6px;
    border-bottom: 0;
  }
  .help-table td {
    padding: 0 0 6px;
    border-bottom: 0;
  }
  .help-table td:last-child { padding-bottom: 0; }

  /* Each value is prefixed by its own column label, so nothing is
     identified by position alone once the header row is gone. */
  .help-table td::before {
    content: attr(data-label) ": ";
    color: var(--faint);
    font-size: var(--fs-small);
  }
}

/* ============================================================
   MOBILE — the desktop composition collapses to one reading axis
   ============================================================ */
@media (max-width: 900px) {
  .help-doc { padding: var(--section-pad-sm) 0; }
  .help-end { padding: var(--section-pad-sm) 0 var(--space-12); }

  .help-toc { padding: var(--space-8) 0 var(--space-6); }
  /* one vertical list, in order — the columns were a desktop
     convenience, not part of the reading */
  .help-toc-list { columns: 1; }
  .help-toc-list li { margin-bottom: 12px; }

  /* REQUIRED, not cosmetic. `site.css` collapses `.grid` to a SINGLE column
     below 900px, but its reset list does not include `.help-shot` — so without
     this the figure keeps `grid-column: 1 / 13`, which on a one-column grid
     creates eleven implicit tracks and pushes the image past the gutter to the
     viewport edge. Measured: the screenshot reached x=389 instead of x=365.
     `1 / -1` spans the whole grid whatever its column count. */
  .help-shot { grid-column: 1 / -1; margin-top: var(--space-6); }
}