/* ============================================================
   HELP CENTRE (/help/): the help pages, in the site's look
   (styles.css tokens). The app screens in the guides are pictures
   made by `npm run help:shots`; their drawing styles are in
   css/help-screens.css.
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hc-hero { padding-bottom: 2rem; }
/* Line the heading up with the content below: the index's left edge, or the article column. */
.hc-hero .pg-hero-inner { max-width: var(--container); }
@media (min-width: 901px) {
  .hc-hero-article .pg-hero-inner > * { margin-left: calc(220px + 2.5rem); max-width: 46rem; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .hc-hero-article .pg-hero-inner > * { margin-left: calc(210px + 2.5rem); }
}
.hc-hero-article .pg-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.hc-hero-article .pg-dek { margin-bottom: 1.2rem; }
.hc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: 0.9rem; color: var(--ink-mute); font-weight: 600; }
.hc-aud { display: inline-flex; align-items: center; padding: 0.3em 0.8em; border-radius: 999px; font-size: 0.82rem; font-weight: 700; background: var(--purple-tint); color: var(--purple-deep); }
.hc-aud-brand { background: #ffe6f2; color: var(--pink-deep); }
.hc-aud-both { background: #e3f6f0; color: #1f8a6b; }

/* index */
.hc-search { display: block; max-width: 34rem; margin-bottom: 1.2rem; }
.hc-search input { width: 100%; font: 600 1.05rem/1.2 var(--font-body); color: var(--ink); padding: 0.95rem 1.2rem; border-radius: 999px; border: 2px solid var(--paper-line); background: #fff; box-shadow: var(--shadow-card); }
.hc-search input:focus { outline: none; border-color: var(--purple); }
.hc-jumps { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hc-jump { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; background: #fff; border: 1.5px dashed var(--paper-line); font-weight: 700; color: var(--purple-deep); }
.hc-jump span { font-size: 0.8rem; color: var(--ink-mute); }
.hc-jump:hover { border-color: var(--purple); }
.hc-index { padding-bottom: 4rem; display: grid; gap: 3rem; }
.hc-group { scroll-margin-top: 6rem; }
.hc-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin-bottom: 1.2rem; }
.hc-group-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; }
.hc-group-head p { color: var(--ink-soft); }
.hc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.hc-card { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.3rem 1.4rem; border-radius: var(--radius-sm); background: #fff; border: 1.5px solid var(--paper-line-soft); box-shadow: var(--shadow-card); transition: transform .2s var(--ease-out), border-color .2s; }
.hc-card:hover { transform: translateY(-2px); border-color: var(--purple); }
.hc-card .draft-badge { align-self: flex-start; }
.hc-card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.3; color: var(--ink); }
.hc-card-dek { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; flex: 1; }
.hc-card-more { color: var(--purple-deep); font-weight: 700; font-size: 0.9rem; }
.hc-none { padding: 1.2rem 1.4rem; border-radius: var(--radius-sm); background: #fff; color: var(--ink-soft); }
.hc-none a { color: var(--purple-deep); font-weight: 700; text-decoration: underline; }
.hc-card.is-filtered, .hc-group.is-filtered { display: none; }

/* article layout */
.hc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; gap: 2.5rem; align-items: start; padding-bottom: 4rem; }
.hc-side, .hc-toc { position: sticky; top: 6.5rem; max-height: calc(100vh - 8rem); overflow-y: auto; font-size: 0.92rem; }
.hc-side-box summary { list-style: none; cursor: pointer; font-weight: 700; color: var(--ink); padding: 0.2rem 0 0.6rem; }
.hc-side-box summary::-webkit-details-marker { display: none; }
.hc-side-home { display: block; font-weight: 700; color: var(--purple-deep); margin-bottom: 0.8rem; }
.hc-side-group { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin: 1rem 0 0.4rem; }
.hc-side ul { display: grid; gap: 0.1rem; }
.hc-side li a { display: block; padding: 0.38rem 0.7rem; border-radius: 10px; color: var(--ink-soft); line-height: 1.35; }
.hc-side li a:hover { background: var(--paper-dim); color: var(--ink); }
.hc-side li a[aria-current="page"] { background: var(--purple-tint); color: var(--purple-deep); font-weight: 700; }
.hc-toc p { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.6rem; }
.hc-toc ol { display: grid; gap: 0.35rem; counter-reset: toc; }
.hc-toc li { counter-increment: toc; }
.hc-toc a { display: grid; grid-template-columns: 1.5rem 1fr; color: var(--ink-soft); line-height: 1.35; }
.hc-toc a::before { content: counter(toc); font-weight: 700; color: var(--pink-deep); }
.hc-toc a:hover { color: var(--purple-deep); }

.hc-article { max-width: 46rem; min-width: 0; }
.hc-article h2 { scroll-margin-top: 6.5rem; }
.hc-article .pg-steps, .hc-article .pg-callout, .hc-article .pg-checklist, .hc-article .pg-cards { margin: 1.4rem 0; }
/* In an article, steps run top to bottom: a numbered timeline, not cards. */
.hc-article .pg-steps ol { display: flex; flex-direction: column; gap: 0; }
.hc-article .pg-steps ol li { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 1.1rem 2.9rem; color: var(--ink-soft); line-height: 1.65; }
.hc-article .pg-steps ol li::before { top: 0.05rem; left: 0; }
.hc-article .pg-steps ol li:not(:last-child)::after { top: 2rem; bottom: 0.2rem; left: 0.84rem; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--purple-tint), var(--paper-line-soft)); }
.hc-article .pg-steps ol li strong { display: inline; margin: 0; }
.hc-article .pg-steps ol li p { margin: 0; }
.hc-article table td, .hc-article table th { vertical-align: top; }
.hc-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45em; height: 1.45em; padding: 0 0.3em; border-radius: 999px; background: #E43F99; color: #fff; font: 700 0.78em/1 'Inter', var(--font-body); vertical-align: 0.12em; margin: 0 0.12em; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(228,63,153,0.35); }

/* screens in the article: pictures (img.hc-shot), or the drawing itself (.as-scale) when no picture exists yet */
.hc-screen { margin: 1.6rem 0 2rem; }
.hc-screen-row { display: flex; gap: 1.2rem; justify-content: center; align-items: flex-start; }
.hc-screen-many .as-scale, .hc-screen-many .hc-shot-box { flex: 1 1 0; min-width: 0; }
.hc-shot-box { display: flex; justify-content: center; }
.hc-shot, .hc-article img.hc-shot { display: block; width: 100%; height: auto; max-width: var(--w, 100%); margin: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 2px 3px rgba(24,24,27,0.06)) drop-shadow(0 14px 22px rgba(84,52,160,0.18)); cursor: zoom-in; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.hc-screen figcaption { margin-top: 0.8rem; text-align: center; font-size: 0.9rem; color: var(--ink-mute); line-height: 1.5; }
/* Click a picture to see it full size. */
.hc-zoom { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 3vmin; background: rgba(24,24,27,0.78); cursor: zoom-out; }
.hc-zoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.35)); }

