/*
 * Help center — the index at /help and every article at /help/<slug>.
 *
 * One stylesheet for all of them: help_handler.js keeps {{PAGE}} as "help" whichever article
 * is being rendered, so the shell always links this file.
 *
 * Reuses the legal pages' page frame (background, brand bar, measure) and adds the article
 * typography on top, because a help article and a policy page are the same kind of document:
 * a long read on a narrow column.
 */
@import url('/css/legal.css');

:root {
  --help-max: 1040px;
  --help-measure: 42rem;
}

.help-wrapper {
  max-width: var(--help-max);
  margin: 0 auto;
  padding: 3.5rem var(--legal-pad) 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.help-wrapper--article {
  max-width: 64rem;
  gap: 1.5rem;
}

/* ── Index ─────────────────────────────────────────────────────────────── */

.help-hero {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.help-eyebrow {
  margin: 0;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-on-surface);
  background: var(--surface-dim);
  border: 1px solid var(--border-accent);
  border-radius: 9999px;
  padding: 0.45rem 0.85rem;
  box-shadow: var(--shadow);
}

.help-hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  letter-spacing: -0.03em;
}

.help-lede {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  max-width: var(--help-measure);
  font-size: 1.05rem;
}

.help-lede a,
.help-contact a:not(.btn) {
  color: var(--accent, currentColor);
  text-underline-offset: 0.15em;
}

.help-category {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.help-category__head h2 {
  margin: 0 0 0.25rem;
  font-size: 1.4rem;
}

.help-category__head p {
  margin: 0;
  color: var(--muted);
}

/* auto-FILL, not auto-fit: a category with a single article keeps a card-sized card
   instead of one stretched across the full row. */
.help-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 0.85rem;
}

.help-card a {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  text-decoration: none;
  color: var(--text);
  background: var(--legal-card-bg);
  border: 1px solid var(--legal-card-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow);
  transition: transform 160ms ease, border-color 160ms ease;
}

.help-card a:hover,
.help-card a:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent, var(--border-accent));
}

.help-card h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
}

.help-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.help-contact {
  background: var(--surface-dim);
  border: 1px solid var(--legal-card-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.help-contact h2 {
  margin: 0;
  font-size: 1.25rem;
}

.help-contact p {
  margin: 0;
  color: var(--muted);
}

/* ── Article ───────────────────────────────────────────────────────────── */

.help-article {
  background: var(--legal-card-bg);
  border: 1px solid var(--legal-card-border);
  border-radius: var(--radius-md);
  padding: 2.25rem;
  box-shadow: var(--shadow);
}

/* Prose is capped at a comfortable reading measure; screenshots are not. A 1440px capture
   squeezed into a 42rem column is unreadable, so figures take the full width of the card
   and only the text around them is constrained. */
.help-article h1,
.help-article h2,
.help-article h3,
.help-article > p,
.help-article > ul,
.help-article > ol:not(.help-steps),
.help-article > .help-note,
.help-steps > li > p,
.help-steps > li > ul,
.help-steps > li > ol {
  max-width: var(--help-measure);
}

.help-article h1 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* The opening answer: what someone who arrived from a search came for. */
.help-answer {
  margin: 0 0 1.75rem;
  font-size: 1.1rem;
  line-height: 1.65;
}

.help-article h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.help-article h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.05rem;
}

.help-article p,
.help-article li {
  line-height: 1.7;
  color: var(--text);
}

.help-article p {
  margin: 0 0 1rem;
}

.help-article a:not(.btn) {
  color: var(--accent, currentColor);
  text-underline-offset: 0.15em;
}

.help-article ul,
.help-article ol {
  margin: 0 0 1.25rem;
  padding-left: 1.35rem;
}

.help-article li {
  margin-bottom: 0.5rem;
}

.help-article code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.88em;
  background: var(--surface-dim);
  border: 1px solid var(--legal-card-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

/* Numbered walkthrough. The counter is drawn rather than using list markers so the step
   number stays aligned with the heading even when a step runs to several paragraphs. */
.help-steps {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  counter-reset: help-step;
}

.help-steps > li {
  counter-increment: help-step;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1.75rem;
}

.help-steps > li::before {
  content: counter(help-step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: var(--surface-dim);
  border: 1px solid var(--border-accent);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-on-surface);
}

.help-steps h3 {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
}

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

/* Screenshots. Full measure rather than text measure — a 1440px capture shrunk to 42rem
   is unreadable. */
.help-figure {
  margin: 1.25rem 0 1.5rem;
  max-width: 100%;
}

.help-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--legal-card-border);
  box-shadow: var(--shadow);
}

