/* ─────────────────────────────────────────────────────────────────────
   TinkySpeak Help Manual — styles  (2026-06-13, Luke)
   Adobe-style help: full-screen modal, branded header with search, a
   grouped topic rail on the left, and a clean readable document pane.
   All selectors namespaced .tkhelp-* / #tkHelp* so nothing leaks into
   the builder. The topbar button reuses the shared topbar-btn recipe;
   here we add only its shrink-guard + float fallback.
   ───────────────────────────────────────────────────────────────────── */

/* Topbar button: identical responsive behavior to .bugw-btn. */
.tkhelp-btn { flex-shrink: 0; }
.tkhelp-btn--float {
  position: fixed; right: 14px; bottom: 64px; z-index: 9600;
  background: var(--surface,#fff); color:var(--ink); border: 1px solid rgba(0,0,0,0.14);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
@media (max-width: 680px) { .tkhelp-btn--float .tkhelp-btn-label { display: none; } }

html.tkhelp-lock, html.tkhelp-lock body { overflow: hidden; }

/* ── Overlay + modal ──────────────────────────────────────────────────── */
.tkhelp-overlay {
  position: fixed; inset: 0; z-index: 9800;
  background: rgba(12,21,48,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tkhelp-overlay[hidden] { display: none; }
.tkhelp-modal {
  width: min(1080px, 96vw);
  height: min(760px, 92vh);
  background: #FBF7F0;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(12,21,48,0.4);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ── Header bar ────────────────────────────────────────────────────────── */
.tkhelp-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(165deg,#13111a,#1a2030,#162028);
  color: #fff; flex: 0 0 auto;
}
.tkhelp-brand { font-size: 1.02rem; white-space: nowrap; }
.tkhelp-brand strong { font-weight: 800; }
.tkhelp-searchwrap { flex: 1 1 auto; display: flex; }
.tkhelp-search {
  width: 100%; max-width: 520px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1); color: #fff;
  font-size: 0.92rem; outline: none;
}
.tkhelp-search::placeholder { color: rgba(255,255,255,0.5); }
.tkhelp-search:focus { border-color: #f4b740; background: rgba(255,255,255,0.16); }
.tkhelp-x {
  border: none; background: rgba(255,255,255,0.12); color: #fff;
  width: 34px; height: 34px; border-radius: 50%;
  font: 700 22px/1 system-ui; cursor: pointer; flex: 0 0 auto;
}
.tkhelp-x:hover { background: rgba(255,255,255,0.24); }

/* ── Body: nav rail + content ─────────────────────────────────────────── */
.tkhelp-body { flex: 1 1 auto; display: flex; min-height: 0; }
.tkhelp-nav {
  width: 268px; flex: 0 0 auto;
  border-right: 1px solid #e7e1d6;
  background: #f4eee3;
  overflow-y: auto; padding: 10px 8px 24px;
}
.tkhelp-navgroup {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: #9a8f7c;
  padding: 14px 12px 6px;
}
.tkhelp-navitem {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 12px; border: none; background: transparent;
  border-radius: 9px; cursor: pointer; text-align: left;
  font-size: 0.9rem; color:var(--ink); line-height: 1.25;
  transition: background 0.15s;
}
.tkhelp-navitem:hover { background: rgba(0,0,0,0.05); }
.tkhelp-navitem.active { background: var(--surface,#fff); box-shadow: inset 3px 0 0 #f0862e; font-weight: 700; }
.tkhelp-navicon { flex: 0 0 auto; font-size: 1.02rem; }
.tkhelp-navlabel { flex: 1 1 auto; }
.tkhelp-noresult { padding: 24px 14px; color:var(--ink-muted); font-size: 0.9rem; }

/* ── Content document ─────────────────────────────────────────────────── */
.tkhelp-content { flex: 1 1 auto; overflow-y: auto; padding: 32px 40px 60px; outline: none; }
.tkhelp-empty { color:var(--ink-muted); font-size: 0.95rem; padding-top: 40px; text-align: center; }
.tkhelp-article { max-width: 680px; color:var(--ink); }
.tkhelp-article-group {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #c07a2e; margin-bottom: 6px;
}
.tkhelp-article h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 18px; line-height: 1.2; color: #1a1a22; }
.tkhelp-article h2 { font-size: 1.18rem; font-weight: 800; margin: 28px 0 10px; color: #1a1a22; }
.tkhelp-article h3 { font-size: 1.0rem; font-weight: 700; margin: 20px 0 8px; color:var(--ink); }
.tkhelp-article p { font-size: 0.98rem; line-height: 1.62; margin: 0 0 14px; }
.tkhelp-article ul, .tkhelp-article ol { margin: 0 0 16px; padding-left: 22px; }
.tkhelp-article li { font-size: 0.98rem; line-height: 1.6; margin: 0 0 7px; }
.tkhelp-article strong { font-weight: 700; }
.tkhelp-article a { color: #c07a2e; text-decoration: underline; cursor: pointer; }
.tkhelp-article code {
  background: rgba(0,0,0,0.06); border-radius: 5px; padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em;
}
.tkhelp-article img {
  display: block; max-width: 100%; height: auto;
  border-radius: 10px; border: 1px solid #e2dccf;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  margin: 16px 0;
}
.tkhelp-article figure { margin: 18px 0; }
.tkhelp-article figcaption { font-size: 0.82rem; color:var(--ink-muted); margin-top: 6px; text-align: center; }

/* Callouts the content files can use: <div class="tkhelp-tip"> / -note / -warn */
.tkhelp-tip, .tkhelp-note, .tkhelp-warn {
  border-radius: 10px; padding: 12px 14px; margin: 16px 0;
  font-size: 0.92rem; line-height: 1.55;
}
.tkhelp-tip  { background: #eaf7ee; border: 1px solid #bfe3c9; color: #1f5f33; }
.tkhelp-note { background: #eef2fb; border: 1px solid #cdd9f2; color: #2a3f6b; }
.tkhelp-warn { background: #fdf1e7; border: 1px solid #f3cda6; color: #8a4d18; }
.tkhelp-tip strong, .tkhelp-note strong, .tkhelp-warn strong { font-weight: 800; }

/* Step list — numbered, used in "first board" walkthroughs */
.tkhelp-steps { counter-reset: tkstep; list-style: none; padding-left: 0; }
.tkhelp-steps > li {
  position: relative; padding-left: 38px; margin-bottom: 14px; min-height: 26px;
}
.tkhelp-steps > li::before {
  counter-increment: tkstep; content: counter(tkstep);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: #f0862e; color: #fff; font-weight: 800; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}

/* ── Responsive: stack the rail above content on narrow screens ───────── */
@media (max-width: 720px) {
  .tkhelp-modal { height: 94vh; width: 96vw; }
  .tkhelp-body { flex-direction: column; }
  .tkhelp-nav { width: auto; max-height: 180px; border-right: none; border-bottom: 1px solid #e7e1d6; }
  .tkhelp-content { padding: 20px 18px 50px; }
  .tkhelp-bar { flex-wrap: wrap; }
  .tkhelp-searchwrap { order: 3; flex-basis: 100%; }
}