/*
 * Clients API reference (/client-api/, page-client-api.php).
 * Converted from the standalone "Atarim Clients API.html". Every rule is scoped
 * to .capi so nothing leaks into (or is overridden by) the global layer; the
 * page's own tokens live on .capi rather than :root for the same reason.
 * Fonts: Roboto is self-hosted (fonts.css, max weight 700). The mono stack
 * leads with JetBrains Mono when the visitor has it, else the system mono.
 */

body.capi-body { background: #ffffff; }

.capi {
	color-scheme: light;
	--primary: #6d5df3;
	--primary-deep: #5546d8;
	--accent: #17de88;
	--accent-deep: #0b8f56;
	--canvas: #ffffff;
	--subtle: #f6f4ff;
	--brand-soft: #f1effe;
	--inverted: #272d3c;
	--text-strong: #1a1f2e;
	--text: #363d4d;
	--text-dim: #535768;
	--rule: rgba(54, 61, 77, 0.08);
	--rule-strong: rgba(54, 61, 77, 0.16);
	--warn: #b4540a;
	--warn-soft: #fff3e8;
	--danger: #c0344a;
	--danger-soft: #fdecef;
	--shadow-tier1: rgba(0, 0, 51, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 0px 10px 0px, rgba(0, 0, 85, 0.024) 0px 16px 64px 0px;
	--radius-button: 8px;
	--radius-card: 18px;
	--radius-pill: 999px;
	--capi-font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	--capi-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	min-height: 100vh;
	background: var(--canvas);
	color: var(--text);
	font-family: var(--capi-font-body);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.capi * { box-sizing: border-box; }
.capi code, .capi .mono { font-family: var(--capi-font-mono); font-size: 0.86em; }
.capi p code, .capi td code, .capi li code { background: var(--brand-soft); color: var(--primary-deep); padding: 1px 6px; border-radius: 6px; }

.capi .topbar {
	position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--rule);
}
.admin-bar .capi .topbar { top: 32px; }
.capi .topbar-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 24px; max-width: 1200px; margin: 0 auto;
}
.capi .brand { display: flex; align-items: center; gap: 14px; }
.capi .pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; border-radius: var(--radius-pill);
	background: var(--brand-soft); color: var(--primary);
	font-family: var(--capi-font-mono); font-size: 11px; font-weight: 500; white-space: nowrap;
}

.capi .layout {
	max-width: 1200px; margin: 0 auto;
	padding-inline: 24px; padding-block: 48px 96px;
	display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px;
}
.capi nav.toc { position: sticky; top: 88px; align-self: start; display: flex; flex-direction: column; gap: 4px; }
.capi .toc-label { font-family: var(--capi-font-mono); font-size: 11px; color: var(--text-dim); margin: 16px 0 6px; }
.capi .toc-label:first-child { margin-top: 0; }
.capi .toc a {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 10px; border-radius: var(--radius-button);
	color: var(--text); text-decoration: none; font-size: 13.5px;
}
.capi .toc a:hover, .capi .toc a:focus-visible { background: var(--subtle); color: var(--text-strong); outline: none; }
.capi .toc .m { width: 44px; flex: none; }

