/* Public guides reuse the site's reading layout and shared dark tokens. */
.docs-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }
.docs-page .lg-nav a,
.docs-page .lg-nav a:not([aria-current="page"]):not(.lg-home) { display: inline-flex }
.docs-page .lg-toc a { min-height: 44px }
.docs-page .lg-meta { line-height: 1.7 }
.doc-panel { margin-top: 20px; padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg-1) }
.doc-panel h3 { margin-top: 0 }
.doc-panel p { margin-top: 10px }
.doc-panel .doc-copy { margin-top: 14px }
.doc-prompt { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75 }
.doc-note { padding-left: 16px; border-left: 2px solid var(--accent-line) }
.doc-steps { display: grid; gap: 16px; margin-top: 20px; padding-left: 24px; color: var(--fg-1) }
.lg-main .doc-steps > li { padding-left: 4px }
.lg-main .doc-steps > li::before { content: none }
.doc-code { margin-top: 18px; border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--bg-sunken) }
.doc-codebar { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: center; justify-content: space-between; min-height: 52px; padding: 4px 14px; border-bottom: 1px solid var(--line); color: var(--fg-1); font-size: 13px }
.doc-copy { min-width: 70px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-hover); border-radius: var(--r-pill); background: var(--bg-2); color: var(--fg-0); font: inherit; cursor: pointer }
.doc-copy:hover { background: var(--bg-3) }
.doc-copy:disabled { cursor: wait; color: var(--fg-1) }
.doc-code .lg-cmd { margin: 0; border: 0; border-radius: 0; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere }
.doc-feedback { min-height: 44px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--fg-1); font-size: 13px }
.lg-main .doc-feedback { margin: 0; max-width: none }
.doc-next { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px }
.lg-main .doc-next a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-hover); border-radius: var(--r-pill); text-decoration: none }
.doc-next a:first-child { background: var(--accent); color: var(--on-accent); border-color: var(--accent) }
.doc-table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--r-md) }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left }
.doc-table th, .doc-table td { min-width: 140px; padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--fg-1) }
.doc-table th { color: var(--fg-0); font-weight: 500; background: var(--bg-1) }
.doc-table tr:last-child td { border-bottom: 0 }
.docs-page details { margin-top: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-strong) }
.docs-page summary { min-height: 44px; cursor: pointer; color: var(--fg-0) }
@media (max-width: 480px) {
  html:has(.docs-page) { scroll-padding-top: 120px }
  .docs-page .lg-head .lg-wrap { flex-wrap: wrap; gap: 0; padding-block: 8px }
  .docs-page .lg-nav { width: 100%; justify-content: space-between }
  .docs-page .lg-nav a { padding-inline: 5px }
  .doc-panel { padding: 16px }
}