/* Developer docs. Builds on the tokens in app.css and the nav/footer in landing.css. */
.docs-shell { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; padding: 0 24px; }

/* Sidebar */
.docs-side { position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; padding: 28px 4px 40px 0; }
.docs-side h6 { margin: 18px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.docs-side h6:first-child { margin-top: 0; }
.docs-side a { display: block; padding: 5px 10px; border-radius: 7px; color: var(--ink); font-size: 14px; }
.docs-side a:hover { background: var(--surface-2); text-decoration: none; }
.docs-side a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.docs-side a.sub { padding-left: 22px; font-size: 13.5px; color: var(--muted); }
.docs-side a.sub.active { color: var(--accent); }
.docs-search { width: 100%; margin-bottom: 14px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: 14px Inter, sans-serif; }

/* Content */
.docs-main { padding: 36px 0 96px; min-width: 0; max-width: 860px; }
.docs-main section { scroll-margin-top: 80px; padding: 0 0 12px; }
.docs-main section + section { border-top: 1px solid var(--line); padding-top: 36px; margin-top: 36px; }
.docs-main h1 { font-size: clamp(30px, 4vw, 40px); letter-spacing: -.03em; margin-bottom: 12px; }
.docs-main h2 { font-size: 26px; letter-spacing: -.02em; margin-bottom: 12px; scroll-margin-top: 80px; }
.docs-main h3 { font-size: 18px; margin: 30px 0 10px; scroll-margin-top: 80px; }
.docs-main h4 { font-size: 15px; margin: 22px 0 8px; }
.docs-main p, .docs-main li { font-size: 15.5px; line-height: 1.65; }
.docs-main ul, .docs-main ol { padding-left: 22px; margin: 0 0 1em; }
.docs-main li { margin-bottom: 6px; }
.docs-main .lead { font-size: 18px; color: var(--muted); max-width: 720px; }
.docs-main :not(pre) > code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 13px; overflow-wrap: anywhere; }
.anchor { color: var(--line); margin-left: 8px; font-weight: 400; opacity: 0; transition: opacity .15s; }
h2:hover .anchor, h3:hover .anchor { opacity: 1; }
.anchor:hover { color: var(--accent); text-decoration: none; }

/* Endpoint headers */
.endpoint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; overflow-wrap: anywhere; margin: 30px 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: 600 14.5px ui-monospace, SFMono-Regular, Menlo, monospace; scroll-margin-top: 80px; }
.verb { font: 700 11.5px Inter, sans-serif; letter-spacing: .04em; padding: 4px 8px; border-radius: 6px; color: #fff; }
.verb.get { background: var(--ok); }
.verb.post { background: var(--accent); }
.verb.put { background: var(--warn); }
.verb.delete { background: var(--bad); }

/* Tables */
.docs-main .table-wrap { overflow-x: auto; margin: 12px 0 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.docs-main table { width: 100%; border-collapse: collapse; font-size: 14px; }
.docs-main th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); padding: 9px 12px; border-bottom: 1px solid var(--line); }
.docs-main td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.docs-main tr:last-child td { border-bottom: 0; }
.docs-main td:first-child code { white-space: nowrap; }
.req { font-size: 11px; font-weight: 700; color: var(--bad); text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.opt { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.type { color: var(--muted); font: 12px ui-monospace, Menlo, monospace; }

/* Callouts */
.note { border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 12px 16px; margin: 16px 0; font-size: 14.5px; }
.note.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.note.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.note.ok { border-left-color: var(--ok); background: var(--ok-soft); }
.note p:last-child, .note ul:last-child { margin-bottom: 0; }
.note b:first-child { display: block; margin-bottom: 2px; }

/* Code */
.code { position: relative; margin: 14px 0 20px; border: 1px solid #262a48; border-radius: 12px; overflow: hidden; background: #15182e; }
.code-bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; background: #1b1f3a; border-bottom: 1px solid #262a48; overflow-x: auto; }
.code-bar .label { color: #9aa0bd; font: 600 12px Inter, sans-serif; padding: 4px 8px; }
.code-bar button.tab { background: none; border: 0; color: #9aa0bd; font: 600 12.5px Inter, sans-serif; padding: 6px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.code-bar button.tab:hover { color: #fff; background: #262a48; }
.code-bar button.tab[aria-selected="true"] { color: #fff; background: #2c3160; }
.code-bar .copy { margin-left: auto; background: none; border: 1px solid #2c3160; color: #c7cbea; font: 600 12px Inter, sans-serif; padding: 4px 10px; border-radius: 7px; cursor: pointer; }
.code-bar .copy:hover { background: #262a48; }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; color: #dfe3ff; tab-size: 2; }
.code pre code { font-size: inherit; background: none; border: 0; padding: 0; }
.code pre .c { color: #7f87b3; }
.code pre .s { color: #9ee6b8; }
.code pre .k { color: #c7b8ff; }

/* Flow diagram */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 18px 0 24px; counter-reset: step; }
.flow div { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px 12px; font-size: 13.5px; line-height: 1.45; }
.flow div::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.flow b { display: block; font-size: 14px; margin-bottom: 3px; }
.flow .who { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; }

/* Choice cards */
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 24px; }
.choice { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; color: var(--ink); box-shadow: var(--shadow); }
.choice:hover { border-color: var(--accent); text-decoration: none; }
.choice h4 { margin: 0 0 6px; font-size: 15.5px; }
.choice p { margin: 0; font-size: 14px !important; color: var(--muted); }
.choice .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }

/* Steps */
.steps-list { counter-reset: s; list-style: none; padding: 0 !important; }
.steps-list > li { counter-increment: s; position: relative; padding-left: 44px; margin-bottom: 26px; }
.steps-list > li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.steps-list > li > h4 { margin-top: 0; font-size: 16px; }

/* Checklist */
ul.checklist { list-style: none; padding: 0 !important; }
ul.checklist li { position: relative; padding-left: 30px; }
ul.checklist li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border: 2px solid var(--line); border-radius: 4px; }

/* FAQ */
details.faq { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 10px; }
details.faq summary { cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; }
details.faq[open] summary::after { content: '–'; }
details.faq > div { padding: 0 16px 6px; }

.mobile-toc { display: none; }

@media (max-width: 980px) {
  .docs-shell { grid-template-columns: 1fr; gap: 0; padding: 0 16px; }
  .docs-side { display: none; }
  .mobile-toc { display: block; margin: 20px 0 0; }
  .mobile-toc select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: 15px Inter, sans-serif; }
  .flow { grid-template-columns: 1fr 1fr; }
  .choices { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  /* Stack table rows so descriptions get the full width. */
  .docs-main thead { display: none; }
  .docs-main tbody tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .docs-main tbody tr:last-child { border-bottom: 0; }
  .docs-main tbody td { display: block; border: 0; padding: 3px 12px; }
  .docs-main tbody td:first-child { font-weight: 600; }
}