/* wide layout for the three-column reference */
.container.wide { width: min(100% - 2 * var(--gutter), 92rem); }
/* apicraft · API reference layout (tokens and chrome come from ../site.css)
   Flat surfaces, hairlines, ink + one accent. No gradients, no glows, no inline styles (CSP). */

.docs { display: grid; gap: 0 2.5rem; grid-template-columns: minmax(0, 1fr); padding-top: 1rem; }
@media (min-width: 900px) { .docs { grid-template-columns: 14.5rem minmax(0, 1fr); } .playground { grid-column: 2; } }
@media (min-width: 1280px) { .docs { grid-template-columns: 14.5rem minmax(0, 1fr) 22rem; } .playground { grid-column: 3; } }

/* ---------- side navigation ---------- */
.docs-nav { margin-bottom: 1.5rem; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--surface); }
.docs-nav > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.docs-nav > summary::-webkit-details-marker { display: none; }
.docs-nav > summary::after { content: "+"; font: 500 1.2rem var(--mono); color: var(--muted); }
.docs-nav[open] > summary::after { content: "–"; }
.docs-nav-body { padding: .25rem 1rem 1rem; }
@media (min-width: 900px) {
  .docs-nav { position: sticky; top: calc(var(--header-h) + 12px); align-self: start; max-height: calc(100vh - var(--header-h) - 28px); margin-bottom: 0; overflow-y: auto; border: 0; background: none; scrollbar-width: thin; }
  .docs-nav > summary { display: none; }
  .docs-nav-body { padding: 0 0 2rem; }
}
.search-btn { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; margin: .75rem 0 1rem; padding: 0 .85rem; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--surface); color: var(--muted); font: 400 .9rem var(--font); cursor: pointer; }
.search-btn svg { width: 16px; height: 16px; flex: none; }
.search-btn kbd { margin-left: auto; padding: .1rem .4rem; border: 1px solid var(--line-2); border-radius: 5px; font-size: .7rem; color: var(--muted); }
@media (hover: hover) { .search-btn:hover { border-color: var(--ink); color: var(--ink); } }
.nav-group { margin-bottom: 1.25rem; }
.nav-heading { margin: 0 0 .35rem .6rem; font: 500 .7rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.nav-group a { display: flex; align-items: center; gap: .55rem; min-height: 38px; padding: .3rem .6rem; border-radius: 8px; font-size: .9rem; color: var(--muted); text-decoration: none; }
.nav-group a.active { background: var(--s2); color: var(--ink); font-weight: 600; }
@media (hover: hover) { .nav-group a:hover { background: var(--s2); color: var(--ink); } }

.verb { flex: none; min-width: 2.9rem; padding: .12rem .35rem; border-radius: 5px; font: 500 .66rem/1.5 var(--mono); letter-spacing: .04em; text-align: center; background: var(--s3); color: var(--ink-2); }
.verb.get { background: var(--green-soft); color: var(--green); }
.verb.post { background: var(--accent-soft); color: var(--accent); }

/* ---------- content ---------- */
.docs-main { min-width: 0; padding-bottom: 3rem; }
.docs-main section { padding: 0 0 2.75rem; }
.docs-main section + section { padding-top: 2.75rem; border-top: 1px solid var(--line); }
.docs-main h1 { margin: 0 0 .75rem; font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 650; }
.docs-main h2 { margin: 0 0 .9rem; font-size: clamp(1.4rem, 3vw, 1.8rem); letter-spacing: -.025em; font-weight: 650; }
.docs-main h3 { margin: 1.75rem 0 .6rem; font-size: 1.05rem; letter-spacing: -.01em; font-weight: 650; }
.docs-main p, .docs-main li { color: var(--ink-2); }
.docs-main p { margin: 0 0 1rem; }
.docs-main ul, .docs-main ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.docs-main li { margin-bottom: .4rem; }
.docs-main a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .2em; }
@media (hover: hover) { .docs-main a:not(.btn):hover { text-decoration-color: var(--ink); } }
.docs-main .lead { margin-bottom: 1.5rem; }

.endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1rem; }
.endpoint .verb { padding: .3rem .6rem; font-size: .75rem; }
.endpoint code { padding: 0; background: none; font-size: .95rem; font-weight: 500; word-break: break-all; }
.endpoint .pill { margin-left: auto; }

