/* Help page (help.html). Self-contained on purpose: it copies the app's color
   tokens from styles.css instead of loading it, so app-only rules (list resets,
   the sheet, the bottom bar) can never clash with this document page. */

/* ---------- Tokens (same values as styles.css) ---------- */
:root {
  color-scheme: light dark;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --bg: #f5f4ef;
  --hero-top: #e2efe9;
  --surface: #ffffff;
  --surface-2: #f3f2ec;
  --text: #1b201d;
  --text-2: #535c57;
  --border: #e3e1d8;
  --border-strong: #cbc8bd;
  --accent: #0b6e5f;
  --accent-hover: #085a4e;
  --on-accent: #ffffff;
  --accent-soft: #e1f1eb;
  --accent-ink: #075446;
  --notice-bg: #fff5d9;
  --notice-border: #eed79a;
  --notice-ink: #4b3900;
  --focus: #1d5fd6;
  --shadow-card: 0 1px 2px rgb(27 32 29 / 6%), 0 3px 12px rgb(27 32 29 / 5%);
  --shadow-shot: 0 2px 6px rgb(27 32 29 / 8%), 0 8px 24px rgb(27 32 29 / 8%);

  --gutter: 16px;
  --measure: 31em; /* at most about 70 characters per line */
  --radius: 18px;
  --radius-sm: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101412;
    --hero-top: #132019;
    --surface: #1a201d;
    --surface-2: #212925;
    --text: #e8eeea;
    --text-2: #a8b2ad;
    --border: #2b3430;
    --border-strong: #3e4944;
    --accent: #4fc4a6;
    --accent-hover: #72d4bb;
    --on-accent: #05241d;
    --accent-soft: #163a31;
    --accent-ink: #93e2cb;
    --notice-bg: #2a2413;
    --notice-border: #4b4020;
    --notice-ink: #f1e3b8;
    --focus: #86b4ff;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-shot: 0 2px 10px rgb(0 0 0 / 45%);
  }
}

/* ---------- Base ---------- */
/* The organizer part stays hidden until help.js shows it; no rule below may un-hide it. */
[hidden] { display: none !important; }
/* help.js keeps the reader's place itself when that part appears above it. */
html { overflow-anchor: none; }
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}
/* Smooth scrolling only after help.js has decided whether to show the
   organizer part: a smooth scroll to a #link that starts before the page
   finishes changing height would end in the wrong place. */
@media (prefers-reduced-motion: no-preference) {
  html.smooth { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: max(17px, 1.0625rem);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 400px) {
  body { font-size: max(18px, 1.125rem); }
}

img { max-width: 100%; height: auto; }

a {
  color: var(--accent-ink);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 0.14em; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

[id] { scroll-margin-top: 16px; }

strong { font-weight: 700; }

.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ---------- Top of the page ---------- */
.top {
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: 8px;
  background: linear-gradient(180deg, var(--hero-top), var(--bg));
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 48px;
  padding-block: 8px;
  font-weight: 600;
  text-decoration: none;
}
.back:hover { text-decoration: underline; }

.top__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.top__icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

h1 {
  margin: 0;
  font-size: 1.6em;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.nowrap { white-space: nowrap; }
@media (max-width: 359px) {
  .top__title { gap: 12px; }
  .top__icon { width: 44px; height: 44px; border-radius: 12px; }
  h1 { font-size: 1.45em; }
}

.lead {
  margin: 16px 0 0;
  font-size: 1.05em;
}
.url { overflow-wrap: anywhere; }

.tour-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  min-height: 60px;
  margin-top: 20px;
  padding: 12px 24px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.tour-btn:hover { background: var(--accent-hover); }
.tour-btn__icon {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}
@media (min-width: 560px) {
  .tour-btn { display: inline-flex; width: auto; min-width: 18rem; }
}

.tour-note {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 0.9em;
}

/* ---------- Table of contents ---------- */
main { padding-bottom: 24px; }

.toc {
  margin-top: 24px;
  padding: 16px 16px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.toc__title {
  margin: 0 0 4px;
  font-size: 1em;
  color: var(--text-2);
  font-weight: 700;
}
.toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.toc__list li + li { border-top: 1px solid var(--border); }
.toc__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding-block: 8px;
  font-size: 1.1em;
  font-weight: 700;
  text-decoration: none;
}
.toc__list a::after {
  content: "";
  flex: none;
  width: 0.55em;
  height: 0.55em;
  margin-right: 6px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.toc__list a:hover { text-decoration: underline; }

.find-help {
  margin: 16px 0 0;
  color: var(--text-2);
}

/* ---------- Parts and topics ---------- */
.part { margin-top: 48px; }
.part > h2 {
  margin: 0 0 12px;
  padding-top: 20px;
  border-top: 4px solid var(--accent);
  font-size: 1.55em;
  line-height: 1.2;
}
#quick-start > h2 { border-top-color: var(--notice-border); }

.topic { margin-top: 40px; }

h3 {
  margin: 36px 0 10px;
  font-size: 1.25em;
  line-height: 1.3;
}
.topic > h3 { margin-top: 0; }

h4 {
  margin: 24px 0 6px;
  font-size: 1.05em;
  line-height: 1.35;
}

p { margin: 12px 0 0; }

.steps,
.bullets {
  margin: 12px 0 0;
  padding-left: 1.6em;
}
.steps > li,
.bullets > li { margin-top: 10px; padding-left: 0.2em; }
.steps > li::marker {
  color: var(--accent-ink);
  font-weight: 800;
}
.bullets > li::marker { color: var(--accent-ink); }
.steps .bullets { margin-top: 6px; }

.tip {
  padding: 12px 14px;
  border: 1px solid var(--notice-border);
  border-radius: var(--radius-sm);
  background: var(--notice-bg);
  color: var(--notice-ink);
}

/* Per-part topic lists */
.part-toc {
  margin: 16px 0 0;
  padding: 6px 16px;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.part-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.part-toc li + li { border-top: 1px solid var(--border); }
.part-toc a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-block: 8px;
  line-height: 1.35;
  font-weight: 600;
}

.to-top {
  margin-top: 32px;
}
.to-top a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
}

/* Troubleshooting messages */
.problems { margin: 12px 0 0; }
.problems dt {
  margin-top: 18px;
  font-weight: 700;
}
.problems dd {
  margin: 4px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--border-strong);
}

/* ---------- Screenshots ---------- */
.shot {
  margin: 16px 0 20px;
}
.shot img {
  display: block;
  width: 100%;
  max-width: 390px;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-shot);
}
.shot--phone img { max-width: 280px; }

/* ---------- End of the page ---------- */
.closing {
  margin-top: 48px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  font-size: 1.1em;
}

.bottom {
  padding: 8px 0 max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.bottom__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
}
.bottom__tour {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
}
/* Copyright and contact: small and muted (still AA contrast on --bg). */
.bottom__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  padding-top: 4px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.4;
}
.bottom__legal p { min-width: 0; }
.bottom__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin-inline: -4px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.bottom__mail:hover { color: var(--text); }

/* ---------- Print ---------- */
@media print {
  .tour-btn, .tour-note, .toc, .part-toc, .to-top, .bottom__links { display: none; }
  .bottom { border-top: 0; }
  .shot img { box-shadow: none; }
}