.capi h1 { font-family: var(--capi-font-body); font-weight: 900; font-size: clamp(36px, 5vw, 56px); line-height: 1; letter-spacing: -2px; color: var(--text-strong); margin: 0 0 16px; text-wrap: balance; }
.capi h2 { font-family: var(--capi-font-body); font-weight: 900; font-size: 28px; letter-spacing: -1px; color: var(--text-strong); margin: 0 0 12px; }
.capi h3 { font-family: var(--capi-font-body); font-weight: 700; font-size: 13px; color: var(--text-dim); margin: 22px 0 8px; letter-spacing: 0.2px; }
.capi .lede { font-size: 17px; color: var(--text-dim); max-width: 64ch; margin: 0; }
.capi .grad { background: linear-gradient(135deg, var(--primary) 0%, var(--accent-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.capi .basics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0 56px; }
.capi .fact { background: var(--subtle); border-radius: var(--radius-card); padding: 20px 22px; }
.capi .fact-label { font-family: var(--capi-font-mono); font-size: 11px; color: var(--primary); font-weight: 500; margin-bottom: 6px; }
.capi .fact p { margin: 6px 0 0; font-size: 14px; }
.capi .fact .big { font-family: var(--capi-font-mono); font-size: 14px; color: var(--text-strong); word-break: break-all; }

.capi .group-title { font-family: var(--capi-font-mono); font-size: 12px; color: var(--primary); font-weight: 500; display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.capi .group-title::before { content: ''; width: 16px; height: 2px; background: var(--primary); border-radius: 2px; }
.capi .group { margin-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }

.capi .endpoint { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-tier1); padding: 26px 28px; scroll-margin-top: 90px; }
.capi .ep-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.capi .method { font-family: var(--capi-font-mono); font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: var(--radius-pill); letter-spacing: 0.4px; }
.capi .method.get { background: rgba(23, 222, 136, 0.14); color: var(--accent-deep); }
.capi .method.post { background: var(--brand-soft); color: var(--primary-deep); }
.capi .method.patch { background: var(--warn-soft); color: var(--warn); }
.capi .path { font-family: var(--capi-font-mono); font-size: 15px; color: var(--text-strong); word-break: break-all; }
.capi .path .var { color: var(--primary); }
.capi .summary { font-weight: 700; font-size: 18px; color: var(--text-strong); margin: 12px 0 4px; letter-spacing: -0.3px; }
.capi .desc { margin: 0; max-width: 72ch; }

.capi .tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; }
.capi table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.capi th { text-align: left; font-weight: 500; color: var(--text-dim); font-size: 12px; background: var(--subtle); padding: 8px 12px; }
.capi td { padding: 10px 12px; border-top: 1px solid var(--rule); vertical-align: top; }
.capi td.name { font-family: var(--capi-font-mono); font-size: 12.5px; color: var(--text-strong); white-space: nowrap; }
.capi td.type { font-family: var(--capi-font-mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.capi .req { color: var(--danger); font-family: var(--capi-font-mono); font-size: 10.5px; margin-left: 6px; }
.capi .enum { display: block; margin-top: 4px; font-family: var(--capi-font-mono); font-size: 11.5px; color: var(--text-dim); }

.capi .responses { display: flex; flex-direction: column; gap: 6px; }
.capi .resp { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 14px; }
.capi .code { font-family: var(--capi-font-mono); font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: var(--radius-pill); text-align: center; }
.capi .code.ok { background: rgba(23, 222, 136, 0.14); color: var(--accent-deep); }
.capi .code.err { background: var(--danger-soft); color: var(--danger); }

.capi details.example { margin-top: 16px; }
.capi details.example summary { cursor: pointer; font-size: 13px; color: var(--primary); font-weight: 500; }
.capi details.example summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.capi .code-block { background: var(--inverted); color: rgba(255, 255, 255, 0.9); padding: 18px 20px; border-radius: 12px; font-family: var(--capi-font-mono); font-size: 12.5px; line-height: 1.7; overflow-x: auto; margin-top: 10px; }
.capi .code-block pre { margin: 0; white-space: pre; font-family: inherit; }
.capi .spec { position: relative; scroll-margin-top: 90px; }
.capi .spec .code-block { max-height: 520px; overflow: auto; }
.capi .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-button); font-family: var(--capi-font-body); font-size: 14px; font-weight: 500; cursor: pointer; border: none; background: var(--primary); color: #fff; }
.capi .btn:hover { background: var(--primary-deep); }
.capi .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.capi .spec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.capi .muted { color: var(--text-dim); font-size: 14px; margin: 0; }

@media (max-width: 900px) {
	/* minmax, not 1fr: a bare 1fr track grew to the code blocks' width (~1600px) on phones and tablets */
	.capi .layout { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 32px 64px; padding-inline: 16px; }
	.capi nav.toc { position: static; }
	.capi .layout > * { min-width: 0; }
	.capi .basics { grid-template-columns: minmax(0, 1fr); }
	.capi .endpoint { padding: 20px 18px; }
	.capi .topbar-inner { padding: 12px 16px; }
}
@media (max-width: 782px) {
	.admin-bar .capi .topbar { top: 46px; }
}