/* Help centre.
 *
 * Loaded only on /help pages. Nothing here invents a colour, a radius or a
 * spacing step: it is all tokens.css, so the help centre reads as the same
 * product as the rest of the site rather than a support tool bolted on beside
 * it. If a value below is not a var(), that is a bug.
 */

/* ── Search ──────────────────────────────────────────────────────────────── */
.help-search { position: relative; max-width: 620px; margin: var(--s6) auto 0; }
.help-search input {
  width: 100%; font: 400 17px/1.4 var(--sans); color: var(--ink);
  padding: 16px 18px 16px 50px;
  border: 1px solid var(--rule-firm); border-radius: var(--r-pill);
  background: var(--paper); box-shadow: var(--sunk);
}
.help-search input::placeholder { color: var(--ink-3); }
.help-search input:focus { outline: none; border-color: var(--brand); box-shadow: var(--glow-brand); }
.help-search svg { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.help-search-note { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }

/* No JS, no search box. The categories below are the whole index anyway, so
   hiding it costs a visitor nothing and beats a box that swallows a query. */
.help-search { display: none; }
.js .help-search { display: block; }

/* Results replace the category grid rather than opening a layer over it. */
.help-hits { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.help-hits li { border-bottom: 1px solid var(--rule); }
.help-hits a { display: block; padding: 16px 4px; text-decoration: none; color: inherit; }
.help-hits a:hover { background: var(--paper-2); }
.help-hits b { display: block; font: 600 15.5px/1.35 var(--sans); color: var(--ink); }
.help-hits span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.help-hits em { font-style: normal; color: var(--ink-3); }
.help-none { margin: var(--s5) 0 0; color: var(--ink-2); }

/* ── Most read ───────────────────────────────────────────────────────────── */
.help-pop { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--s4); }
.help-pop > span { font-size: 12.5px; color: var(--ink-3); align-self: center; margin-right: 4px; }
.help-pop a {
  font: 500 13.5px/1 var(--sans); color: var(--ink-2); text-decoration: none;
  padding: 9px 14px; border: 1px solid var(--rule); border-radius: var(--r-pill); background: var(--paper);
}
.help-pop a:hover { border-color: var(--brand); color: var(--brand-deep); }

/* ── Category grid ───────────────────────────────────────────────────────── */
.help-cats {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: var(--s7);
}
/* An explicit display beats the browser's own [hidden] { display: none }, so
   searching left the whole category grid sitting under the results. Any element
   here that both carries a display and gets hidden needs this line. */
.help-cats[hidden], .help-hits[hidden], .help-none[hidden] { display: none; }
.help-cat {
  display: block; text-decoration: none; color: inherit; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-xl); padding: var(--s4); box-shadow: var(--raised);
}
.help-cat:hover { border-color: var(--brand); box-shadow: var(--lift); }
.help-cat-top { display: flex; align-items: center; gap: 11px; }
.help-cat-ico {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--brand-wash); color: var(--brand-deep);
}
.help-cat h2 { margin: 0; font: 700 16px/1.2 var(--sans); color: var(--ink); }
.help-cat-n {
  margin-left: auto; font: 500 12px/1 var(--sans); color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 5px 9px;
}
.help-cat ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.help-cat li { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); padding-left: 14px; position: relative; }
.help-cat li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--brand);
}
.help-cat-more { margin: 12px 0 0; font: 600 13px/1 var(--sans); color: var(--brand-deep); }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.help-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); margin: 0 0 var(--s3); }
.help-crumb a { color: var(--ink-3); text-decoration: none; }
.help-crumb a:hover { color: var(--brand-deep); text-decoration: underline; }
.help-crumb svg { opacity: .5; }