/* vote, stuck, note */
.hc-vote { margin-top: 3rem; padding: 1.4rem 1.5rem; border-radius: var(--radius-sm); background: #fff; border: 1.5px dashed var(--paper-line); }
.hc-vote-q { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink) !important; margin-bottom: 0.9rem !important; }
.hc-vote-btns { display: flex; gap: 0.7rem; }
.hc-vote-btns .btn { min-width: 6rem; justify-content: center; }
.hc-vote.is-done .hc-vote-btns { display: none; }
.hc-vote-thanks, .hc-vote-sorry { margin: 0.4rem 0 0 !important; }
.hc-stuck { margin-top: 1.4rem; padding: 1.5rem; border-radius: var(--radius-sm); background: var(--panel-on-dark); color: var(--on-dark-paper); }
.hc-stuck-title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: #fff !important; margin-bottom: 0.4rem !important; }
.hc-stuck p { color: var(--on-dark-mute); }
.hc-stuck-btns { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.hc-stuck .btn-line { color: #fff; border-color: rgba(255,255,255,0.4); }
.hc-article .hc-stuck a.btn { text-decoration: none; }

@media (max-width: 1200px) {
  .hc-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .hc-toc { display: none; }
}
@media (max-width: 900px) {
  .hc-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .hc-side { position: static; max-height: none; }
  .hc-side-box { padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); background: #fff; border: 1.5px solid var(--paper-line-soft); }
  .hc-side-box summary { padding: 0; }
  .hc-side-box summary::after { content: ' ▾'; color: var(--ink-mute); }
  .hc-side-box[open] summary { margin-bottom: 0.6rem; }
  .hc-screen-row { flex-direction: column; align-items: stretch; gap: 1.6rem; }
  .hc-screen-many .as-scale, .hc-screen-many .hc-shot-box { flex: none; }
}