/* KindlingControl user guide: same palette as the app, tuned for reading. */

:root {
  color-scheme: dark;
  --bg: #0d0e10;
  --surface: #1b1e22;
  --border: #2e333a;
  --text: #eceef1;
  --body: #cdd2d9;
  --muted: #9aa1ab;
  --accent: #f5a524;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 4.5rem; } /* jump straight to sections: help links open mid-guide */
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code, kbd { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.9em; }
kbd { padding: 0.05em 0.4em; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 0.3rem; background: var(--surface); }

.guide-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.6rem max(1rem, env(safe-area-inset-left));
  background: rgb(13 14 16 / 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; color: var(--text); text-decoration: none; }
.brand b { font-weight: 400; color: var(--accent); }
.brand img { border-radius: 0.45rem; }
.guide-title { color: var(--muted); font-weight: 600; }
.back { margin-inline-start: auto; font-weight: 700; text-decoration: none; }
.embedded .back, .embedded .guide-head { display: none; }
.embedded { scroll-padding-top: 1rem; }

.layout {
  max-inline-size: 1100px; margin-inline: auto; padding: 1.5rem 1rem 4rem;
  display: grid; gap: 2.5rem; grid-template-columns: 15rem minmax(0, 1fr); align-items: start;
}
@media (width < 820px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }

.toc { position: sticky; top: 4.5rem; font-size: 0.92rem; }
.embedded .toc { top: 1rem; }
@media (width < 820px) { .toc { position: static; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); } }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc ol ol { padding-inline-start: 0.9rem; margin-block: 0.15rem 0.4rem; }
.toc li { margin-block: 0.15rem; }
.toc a { color: var(--body); text-decoration: none; }
.toc a:hover { color: var(--accent); }

.content { max-inline-size: 46rem; }
.content h1 { margin: 0 0 0.5rem; font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.15; }
.lede { color: var(--body); font-size: 1.08rem; margin-top: 0; }
.content > section { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--border); }
.content h2 { margin: 0 0 0.6rem; font-size: 1.5rem; }
.content h3 { margin: 1.4rem 0 0.4rem; font-size: 1.12rem; }
.content section > section:first-of-type h3 { margin-top: 0.8rem; }
.content p, .content li, .content dd { color: var(--body); }
.content li { margin-block: 0.35rem; }
.content strong { color: var(--text); }
.note {
  padding: 0.7rem 0.9rem; border-radius: 0.6rem; background: var(--surface);
  border-inline-start: 3px solid var(--accent);
}
.faq dt { font-weight: 700; margin-top: 1.1rem; }
.faq dd { margin: 0.3rem 0 0; }
.fine { font-size: 0.85rem; color: var(--muted) !important; }
section:target > h2, section:target > h3 { color: var(--accent); }