/* ── Article list on a category page ─────────────────────────────────────── */
.help-arts { list-style: none; margin: var(--s5) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.help-arts li { border-bottom: 1px solid var(--rule); }
.help-arts a { display: flex; gap: var(--s3); align-items: baseline; padding: 18px 4px; text-decoration: none; color: inherit; }
.help-arts a:hover { background: var(--paper-2); }
.help-arts b { font: 600 15.5px/1.3 var(--sans); color: var(--ink); flex: none; max-width: 44%; }
.help-arts span { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 620px) {
  .help-arts a { display: block; }
  .help-arts b { max-width: none; display: block; margin-bottom: 4px; }
}

/* ── Article layout ──────────────────────────────────────────────────────── */
.help-art { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr) 250px; align-items: start; }
@media (max-width: 900px) { .help-art { grid-template-columns: 1fr; } .help-toc { display: none; } }
/* Clears the sticky masthead (56px tall, offset by --s3) instead of sliding
   under it. Both are sticky, so without this the first link in the index spends
   the whole page hidden behind the nav. */
.help-toc { position: sticky; top: calc(var(--s3) + 56px + var(--s3)); font-size: 13.5px; }
.help-toc h2 { margin: 0 0 10px; font: 600 11.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.help-toc a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--rule); color: var(--ink-2); text-decoration: none; }
.help-toc a:hover { color: var(--brand-deep); border-color: var(--brand); }
.help-toc a[aria-current="true"] { color: var(--brand-deep); border-color: var(--brand); font-weight: 600; }

/* The answer, before the explanation. Whoever already knows leaves here. */
.help-short { background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: var(--r-lg); padding: var(--s4); margin: 0 0 var(--s5); }
.help-short p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.help-short p + p { margin-top: 10px; }

/* ── Numbered steps ──────────────────────────────────────────────────────── */
.help-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); }
.help-steps > li { counter-increment: s; position: relative; padding-left: 44px; }
.help-steps > li::before {
  content: counter(s); position: absolute; left: 0; top: -2px;
  width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: #fff; font: 700 14px/1 var(--sans);
}
.help-steps h3 { margin: 0 0 6px; font: 600 16px/1.35 var(--sans); color: var(--ink); }
.help-steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* ── A real button, named as the reader's own interface names it ─────────── */
.uikey {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: baseline;
  font: 600 13.5px/1 var(--sans); color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule-firm); border-radius: var(--r-sm); padding: 3px 7px;
  box-shadow: 0 1px 0 var(--rule-firm);
}

/* ── Callouts ────────────────────────────────────────────────────────────── */
.help-note { border-left: 3px solid var(--brand); background: var(--paper-2); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 14px 16px; margin: var(--s4) 0; }
.help-note--warn { border-left-color: var(--warn); }
.help-note--bad { border-left-color: var(--bad); }
.help-note b { display: block; font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.help-note p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* ── Button glossary ─────────────────────────────────────────────────────── */
.help-keys-scroll { overflow-x: auto; }
.help-keys { width: 100%; border-collapse: collapse; margin: var(--s4) 0 0; font-size: 14.5px; }
.help-keys th { text-align: left; font: 600 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--rule-firm); }
.help-keys td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.5; color: var(--ink-2); }
.help-keys td:first-child { white-space: nowrap; }
.help-keys tr:hover td { background: var(--paper-2); }

/* ── Related + escape hatch ──────────────────────────────────────────────── */
.help-rel { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--s4); }
.help-rel a { display: block; padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); text-decoration: none; font: 600 14.5px/1.35 var(--sans); color: var(--ink); }
.help-rel a:hover { border-color: var(--brand); color: var(--brand-deep); }
.help-ask { margin-top: var(--s7); padding: var(--s5); border: 1px solid var(--rule); border-radius: var(--r-xl); background: var(--paper); text-align: center; }
.help-ask h2 { margin: 0 0 6px; font: 700 18px/1.3 var(--sans); }
.help-ask p { margin: 0 0 var(--s3); color: var(--ink-2); font-size: 14.5px; }
.help-ask-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }