/* /help: troubleshooting. Scoped to .helppage. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Layout: one reading column, symptom-first. A row of the display's own screen words at the top jumps to each section;
   each section is headed by the word the owner can see, then "why" and "what to do". Tokens follow sigbuddy.com;
   the screen-word chips keep the device's warm firmware palette in both themes. */
.helppage {
  --bg: #E9EDF2;
  --surface: #F6F8FA;
  --fg: #101822;
  --muted: #55637A;
  --line: #C9D2DD;
  --accent: #2F5BD3;
  --note-bg: #FFF4D6;
  --note-line: #E3B23C;
  --note-fg: #5C4300;
  --f-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --f-ui: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  --f-body: 'Public Sans', system-ui, -apple-system, sans-serif;
  --f-device: 'Montserrat', system-ui, sans-serif;
  /* the display's own colours (firmware), used only for screen words */
  --d-bg: #17120E; --d-rule: #453729; --d-ink: #F0E6D4; --d-faint: #9A8C79;
  --d-solar: #F5A524; --d-batt: #4FC3A1; --d-grid: #FF7B72; --d-ev: #8FB0FF;
}
.helppage { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 16px; line-height: 1.6; }
.helppage .page { max-width: 760px; margin: 0 auto; padding-inline: 20px; padding-block: 40px 80px; display: grid; gap: 44px; }
.helppage h1, .helppage h2, .helppage h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; line-height: 1.2; }
.helppage h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.01em; }
.helppage h2 { font-size: 1.3rem; font-weight: 700; }
.helppage h3 { font: 600 .78rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.helppage p, .helppage ul, .helppage ol { margin: 0; }
.helppage a { color: var(--accent); text-underline-offset: 3px; }
.helppage a:focus-visible, .helppage button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.helppage .eyebrow { font: 600 .8rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.helppage .intro { display: grid; gap: 14px; }
.helppage .lede { font-size: 1.1rem; color: var(--muted); max-width: 62ch; }
/* the display's screen words */
.helppage .sw { display: inline-block; font: 500 .78rem/1 var(--f-device); letter-spacing: .16em; text-transform: uppercase;
  background: var(--d-bg); color: var(--d-ink); border: 1px solid var(--d-rule); border-radius: 3px; padding: 6px 9px; white-space: nowrap; }
.helppage .sw--solar { color: var(--d-solar); }
.helppage .sw--batt { color: var(--d-batt); }
.helppage .sw--grid { color: var(--d-grid); }
.helppage .sw--ev { color: var(--d-ev); }
.helppage .sw--faint { color: var(--d-faint); }
.helppage .jump { display: grid; gap: 10px; }
.helppage .jump__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.helppage .jump__list a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--fg); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px 5px 6px; font-size: .92rem; }
.helppage .jump__list a:hover { border-color: var(--accent); }
.helppage .jump__list .plain { padding-left: 12px; }
.helppage .issue { display: grid; gap: 14px; scroll-margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.helppage .issue__head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.helppage .issue__body { display: grid; gap: 16px; }
@media (min-width: 700px) {.helppage .issue__body { grid-template-columns: 1fr 1.4fr; gap: 28px; }
 }
.helppage .part { display: grid; gap: 8px; align-content: start; min-width: 0; }
.helppage .part ul, .helppage .part ol { padding-left: 1.2em; display: grid; gap: 6px; }
.helppage .part li::marker { color: var(--muted); }
.helppage .normal { font-size: .95rem; color: var(--muted); }
.helppage .normal strong { color: var(--fg); }
.helppage .note { border: 1px dashed var(--note-line); background: var(--note-bg); color: var(--note-fg); border-radius: 6px; padding: 10px 14px; font-size: .9rem; }
.helppage .note b { font-family: var(--f-ui); letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; margin-right: 6px; }
.helppage .first { border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; padding: 18px 22px; display: grid; gap: 8px; }
.helppage .first h2 { font-size: 1.1rem; }
.helppage .stuck { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 24px; display: grid; gap: 14px; }
.helppage .stuck ol { padding-left: 1.3em; display: grid; gap: 6px; }
.helppage .stuck ol li::marker { font-family: var(--f-display); font-weight: 700; color: var(--accent); }
.helppage .mail { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.helppage .mail code { font: 500 1rem var(--f-body); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; user-select: all; }
.helppage .mail button { font: 600 .8rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.helppage .see { font-size: .95rem; color: var(--muted); }