/* ============================================================================
   guide.css — the sidebar document layout: every page with a table of contents
   down the left. Loaded after docs.css, never together with landing.css.

   Ported from partner/api/developer-guide.html's inline stylesheet, with the
   single-page-application mechanic REMOVED. That file held ten chapters as
   .page sections with display:none and switched between them in JavaScript, so
   /partner/api/developer-guide.html#h-cred was a state, not an address: it
   could not be bookmarked reliably, indexed, or opened in a new tab. PD-2189
   makes every chapter a real file with a real URL, and the sidebar an ordinary
   list of links. There is no .page.active any more, and no router.
   ========================================================================= */

body.guide{font-size:15.5px}
.layout{display:flex; min-height:100vh}
.guide-main{flex:1; min-width:0}
.article{max-width:820px; margin:0 auto; padding:44px 32px 80px}
.article h1{font-size:29px; line-height:1.22; margin:6px 0 10px; font-weight:700}
.article h2{font-size:19px; margin:40px 0 12px; font-weight:600}
.article h3{font-size:16px; margin:26px 0 8px; font-weight:600}
.article h4{font-size:14.5px; margin:20px 0 6px; font-weight:600}
.article p{margin:0 0 14px; max-width:70ch}
.article ul,.article ol{margin:0 0 16px; padding-left:24px}
.article li{margin:0 0 6px; max-width:66ch}
.eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
	color:var(--muted); margin:0 0 4px; display:flex; align-items:center; gap:8px}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; flex:none}
.eyebrow.cred .dot{background:var(--cred)} .eyebrow.token .dot{background:var(--token)}
.eyebrow.data .dot{background:var(--data)} .eyebrow.brand .dot{background:var(--brand)}
.lede{font-size:16.5px; color:var(--muted); max-width:62ch; margin:0 0 26px}

/* ------------------------------------------------------------- sidebar */
.sidebar{width:256px; flex:none; border-right:1px solid var(--line); background:var(--panel);
	position:sticky; top:var(--mast-h); height:calc(100vh - var(--mast-h)); overflow-y:auto;
	display:flex; flex-direction:column; padding:22px 16px 16px}
.sidebar .side-title{font-family:var(--font-display); font-weight:700; font-size:15.5px;
	line-height:1.15; padding:2px 8px 2px}
.sidebar .side-sub{font-size:11px; color:var(--muted); letter-spacing:.09em;
	text-transform:uppercase; margin:3px 0 18px; padding:0 8px}
.nav-group{margin:14px 0 4px}
.nav-label{font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
	color:var(--muted); padding:0 10px; margin:0 0 6px}
.nav a{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px;
	color:var(--ink); font-size:13.5px; font-weight:500; line-height:1.3}
.nav a:hover{background:var(--line-soft); text-decoration:none}
.nav a[aria-current="page"]{background:var(--brand-soft); color:var(--brand-ink); font-weight:600}
.nav a.active{color:var(--brand-ink); font-weight:600}
.nav a.sub{padding-left:28px; font-size:12.5px; color:var(--muted)}
.nav a.sub:hover,.nav a.sub.active{color:var(--brand-ink)}
.nav .step-no{flex:none; width:20px; height:20px; border-radius:6px; font-size:11px; font-weight:600;
	display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
	background:var(--kbd-bg); color:var(--muted)}
.nav a[aria-current="page"] .step-no{background:var(--brand); color:var(--paper)}
.sidebar-foot{margin-top:auto; padding:16px 8px 4px; display:flex; align-items:center;
	justify-content:space-between; gap:8px}
.version{font-size:11.5px; color:var(--muted); font-family:var(--font-mono)}
.side-btn{display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 12px;
	border-radius:10px; font-size:13px; font-weight:600; border:1px solid var(--brand);
	color:var(--brand-ink)}
