/* ============================================================
   RowFold API reference — a self-contained, Stripe-style docs UI.
   Palette comes from tokens.css (loaded first); this file only
   lays out the docs chrome, so it never touches app-chrome styles.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.apidoc {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.apidoc a { color: var(--lookup-ink); text-decoration: none; }
body.apidoc a:hover { text-decoration: underline; }

/* ── Top bar ─────────────────────────────────────────────── */
.api-top {
    position: sticky; top: 0; z-index: 40;
    height: 58px; display: flex; align-items: center; gap: 16px;
    padding: 0 22px;
    background: rgba(251,248,241,0.86); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.api-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.api-brand .dot { width: 22px; height: 22px; border-radius: 7px; background: var(--ink-900); color: var(--accent);
    display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.api-brand .v { font: 600 11px/1 var(--font-mono); color: var(--accent-ink); background: var(--accent-tint);
    border: 1px solid var(--accent-deep); padding: 3px 6px; border-radius: 999px; }
.api-top .spacer { flex: 1; }
.api-top .back { font-size: 13.5px; color: var(--text-2); }

/* Language segmented control */
.lang-seg { display: inline-flex; background: var(--paper-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.lang-seg button { border: 0; background: transparent; font: 600 12.5px var(--font-sans); color: var(--text-muted);
    padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.lang-seg button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }

/* ── Shell ───────────────────────────────────────────────── */
.api-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; }
.api-nav {
    position: sticky; top: 58px; align-self: start;
    height: calc(100vh - 58px); overflow-y: auto;
    padding: 22px 14px 60px 22px;
    border-right: 1px solid var(--border);
}
.api-nav .grp { font: 700 11px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-faint); margin: 20px 8px 8px; }
.api-nav .grp:first-child { margin-top: 0; }
.api-nav a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px;
    color: var(--text-2); font-size: 13.5px; }
.api-nav a:hover { background: var(--rail-hover); text-decoration: none; color: var(--text); }
.api-nav a.active { background: var(--card); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.api-nav a .m { font: 700 9.5px/1 var(--font-mono); padding: 3px 5px; border-radius: 5px; min-width: 40px; text-align: center; }

.api-main { padding: 34px 40px 120px; max-width: 940px; }
.api-main section { scroll-margin-top: 74px; }
.api-main h1 { font-family: var(--font-display); font-size: 34px; line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.01em; }
.api-main h2 { font-size: 22px; margin: 46px 0 12px; letter-spacing: -0.01em; padding-top: 6px; }
.api-main h3 { font-size: 15px; margin: 24px 0 8px; }
.api-main p { color: var(--text-2); }
.api-main ul { color: var(--text-2); padding-left: 20px; }
.api-main li { margin: 4px 0; }
.api-main code { font: 500 13px var(--font-mono); background: var(--paper-2); padding: 2px 6px; border-radius: 6px; color: var(--ink-800); }
.lead { font-size: 17px; color: var(--text-2); }

.callout { border: 1px solid var(--border); border-left: 3px solid var(--accent-deep);
    background: var(--card-2); border-radius: var(--radius); padding: 14px 16px; margin: 16px 0; font-size: 14px; }
.callout.warn { border-left-color: var(--amber); }
.callout strong { color: var(--text); }

/* ── Authorize panel ─────────────────────────────────────── */
.authbar { border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--card);
    padding: 18px; margin: 22px 0; box-shadow: var(--shadow-sm); }
.authbar h3 { margin: 0 0 4px; font-size: 15px; }
.authbar .row { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.authbar input[type=password], .authbar input[type=text] {
    flex: 1; min-width: 260px; font: 500 13px var(--font-mono);
    padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 9px; background: var(--paper); color: var(--text); }
.authbar input:focus { outline: none; border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-tint); }
.auth-status { margin-top: 10px; font-size: 13px; display: flex; align-items: center; gap: 8px; min-height: 20px; }
.auth-status.ok { color: var(--emerald); }
.auth-status.err { color: var(--rollup-ink); }
.auth-status .pill { font: 600 11px var(--font-mono); background: var(--paper-2); color: var(--text-2);
    padding: 2px 7px; border-radius: 999px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn { font: 600 13px var(--font-sans); border: 1px solid var(--border-2); background: var(--card); color: var(--text);
    padding: 9px 14px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.btn:hover { background: var(--paper-2); }
.btn.primary { background: var(--accent); border-color: var(--accent-deep); color: var(--accent-ink); font-weight: 700; }
.btn.primary:hover { background: var(--accent-deep); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--paper-2); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.sm { padding: 6px 10px; font-size: 12px; }

/* ── Method badges ───────────────────────────────────────── */
.method { font: 800 10.5px/1 var(--font-mono); letter-spacing: 0.03em; padding: 5px 8px; border-radius: 6px; text-transform: uppercase; }
.m-get    { background: var(--mint-soft);   color: #0c7a4e; }
.m-post   { background: var(--lookup-soft); color: var(--lookup-ink); }
.m-patch  { background: var(--amber-soft);  color: #9a6a12; }
.m-delete { background: var(--coral-soft);  color: var(--rollup-ink); }
.nav-m.m-get { background: var(--mint-soft); color: #0c7a4e; }
.nav-m.m-post { background: var(--lookup-soft); color: var(--lookup-ink); }
.nav-m.m-patch { background: var(--amber-soft); color: #9a6a12; }
.nav-m.m-delete { background: var(--coral-soft); color: var(--rollup-ink); }

/* ── Endpoint cards ──────────────────────────────────────── */
.endpoint { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
    margin: 18px 0; overflow: hidden; }
.endpoint > .head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; flex-wrap: wrap; }
.endpoint .sig { font: 600 14px var(--font-mono); color: var(--text); word-break: break-all; }
.endpoint .sig .base { color: var(--text-faint); }
.endpoint .scope { margin-left: auto; font: 600 11px var(--font-sans); color: var(--text-muted); }
.endpoint .scope b { color: var(--text-2); }
.endpoint .desc { padding: 0 18px 14px; color: var(--text-2); font-size: 14px; }
.endpoint .body-pad { padding: 0 18px 18px; }

.params { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 13.5px; }
.params th { text-align: left; font: 700 11px var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-faint); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.params td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.params td code { background: var(--paper-2); }
.params .req { color: var(--rollup-ink); font-size: 11px; font-weight: 700; }
.params .opt { color: var(--text-faint); font-size: 11px; }

/* Code panel (dark) */
.codewrap { position: relative; margin-top: 12px; }
.code { background: var(--ink-950); color: #E7E9F4; border-radius: var(--radius);
    padding: 14px 16px; overflow-x: auto; font: 500 12.5px/1.65 var(--font-mono); }
.code .tok-m { color: #7CE0B0; font-weight: 700; }
.code .tok-u { color: #9DC7FF; }
.code .tok-k { color: #C9A6FF; }
.code .tok-s { color: #FFD28A; }
.code .tok-c { color: #7f8bb0; }
.copy-btn { position: absolute; top: 8px; right: 8px; font: 600 11px var(--font-sans); color: #cdd3ee;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 7px; padding: 5px 9px; cursor: pointer; }
.copy-btn:hover { background: rgba(255,255,255,0.16); }

/* Try-it */
.tryit { border-top: 1px dashed var(--border-2); margin-top: 16px; padding-top: 14px; }
.tryit .tt-head { display: flex; align-items: center; gap: 8px; font: 700 12px var(--font-sans);
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 10px; }
.tt-grid { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; align-items: center; }
.tt-grid label { font: 600 12.5px var(--font-mono); color: var(--text-2); }
.tt-grid input, .tt-body textarea {
    width: 100%; font: 500 12.5px var(--font-mono); padding: 8px 10px;
    border: 1px solid var(--border-2); border-radius: 8px; background: var(--paper); color: var(--text); }
.tt-grid input:focus, .tt-body textarea:focus { outline: none; border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-tint); }
.tt-body { margin-top: 10px; }
.tt-body label { display: block; font: 600 12.5px var(--font-mono); color: var(--text-2); margin-bottom: 4px; }
.tt-body textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.tt-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tt-hint { font-size: 12px; color: var(--text-faint); }
.tt-hint.warn { color: #9a6a12; }
.with-idem { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }

.resp { margin-top: 12px; display: none; }
.resp.show { display: block; }
.resp .bar { display: flex; align-items: center; gap: 10px; font: 600 12.5px var(--font-mono); margin-bottom: 6px; }
.resp .status { padding: 3px 9px; border-radius: 999px; }
.resp .s2 { background: var(--mint-soft); color: #0c7a4e; }
.resp .s4 { background: var(--amber-soft); color: #9a6a12; }
.resp .s5 { background: var(--coral-soft); color: var(--rollup-ink); }
.resp .ms { color: var(--text-faint); font-weight: 500; }

.datalist-note { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

/* JSON syntax coloring in responses */
.json .k { color: #7c5cff; }
.json .s { color: #117352; }
.json .n { color: #c53b1c; }
.json .b { color: #1a6bb0; }

/* Mobile */
.nav-toggle { display: none; }
@media (max-width: 900px) {
    /* minmax(0, …), NOT a bare 1fr — and note line 44 already gets this right for the desktop
       track. `1fr` is `minmax(auto, 1fr)`, and that auto floor is the column's min-content,
       which here is `.code`'s longest unbreakable line (712px). So the single column grew past
       the viewport and took the document with it: measured 755px of scrollWidth against a 390px
       screen, i.e. 365px of sideways pan on every view of the API reference. `.code` already has
       `overflow-x: auto` (line 135) — it just never got the chance to use it, because the track
       expanded to fit rather than letting the child scroll. */
    .api-shell { grid-template-columns: minmax(0, 1fr); }
    .api-main { min-width: 0; }

    /* The top bar was a fixed 58px nowrap flex row of 521px of content. */
    .api-top { height: auto; min-height: 58px; flex-wrap: wrap; gap: 10px 14px; padding: 9px 16px; }
    .api-top .spacer { flex: 1 1 100%; height: 0; }

    /* Capped but not scrollable: the nav is a fixed panel with a `vh` ceiling and no
       `overflow`, so on a phone every entry past the cap was painted outside the box and
       clipped, with no gesture able to reach it. `dvh` for the toolbar, `auto` for the rest. */
    .api-nav { position: fixed; inset: 58px 0 auto 0; height: auto; z-index: 30;
        max-height: 70vh; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain;
        background: var(--paper); border-bottom: 1px solid var(--border); display: none; }
    .api-nav.open { display: block; }
    .nav-toggle { display: inline-flex; }
    .api-main { padding: 24px 18px 100px; }
    .tt-grid { grid-template-columns: 1fr; }
    /* 260px of floor inside a ~322px content box, beside a wrapped label — it fits, but only
       just, and not at 360px. It has `flex: 1` and a full-width row to grow into. */
    .authbar input[type=password], .authbar input[type=text] { min-width: 0; }
}

/* ── Mobile platform guards ──────────────────────────────────────────────────────
   This document sets `Layout = null` and loads only tokens.css + apidoc.css, so it
   inherits neither of site.css's mobile guards. Measured at 390px before this: 81
   controls under 44px and 41 inputs under 16px — the worst page in the product on both
   counts, on the page developers type the longest strings into. */
@media (max-width: 820px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    select, textarea { font-size: 16px !important; }
    /* Inline <code> inside prose carries JSON fragments with no spaces to break at, so it set a
       377px min-content floor and took the document 20px wide even after the grid track was
       fixed. `anywhere` rather than `break-word` because the string has no break opportunities
       at all. Block code (.code) is untouched — it has its own overflow-x scroller. */
    p > code, li > code, td > code { overflow-wrap: anywhere; }
}
@media (pointer: coarse) {
    .lang-seg button, .api-top .back, .api-nav a, .tt-send, .btn {
        min-height: 44px; padding-top: 10px; padding-bottom: 10px;
    }
    .nav-toggle { min-width: 44px; min-height: 44px; justify-content: center; }
}