.help-figure--phone img {
  max-width: 320px;
  margin-inline: auto;
}

.help-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

.help-note {
  border-radius: var(--radius-md);
  border: 1px solid var(--legal-card-border);
  background: var(--surface-dim);
  padding: 0.95rem 1.1rem;
  margin: 0 0 1.5rem;
  font-size: 0.94rem;
  color: var(--muted);
  line-height: 1.6;
}

.help-note p:last-child {
  margin-bottom: 0;
}

/* Troubleshooting: symptom first, because the symptom is what the reader has. */
.help-fixes {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.help-fixes > li {
  border-top: 1px solid var(--legal-card-border);
  padding: 0.9rem 0;
  margin: 0;
}

.help-fixes > li:last-child {
  border-bottom: 1px solid var(--legal-card-border);
}

.help-fixes strong {
  display: block;
  margin-bottom: 0.2rem;
}

.help-aside {
  color: var(--muted);
  font-size: 0.92rem;
  padding-inline: 0.25rem;
}

.help-aside h2 {
  margin: 0 0 0.3rem;
  font-size: 1.02rem;
  color: var(--text);
}

.help-aside p {
  margin: 0;
}

@media (max-width: 720px) {
  .help-wrapper {
    padding: 3rem var(--legal-pad) 4rem;
  }

  .help-article {
    padding: 1.4rem;
  }

  .help-steps > li {
    padding-left: 2.3rem;
  }
}

/* `hidden` is NOT a global utility in this codebase — the only definition anywhere is
   `.home-modal.hidden` in home.css. Marking an element `class="hidden"` therefore does
   nothing outside the homepage, which is how the help center shipped with its search
   results panel and its "Nothing matched" empty state both visible on page load. Scoped
   here rather than added globally, so nothing else changes behaviour underneath it. */
.help-wrapper .hidden {
  display: none;
}

/* ── Search ────────────────────────────────────────────────────────────── */

.help-search {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 34rem;
  margin-top: 0.75rem;
}

/* Visible label, not a placeholder pretending to be one: the placeholder disappears the
   moment someone types, which is exactly when a screen reader user needs it. */
.help-search__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.help-search input {
  width: 100%;
  padding: 0.75rem 0.95rem;
  font: inherit;
  color: var(--text);
  background: var(--legal-card-bg);
  border: 1px solid var(--legal-card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.help-search input:focus-visible {
  outline: 2px solid var(--accent, var(--border-accent));
  outline-offset: 2px;
}

.help-search__count {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.82rem;
  color: var(--muted);
}

.help-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.help-result a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--text);
  background: var(--legal-card-bg);
  border: 1px solid var(--legal-card-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.05rem;
  transition: transform 140ms ease, border-color 140ms ease;
}

.help-result a:hover,
.help-result a:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent, var(--border-accent));
}

.help-result__title {
  font-weight: 600;
  line-height: 1.35;
}

/* The article a section belongs to. Without it a result like "If something is not working"
   is meaningless — that heading appears in most articles. */
.help-result__crumb {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.help-result__snippet {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

.help-results__empty {
  margin: 0;
  color: var(--muted);
}

.help-results__empty a {
  color: var(--accent, currentColor);
}

/* ── On this page ──────────────────────────────────────────────────────── */

.help-toc {
  margin: 0 0 2rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--legal-card-border);
  border-radius: var(--radius-md);
  background: var(--surface-dim);
  max-width: var(--help-measure);
}

.help-toc__title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.help-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.help-toc li {
  margin: 0;
}

.help-toc a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.94rem;
}

.help-toc a:hover {
  text-decoration: underline;
}

/* ── Section anchors ───────────────────────────────────────────────────── */

/* An anchored heading jumped to from search would otherwise sit flush against the top of
   the viewport, under the fixed brand bar. */
.help-article h2[id] {
  scroll-margin-top: 5rem;
}

.help-anchor {
  margin-left: 0.4rem;
  font-weight: 400;
  text-decoration: none;
  color: var(--muted);
  opacity: 0;
  transition: opacity 140ms ease;
}

.help-article h2:hover .help-anchor,
.help-anchor:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  /* No hover on a phone, so the affordance would never appear at all. */
  .help-anchor { opacity: 0.45; }
}