/* Help center (/help, /help/<topic>). Rendered by src/lib/help_center.js on
   top of site-chrome.css; tokens only, from tokens.css. The guides are read
   by a parent who is mid-task and often on a phone, so the rules here are:
   the screenshot comes first and at full column width, steps are numbered
   in the margin rather than in the prose, and every FAQ is its own anchor
   (the trial emails link straight to them). */

.help-page { max-width: 820px; }
.help-page h1 { font-size: 42px; }

.help-crumbs { font-size: 13px; color: var(--ink-3); margin: 0 0 14px; }
.help-crumbs a { color: var(--ink-3); }
.help-crumbs a:hover { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.help-crumbs [aria-current] { color: var(--ink-2); }

.help-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: -12px 0 28px; }
.help-jump { font-size: 14px; color: var(--ink-2); }
.help-jump:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* Screenshots. A hairline and the card radius so a white app screen does
   not bleed into the white-ish page. Portrait captures (dialogs) are held
   to a readable width instead of stretching to the column. */
.help-shot { margin: 8px 0 30px; }
.help-shot a { display: block; cursor: zoom-in; }
.help-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); background: var(--bg-raised);
}
.help-shot.is-portrait img { max-width: 420px; margin: 0 auto; }
.help-shot figcaption {
  font-size: 13px; color: var(--ink-3); margin-top: 10px; text-align: center; line-height: 1.5;
}

/* Numbered steps: the counter sits in its own column so a step's second
   line lines up under its first. */
.help-steps { list-style: none; counter-reset: help-step; padding: 0; margin: 0 0 24px; }
.help-steps > li {
  counter-increment: help-step;
  position: relative; padding: 0 0 18px 48px; margin: 0;
}
.help-steps > li::before {
  content: counter(help-step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-soft-ink);
  font-weight: 600; font-size: 14px;
  display: grid; place-items: center;
}
.help-steps h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 4px 0 4px; }
.help-steps p { margin: 0; }
/* Links inside prose. Accent, not site-chrome's sage .inline: on this page
   the violet is the "go do it" colour and the steps are instructions. */
.help-steps a, .help-faq a, .help-stuck a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.help-includes { margin: 0 0 24px; }

/* FAQs: plain headings and paragraphs rather than <details>, so an email's
   #faq-<id> link lands on an answer that is already open. :target gives the
   landed-on one a moment of emphasis. */
.help-faqs { margin-top: 40px; }
.help-faq { padding: 14px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.help-faq:last-child { border-bottom: 1px solid var(--line); }
.help-faq h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.help-faq p { margin: 0; }
.help-faq:target { background: var(--accent-soft); border-radius: var(--r-sm); padding-left: 14px; padding-right: 14px; }

.help-stuck {
  margin: 40px 0 0; padding: 20px 22px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.help-stuck h2 { margin: 0 0 6px; font-size: 19px; }
.help-stuck p { margin: 0; }

.help-related { margin-top: 32px; }
.help-related h2 { font-size: 19px; margin: 0 0 10px; }
.help-related ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.help-related li { margin: 0; }
.help-related a {
  display: inline-block; font-size: 14px; padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--bg-raised);
  color: var(--ink-2);
}
.help-related a:hover { border-color: var(--accent); color: var(--accent-soft-ink); background: var(--accent-soft); }

/* Index: one card per guide, screenshot on top. */
.help-cards {
  list-style: none; padding: 0; margin: 8px 0 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px;
}
.help-cards li { margin: 0; }
.help-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.06s;
}
.help-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.help-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-card-thumb {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--bg-sunken); border-bottom: 1px solid var(--line);
}
.help-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.help-card-thumb.is-portrait img { object-position: top center; }
.help-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.help-card-title { font-weight: 600; color: var(--ink); font-size: 15.5px; }
.help-card-summary { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

@media (max-width: 600px) {
  .help-page h1 { font-size: 32px; }
  .help-steps > li { padding-left: 42px; }
  .help-shot.is-portrait img { max-width: 100%; }
}