/* docs.proofestry.com chrome around Redoc. Tokens only (tokens/tokens.css, components/proofestry.css). */
*, *::before, *::after { box-sizing: border-box; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); }
.bar { border-bottom: 1px solid var(--border); background: var(--ground); position: sticky; top: 0; z-index: 20; }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--space-4); }
.bar a.pf-logo { text-decoration: none; }
.bar .links { display: flex; align-items: center; gap: var(--space-6); font-size: 15px; font-weight: 500; }
.bar .links a { color: var(--text); text-decoration: none; }
.bar .links a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; }
.theme-toggle { min-height: 44px; min-width: 44px; padding: 0 var(--space-3); border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: 600 14px var(--font-sans); cursor: pointer; }
.theme-toggle:hover { border-color: var(--primary); }
@media (max-width: 640px) { .bar .links a.hide-sm { display: none; } }

.intro { padding: var(--space-12) 0 var(--space-6); }
.intro h1 { margin: var(--space-3) 0 var(--space-4); }
.intro p { max-width: 44em; margin: 0 0 var(--space-4); }
.base { display: inline-block; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 8px; font-family: var(--font-mono); font-size: 14px; }

#mcp { padding: var(--space-6) 0 var(--space-12); border-bottom: 1px solid var(--border); }
#mcp h2 { margin: var(--space-3) 0 var(--space-4); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); margin-top: var(--space-6); }
table.tools { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.tools th, .tools td { text-align: left; padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border); vertical-align: top; }
.tools tr:last-child td { border-bottom: 0; }
.tools th { font: 500 13px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.tools td.mono { font-family: var(--font-mono); font-size: 14px; }

#redoc-title { padding-top: var(--space-8); }
#redoc { min-height: 50vh; }
.err { padding: var(--space-8) 0; color: var(--text-muted); }
#redoc-title { padding-bottom: var(--space-6); }

/* Redoc ships its own text colors for a few elements; keep them readable in both themes. */
#redoc h5, #redoc h5 span { color: var(--text-muted) !important; }
#redoc .http-verb { color: var(--on-primary) !important; }
#redoc .react-tabs__tab { color: var(--text) !important; }
#redoc .react-tabs__tab--selected { background: var(--primary) !important; color: var(--on-primary) !important; }

/* JSON samples (right panel): Redoc's defaults assume a dark panel, so keys and values vanish on the light code background. */
#redoc .redoc-json, #redoc .redoc-json code { color: var(--text) !important; }
#redoc .redoc-json .property.token.string { color: var(--primary) !important; }
#redoc .redoc-json .token.string, #redoc .redoc-json .token.number,
#redoc .redoc-json .token.boolean, #redoc .redoc-json .token.null { color: var(--accent-text) !important; }
#redoc .redoc-json .token.punctuation, #redoc .redoc-json .collapser, #redoc .redoc-json .ellipsis { color: var(--text-muted) !important; }