/* Help guide layout. Design tokens come from app.css; this file only adds
   the Helpinator-style guide chrome: TOC sidebar, topic sections, step
   callouts, tables, and note boxes. No inline styles anywhere (strict CSP). */

.help-shell { max-width: 1080px; margin: 0 auto; padding: 24px 16px 64px; }
.help-layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }

.toc {
  position: sticky; top: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; font-size: 13.5px;
}
.toc h2 { font-size: 13px; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin: 5px 0; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.toc .backlink { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--accent); font-weight: 700; text-decoration: none; }

.topic { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.topic h2 { font-size: 18px; margin: 0 0 10px; }
.topic h3 { font-size: 14.5px; margin: 16px 0 6px; }
.topic p, .topic li { font-size: 14px; }
.topic ul, .topic ol { padding-left: 20px; }
.topic li { margin: 4px 0; }
.topic a { color: var(--accent); }
.topic-number { color: var(--accent); margin-right: 6px; }

.steps { list-style: none; counter-reset: step; margin: 12px 0; padding: 0; }
.steps > li {
  counter-increment: step; position: relative;
  margin: 0 0 12px; padding: 10px 12px 10px 46px;
  background: #0d1020; border: 1px solid var(--line); border-radius: 8px;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 12px; top: 12px;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 24px; text-align: center;
}
.steps b { display: block; margin-bottom: 2px; }

.note, .warn {
  border-left: 3px solid var(--accent); background: #0d1020;
  border-radius: 0 8px 8px 0; padding: 10px 12px; margin: 10px 0; font-size: 13.5px;
}
.warn { border-left-color: var(--bad); }
.note b, .warn b { text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; }
.note b { color: var(--accent); }
.warn b { color: var(--bad); }

table.help { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
table.help th, table.help td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; }
table.help th { background: #0d1020; color: var(--muted); font-weight: 700; }
.tablewrap { overflow-x: auto; }

kbd.field {
  background: #0d1020; border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 6px; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 800px) {
  .help-layout { grid-template-columns: 1fr; }
  .toc { position: static; }
}