.side-btn .arr{font-family:var(--font-mono); font-size:12px}
.side-btn.solid{background:var(--brand); color:#ffffff}
.side-btn.solid:hover{background:var(--brand-ink); border-color:var(--brand-ink);
	color:#ffffff; text-decoration:none}
:root[data-theme="dark"] .side-btn.solid,
:root[data-theme="dark"] .side-btn.solid:hover{color:var(--ink-deep)}

/* -------------------------------------------------- mobile sidebar drawer */
.topbar{display:none; position:sticky; top:0; z-index:30; background:var(--panel);
	border-bottom:1px solid var(--line); padding:10px 16px; align-items:center; gap:12px}
.menu-btn{cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--ink);
	border-radius:8px; padding:7px 11px; font-size:13px; font-weight:600; font-family:inherit}
@media (max-width:900px){
	.topbar{display:flex}
	.sidebar{position:fixed; z-index:40; left:0; top:0; bottom:0; height:auto;
		transform:translateX(-105%); transition:transform .2s ease; box-shadow:var(--shadow)}
	.sidebar.open{transform:none}
	.scrim{position:fixed; inset:0; z-index:35; background:rgba(15,21,27,.45); opacity:0;
		pointer-events:none; transition:opacity .2s ease}
	.scrim.show{opacity:1; pointer-events:auto}
	.article{padding:28px 20px 64px}
}
@media (prefers-reduced-motion: reduce){
	.sidebar,.scrim{transition:none}
}

/* --------------------------------------------------------- code panes */
.codeblock{position:relative; margin:12px 0 18px; border:1px solid var(--line);
	border-radius:10px; overflow:hidden; background:var(--code-bg)}
.codeblock .code-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:7px 12px; border-bottom:1px solid var(--line); font-size:11px; font-weight:600;
	letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-family:var(--font-mono)}
.codeblock pre{margin:0; padding:13px 15px; overflow-x:auto; font-size:12.8px; line-height:1.6;
	color:var(--code-ink)}
.codeblock code{background:none; padding:0; font-size:inherit; color:inherit}
.copy-btn{cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--muted);
	border-radius:6px; padding:3px 9px; font-size:11px; font-weight:600; font-family:inherit}
.copy-btn:hover{color:var(--ink); border-color:var(--muted)}
.cmt{color:var(--muted)}
.hl{color:var(--brand-ink); font-weight:600}

/* ------------------------------------------------------------- tables */
.tablewrap{overflow-x:auto; margin:12px 0 20px; border:1px solid var(--line);
	border-radius:10px; background:var(--panel)}
.tablewrap table{width:100%; border-collapse:collapse; font-size:13.8px}
.tablewrap th{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
	text-align:left; padding:9px 14px; border-bottom:1px solid var(--line);
	background:var(--line-soft); font-weight:600}
