/* Support / user-guide layout */

.support-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.support-toc {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--line);
  padding-left: 0;
}
.support-toc .toc-group {
  font: 10px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 16px 0 6px 16px;
}
.support-toc .toc-group:first-child { padding-top: 6px; }
.support-toc a {
  display: block;
  padding: 7px 0 7px 16px;
  font-size: 13.5px;
  color: var(--muted);
  border-left: 2px solid transparent;
  margin-left: -1px;
}
.support-toc a:hover { color: var(--ink); }
.support-toc a.is-on { color: var(--accent); border-left-color: var(--accent); }

.support-doc {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 36px 44px 44px;
}
.doc-lang-note {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--muted);
  font-size: 12.5px;
}
.doc-loading { color: var(--muted); }

#doc-content h2 { font-size: 28px; margin: 0 0 14px; }
#doc-content h3 { font-size: 20px; margin: 34px 0 10px; }
#doc-content h4 { font-size: 16px; margin: 26px 0 8px; }
#doc-content p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 12px 0; }
#doc-content a { color: var(--accent); }
#doc-content ul, #doc-content ol { margin: 10px 0; padding-left: 22px; }
#doc-content li { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
#doc-content code {
  font: 12.5px var(--mono);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
}
#doc-content pre.code-block {
  font: 12.5px/1.6 var(--mono);
  background: var(--night);
  color: var(--night-ink);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
}
#doc-content pre.code-block code { background: none; border: 0; padding: 0; color: inherit; }
#doc-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 13.5px;
}
#doc-content th {
  text-align: left;
  font: 10px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}
#doc-content td { border-bottom: 1px solid var(--line); padding: 8px 10px; color: var(--ink-2); }
#doc-content img {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 10px 0;
}
#doc-content hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
#doc-content blockquote {
  margin: 14px 0;
  padding: 4px 16px;
  border-left: 3px solid var(--brand);
  color: var(--muted);
}

@media (max-width: 860px) {
  .support-layout { grid-template-columns: 1fr; }
  .support-toc { position: static; border-left: 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .support-doc { padding: 24px 20px 32px; }
}