.note { margin: 1.25rem 0; padding: .9rem 1.1rem; border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--surface); font-size: .93rem; }
.note > strong:first-child { display: block; margin-bottom: .15rem; font: 500 .72rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.note p:last-child { margin-bottom: 0; }
.note.warn { border-left-color: var(--amber); }
.note.tip { border-left-color: var(--accent); }

.table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th, .tbl td { padding: .75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl td { color: var(--ink-2); }
.tbl th { background: var(--bg); font: 500 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .name { font: 500 .85rem var(--mono); color: var(--ink); white-space: nowrap; }
.tbl .nowrap { white-space: nowrap; }
.tag { display: inline-block; padding: .1rem .45rem; border-radius: 5px; background: var(--s2); font: 500 .72rem var(--mono); color: var(--ink-2); }
.tag.req { background: var(--amber-soft); color: var(--amber); }
.tbl .app { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--ink); }
.tbl .app img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; background: var(--s2); }

pre.code { margin: 1rem 0 1.5rem; padding: 1rem 1.15rem; overflow-x: auto; border-radius: var(--r-control); background: var(--dark); color: var(--on-dark); font-size: .82rem; line-height: 1.65; }
pre.code code { padding: 0; background: none; color: inherit; font-size: inherit; }
pre.code[data-copy] code { padding-right: 4.5rem; }
.docs-main .steps { counter-reset: step; list-style: none; padding: 0; }
.docs-main .steps li { position: relative; padding-left: 2.5rem; margin-bottom: .9rem; counter-increment: step; }
.docs-main .steps li::before { content: counter(step); position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ink); color: #fff; font: 500 .78rem var(--mono); }

/* ---------- playground ---------- */
.playground { margin: 0 0 2rem; overflow: hidden; border-radius: var(--r-card); background: var(--dark); color: var(--on-dark); border: 1px solid var(--dark-line); }
@media (min-width: 1280px) { .playground { position: sticky; top: calc(var(--header-h) + 12px); align-self: start; max-height: calc(100vh - var(--header-h) - 28px); overflow-y: auto; margin-top: 0; scrollbar-width: thin; } }
.play-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; border-bottom: 1px solid var(--dark-line); background: var(--dark-2); }
.lang-tabs { display: flex; gap: 2px; overflow-x: auto; }
.lang-tab { min-height: 36px; padding: 0 .7rem; border: 0; border-radius: 8px; background: none; color: var(--on-dark-2); font: 600 .8rem var(--font); cursor: pointer; white-space: nowrap; }
.lang-tab[aria-selected="true"] { background: rgba(255,255,255,.12); color: #fff; }
@media (hover: hover) { .lang-tab:hover { color: #fff; } }
.play-copy { min-height: 36px; padding: 0 .75rem; border: 1px solid var(--dark-line); border-radius: 8px; background: none; color: var(--on-dark-2); font: 600 .78rem var(--font); cursor: pointer; }
@media (hover: hover) { .play-copy:hover { color: #fff; border-color: rgba(255,255,255,.3); } }
.play-code { margin: 0; padding: 1rem; max-height: 15rem; overflow: auto; border-bottom: 1px solid var(--dark-line); font-size: .78rem; line-height: 1.6; white-space: pre-wrap; word-break: break-all; color: #cbd5e1; }
.play-run { padding: 1rem; background: #0e1118; }
.play-title { margin: 0 0 .75rem; font: 500 .7rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); }
.play-fields { display: grid; gap: .75rem; margin-bottom: 1rem; }
.play-field { display: grid; gap: .3rem; }
.play-field label { font-size: .76rem; font-weight: 600; color: var(--on-dark-2); }
.play-input { width: 100%; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--dark-line); border-radius: 10px; background: var(--dark-2); color: #fff; font: 400 .85rem var(--mono); }
select.play-input { font-family: var(--font); }
.play-input:focus { outline: none; border-color: #8fb0ff; }
.playground .check { color: var(--on-dark); }
.playground .check input { background-color: var(--dark-2); border-color: rgba(255,255,255,.4); }
.playground .check input:checked { background-color: #fff; border-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230d0d12' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); }
.play-send { width: 100%; }
.playground .btn-accent { background: #fff; color: var(--ink); }
@media (hover: hover) { .playground .btn-accent:hover { background: var(--on-dark); } }
.play-out { display: none; margin-top: 1rem; padding: .75rem; border: 1px solid var(--dark-line); border-radius: 10px; background: var(--dark-2); }
.play-out.visible { display: block; }
.play-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; font: 500 .72rem var(--mono); }
.play-status { padding: .1rem .5rem; border-radius: 4px; font-weight: 600; }
.play-status.s2 { background: rgba(21,128,61,.25); color: #7ee2a0; }
.play-status.s4 { background: rgba(196,50,28,.3); color: #ff9c8a; }
.play-status.s429 { background: rgba(161,92,0,.35); color: #f5c97a; }
.play-time { color: var(--on-dark-2); }
.play-body { margin: 0; max-height: 14rem; overflow: auto; font-size: .76rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }

/* ---------- search dialog ---------- */
.search-dialog { width: min(36rem, calc(100% - 2rem)); max-height: 80vh; margin: 8vh auto 0; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface); color: var(--ink); overflow: hidden; }
.search-dialog::backdrop { background: rgba(13,13,18,.55); }
.search-top { display: flex; align-items: center; gap: .75rem; padding: .25rem 1rem; border-bottom: 1px solid var(--line); }
.search-top input { flex: 1; min-height: 52px; border: 0; background: none; font: 400 1rem var(--font); color: var(--ink); }
.search-top input:focus { outline: none; }
.search-top kbd { padding: .1rem .4rem; border: 1px solid var(--line-2); border-radius: 5px; font-size: .7rem; color: var(--muted); }
.search-results { max-height: 22rem; overflow-y: auto; padding: .5rem; }
.search-item { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: .4rem .75rem; border-radius: 8px; color: var(--ink); font-size: .92rem; text-decoration: none; }
.search-item[aria-selected="true"] { background: var(--s2); }
.search-item .cat { margin-left: auto; font: 500 .68rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.search-empty { padding: 1.25rem; text-align: center; color: var(--muted); font-size: .92rem; }
.search-foot { display: flex; gap: 1.25rem; padding: .6rem 1rem; border-top: 1px solid var(--line); background: var(--bg); font-size: .76rem; color: var(--muted); }

/* ---------- Markdown export and AI section ---------- */
.doc-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; }
.docs-main h2.has-export, .docs-main h1.has-export { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sec-export { flex: none; padding: .3rem .65rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); font: 500 .72rem var(--mono); letter-spacing: 0; color: var(--muted); text-decoration: none; }
@media (hover: hover) { .docs-main a.sec-export:hover { color: var(--ink); border-color: var(--ink); } }
.docs-main #ai h3 { margin-top: 2rem; }
.docs-main a.sec-export { color: var(--muted); text-decoration: none; }