.tablewrap td{padding:9px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.tablewrap tr:last-child td{border-bottom:none}
.tablewrap td code{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* -------------------------------------------------------- badges, chips */
.method{display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:600;
	border-radius:6px; padding:2px 7px; letter-spacing:.02em; white-space:nowrap}
.m-get,.method.get{color:var(--data); background:var(--data-soft); border:1px solid var(--data-line)}
.m-post,.method.post{color:var(--cred); background:var(--cred-soft); border:1px solid var(--cred-line)}
.m-put,.m-patch,.method.put,.method.patch{color:var(--token); background:var(--token-soft);
	border:1px solid var(--token-line)}
.m-delete,.method.delete{color:var(--danger); background:var(--danger-soft);
	border:1px solid var(--danger-line)}
.chip{display:inline-block; font-family:var(--font-mono); font-size:12px; font-weight:600;
	border-radius:999px; padding:2px 11px; white-space:nowrap}
.chip.read{color:var(--data); background:var(--data-soft); border:1px solid var(--data-line)}
.chip.write{color:var(--token); background:var(--token-soft); border:1px solid var(--token-line)}
.chip.act{color:var(--cred); background:var(--cred-soft); border:1px solid var(--cred-line)}
.status{font-family:var(--font-mono); font-size:12.5px; font-weight:600; white-space:nowrap}
.s2{color:var(--cred)} .s4{color:var(--danger)} .s5{color:var(--token)}

/* ----------------------------------------------------------- callouts */
.callout{display:flex; gap:11px; border:1px solid var(--token-line); background:var(--token-soft);
	border-radius:10px; padding:13px 15px; font-size:14px; margin:14px 0 18px; max-width:74ch}
.callout p{margin:0} .callout p+p{margin-top:8px}
.callout .ico{flex:none; font-size:15px; line-height:1.5}
.callout.note{border-color:var(--data-line); background:var(--data-soft)}
.callout.shield{border-color:var(--cred-line); background:var(--cred-soft)}
.callout.stop{border-color:var(--danger-line); background:var(--danger-soft)}

/* -------------------------------------------------------- numbered flow */
ol.flow{list-style:none; margin:16px 0 20px; padding:0; counter-reset:flowstep}
ol.flow>li{position:relative; padding:0 0 20px 44px; counter-increment:flowstep; max-width:none}
ol.flow>li:last-child{padding-bottom:4px}
ol.flow>li::before{content:counter(flowstep); position:absolute; left:0; top:0; width:28px; height:28px;
	border-radius:50%; background:var(--brand-soft); border:1px solid var(--brand-line);
	color:var(--brand-ink); font-size:13px; font-weight:600; text-align:center; line-height:26px;
	font-family:var(--font-mono)}
ol.flow>li:not(:last-child)::after{content:""; position:absolute; left:13px; top:30px; bottom:4px;
	width:2px; background:var(--brand-line); opacity:.5}
ol.flow .k{font-weight:600}

/* --------------------------------------------------------- inline cards */
.cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px;
	margin:16px 0 22px}
.cardgrid .card{border:1px solid var(--line); border-radius:12px; background:var(--panel);
	padding:15px 17px; box-shadow:var(--shadow)}
.cardgrid .card h3{margin:0 0 6px; font-size:14.5px; display:flex; align-items:center; gap:8px}
.cardgrid .card p{font-size:13.5px; color:var(--muted); margin:0}
.cardgrid .card .step-tag{font-family:var(--font-mono); font-size:10.5px; font-weight:600;
	letter-spacing:.08em; color:var(--muted); text-transform:uppercase; display:block; margin-bottom:6px}
.cardgrid a.card{display:block; color:inherit}
.cardgrid a.card:hover{text-decoration:none; border-color:var(--brand-line)}
.cardgrid a.card:hover h3{color:var(--brand-ink)}

/* -------------------------------------------------------- URL anatomy */
.url-anatomy{margin:14px 0 6px; padding:16px 18px 6px; border:1px solid var(--line);
	border-radius:12px; background:var(--panel); overflow-x:auto}
.url-anatomy .url{font-family:var(--font-mono); font-size:14px; white-space:nowrap; padding-bottom:4px}
.url-anatomy .seg{padding:3px 2px; border-radius:6px}
.url-anatomy .legend{display:flex; flex-wrap:wrap; gap:6px 18px; padding:10px 0 8px;
	font-size:12.5px; color:var(--muted)}
.url-anatomy .legend span{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.url-anatomy .swatch{width:10px; height:10px; border-radius:3px; flex:none; background:var(--line)}
.url-anatomy .swatch.inst{background:var(--brand-soft); border:1px solid var(--brand-line)}
.url-anatomy .swatch.loc{background:var(--token-soft); border:1px solid var(--token-line)}
.url-anatomy .swatch.res{background:var(--data-soft); border:1px solid var(--data-line)}
.url-anatomy .swatch.host{background:var(--line-soft); border:1px solid var(--line)}
.seg.host{color:var(--muted)}
.seg.inst{background:var(--brand-soft); color:var(--brand-ink); font-weight:600}
.seg.loc{background:var(--token-soft); color:var(--token); font-weight:600}
.seg.res{background:var(--data-soft); color:var(--data); font-weight:600}

/* -------------------------------------------------------------- pager
   Real prev/next links between real files. On the old single-file guide this
   was a router call; now it is the main way a reader walks a section in order,
   so every guide page carries one. */
.pager{display:flex; gap:12px; margin-top:52px; padding-top:22px; border-top:1px solid var(--line)}
.pager a{flex:1; border:1px solid var(--line); border-radius:12px; background:var(--panel);
	padding:13px 16px; color:inherit; min-width:0}
.pager a:hover{text-decoration:none; border-color:var(--brand-line)}
.pager .dir{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
	color:var(--muted); display:block; margin-bottom:3px}
.pager .pt{font-weight:600; font-size:14.5px; color:var(--brand-ink); display:block;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pager a.prev{text-align:left}
.pager a.next{text-align:right}
.pager .spacer{flex:1}

/* --------------------------------------------- diagrams & screenshots */
figure.shot{margin:16px 0 22px; padding:10px; border:1px solid var(--line); border-radius:12px;
	background:var(--panel); box-shadow:var(--shadow); max-width:74ch}
figure.shot img{display:block; width:100%; height:auto; border-radius:8px;
	border:1px solid var(--line-soft)}
figure.shot.tall img{width:auto; max-width:100%; max-height:560px; margin:0 auto}
figure.shot figcaption{margin:10px 4px 2px; font-size:12.8px; line-height:1.5; color:var(--muted)}

.footer-note{margin-top:56px; color:var(--muted); font-size:13px;
	border-top:1px solid var(--line); padding-top:16px}

@media print{
	.sidebar,.topbar,.pager,.copy-btn,.scrim,.masthead{display:none!important}
	.article{max-width:none; padding:20px 0}
	body{background:#fff; color:#111}
}