/* help.css - the help center's skin, layered AFTER /legal.css (which supplies the page ground,
   the wordmark, the white .panel card, the skip link and the footer).

   Source file: client/help/help.css. build.mjs copies it to /help/help.css; edit it here.

   Legibility first: help pages are read by people who are stuck, and by low-vision readers
   following the accessibility guides. So body copy is larger than the legal pages', headings
   are a plain bold sans (Bangers stays on the page title only), and nothing carries meaning by
   colour alone. */

.help-wrap { max-width: 880px; }
.panel.help { padding: 30px 36px 38px; }
/* Type sits on the design system's ramp (comic-css): 17 emphasized body, 20 lede, 16 notes. */
.help p, .help li { color: #1d1c24; font-size: 17px; line-height: 1.65; }
.help p { margin: 12px 0; }
.help a { color: #c1121f; } /* legal.css's link red: 6.2:1 on white */
/* Focus: the design system's ring is 3px gold at 3px offset, and that is what the links on the
   dark page ground get. Inside the white card gold is 1.4:1 against white, so there the same
   ring is drawn in ink (20:1): same shape, a colour you can see. */
.topnav a:focus-visible, footer a:focus-visible, .wordmark:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; border-radius: 3px; }
.help a:focus-visible, .help input:focus-visible { outline: 3px solid #07070d; outline-offset: 3px; border-radius: 3px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.crumbs { font-size: 14px; font-weight: 700; color: #5a586a; margin-bottom: 10px; }
.crumbs a { color: #5a586a; text-decoration: underline; text-underline-offset: 3px; }
.help h1 { font-size: 42px; margin-bottom: 8px; text-wrap: balance; }
.help .lede { font-size: 20px; color: #2b2a33; margin: 4px 0 6px; }
.help .updated { font-size: 13.5px; color: #5a586a; margin: 0 0 8px; }

/* Headings: legal.css sets h2 in Bangers with a gold underline. Help keeps the gold underline
   (the family resemblance) but sets the words in the bold system sans, like the landers' own
   section heads, because these are read by people who are stuck and by low-vision readers, and
   a condensed display face is the hardest thing on the page to read. Bangers stays on the H1. */
.help h2 { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 800;
  font-size: 24px; letter-spacing: 0; color: #07070d; display: table; border-bottom: 4px solid #ffd23f;
  padding: 0 0 2px; margin: 38px 0 10px; line-height: 1.25; text-wrap: balance; }
.help h3 { font-size: 20px; font-weight: 800; color: #07070d; margin: 24px 0 6px; }
.help h2.step { display: flex; align-items: center; gap: 14px; padding: 22px 0 0; border-top: 1px solid #e4e2ec; border-bottom: 0; }
.help .article > h2.step:first-child { border-top: 0; padding-top: 0; }
.step-no { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #ffd23f; color: #07070d; border: 3px solid #07070d; font-size: 21px; font-weight: 800;
  font-variant-numeric: tabular-nums; box-shadow: 2px 2px 0 #07070d; }

.help ol, .help ul { padding-left: 26px; }
.help ol li::marker { font-weight: 800; color: #c1121f; }
.help li { margin: 8px 0; }
.help code { font-size: 0.92em; background: #f1f0f6; padding: 1px 5px; border-radius: 4px; }

.shot { margin: 18px 0 22px; }
.shot img { display: block; width: 100%; height: auto; border: 3px solid #07070d; border-radius: 10px;
  box-shadow: 4px 4px 0 #07070d; background: #07070d; } /* the comic depth recipe: ink border + hard shadow */
.shot figcaption { font-size: 15px; color: #4a4858; margin-top: 8px; line-height: 1.5; }

.sr-note { background: #f1f0f7; border: 2px solid #d9d7e6; border-radius: 10px; padding: 12px 18px; margin: 16px 0; }
.sr-note .sr-title { margin: 2px 0 4px; font-size: 13px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: #4a4858; }
.sr-note p, .sr-note li { font-size: 16px; }
.sr-note ul { margin: 6px 0 2px; }
.tip { border-left: 6px solid #e63946; background: #fff4f4; padding: 4px 18px; border-radius: 0 10px 10px 0; margin: 16px 0; }

.related { margin-top: 40px; padding-top: 6px; border-top: 3px solid #07070d; }
.related ul, .articles { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.related li, .articles li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid #e4e2ec; margin: 0; }
.related li a, .articles li a { font-size: 18px; font-weight: 800; text-underline-offset: 3px; }
.related li span, .articles li span { font-size: 15.5px; color: #4a4858; }

.contact { margin-top: 36px; background: #fff7d6; border: 2.5px solid #07070d; border-radius: 12px;
  padding: 4px 20px 6px; box-shadow: 4px 4px 0 #07070d; }
.contact h2 { margin-top: 14px; font-size: 22px; border-bottom: 0; }

/* The hub */
.search { margin: 22px 0 8px; }
.search label { display: block; font-weight: 800; font-size: 15px; margin-bottom: 6px; color: #07070d; }
.search input { width: 100%; font: inherit; font-size: 18px; padding: 12px 14px; border: 2.5px solid #07070d;
  border-radius: 10px; background: #fff; color: #07070d; box-shadow: 3px 3px 0 #07070d; }
.search .count { font-size: 15px; color: #4a4858; min-height: 1.4em; margin: 8px 0 0; }
.cat .blurb { margin: 0 0 4px; color: #4a4858; font-size: 16px; }
.articles li[hidden], .cat[hidden] { display: none; }

@media (max-width: 560px) {
  .panel.help { padding: 22px 18px 28px; }
  .help h1 { font-size: 34px; }
  .help h2 { font-size: 22px; }
  .step-no { width: 38px; height: 38px; font-size: 18px; }
  .help p, .help li { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) { .help a { transition: color .12s; } }