/* ---------------------------------------------------------------------------
   kob-ui website. Built on the library's own design tokens, so the site is
   itself a demonstration that the theme system carries a whole page.
   --------------------------------------------------------------------------- */

:root {
	--site-max: 1140px;
	--site-nav-h: 62px;
	--site-code-bg: #0b1e27;
	--site-code-fg: #cfe4ec;
	--site-hero-ink: #eaf6fa;
	--site-hero-muted: rgba(234, 246, 250, 0.68);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-nav-h) + 16px); }

body {
	margin: 0;
	background: var(--kob-bg);
	color: var(--kob-text);
	font: 15px/1.65 "Segoe UI", system-ui, -apple-system, "Noto Sans Thai", sans-serif;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--kob-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 12px; letter-spacing: -0.015em; }
h2 { font-size: 30px; }
h3 { font-size: 20px; }
p { margin: 0 0 14px; }

code { font-family: "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

:is(p, li, td) > code {
	padding: 1px 6px;
	border-radius: 5px;
	background: var(--kob-accent-soft);
	color: var(--kob-accent-dark);
	font-size: 0.9em;
}

.wrap { width: 100%; max-width: var(--site-max); margin: 0 auto; padding: 0 22px; }

.eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kob-accent);
}

.lede { font-size: 17px; color: var(--kob-muted); max-width: 62ch; }

/* ---------------------------------------------------------------- nav ---- */

.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--site-nav-h);
	border-bottom: 1px solid var(--kob-border);
	background: color-mix(in srgb, var(--kob-surface) 88%, transparent);
	backdrop-filter: blur(12px);
}
.nav-inner { display: flex; align-items: center; gap: 18px; height: 100%; }

.brand {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--kob-text);
}
.brand:hover { text-decoration: none; }
.brand b { color: var(--kob-accent); }
.brand .ver {
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--kob-accent-soft);
	color: var(--kob-accent-dark);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
}

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
	padding: 7px 12px;
	border-radius: 8px;
	color: var(--kob-muted);
	font-size: 14.5px;
	font-weight: 600;
}
.nav-links a:hover { background: var(--kob-accent-soft); color: var(--kob-accent-dark); text-decoration: none; }
.nav-links a.active { color: var(--kob-accent-dark); background: var(--kob-accent-soft); }

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--kob-border);
	border-radius: 9px;
	background: transparent;
	color: var(--kob-muted);
	cursor: pointer;
}
.icon-btn:hover { border-color: var(--kob-accent); color: var(--kob-accent); }

.nav-burger { display: none; }

/* --------------------------------------------------------------- hero ---- */

.hero {
	position: relative;
	overflow: hidden;
	padding: 74px 0 66px;
	background:
		radial-gradient(1100px 620px at 82% -18%, rgba(23, 96, 122, 0.55), transparent 62%),
		radial-gradient(900px 640px at -10% 112%, rgba(23, 96, 122, 0.34), transparent 58%),
		radial-gradient(rgba(248, 252, 253, 0.06) 1px, transparent 1px) 0 0 / 26px 26px,
		#071820;
	color: var(--site-hero-ink);
}
.hero h1 {
	margin: 0 0 16px;
	font-size: clamp(34px, 5.2vw, 54px);
	font-weight: 800;
	letter-spacing: -0.03em;
}
.hero h1 em { font-style: normal; color: #6fd0f0; }
.hero .lede { color: var(--site-hero-muted); font-size: 18px; max-width: 54ch; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 46px; align-items: center; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid rgba(234, 246, 250, 0.22);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--site-hero-ink);
	background: rgba(234, 246, 250, 0.07);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: #2e9dc0; border-color: #2e9dc0; color: #04202a; }
.btn-primary:hover { background: #46b3d4; border-color: #46b3d4; }
.btn-ghost { border-color: rgba(234, 246, 250, 0.3); color: var(--site-hero-ink); }
.btn-ghost:hover { background: rgba(234, 246, 250, 0.1); }

.install {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 380px;
	padding: 10px 10px 10px 16px;
	border: 1px solid rgba(234, 246, 250, 0.2);
	border-radius: 11px;
	background: rgba(4, 18, 25, 0.6);
	font-family: "Cascadia Mono", ui-monospace, Menlo, Consolas, monospace;
	font-size: 14px;
	color: var(--site-hero-ink);
}
.install .prompt { color: #5f9db3; }
.install code { flex: 1; }

.copy-btn {
	flex: none;
	padding: 5px 10px;
	border: 1px solid rgba(234, 246, 250, 0.22);
	border-radius: 7px;
	background: transparent;
	color: var(--site-hero-muted);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
.copy-btn:hover { background: rgba(234, 246, 250, 0.12); color: var(--site-hero-ink); }
.copy-btn.done { border-color: #6fd39a; color: #6fd39a; }

/* the framed screenshot-ish panel holding a live widget */
.window-mock {
	border: 1px solid rgba(234, 246, 250, 0.16);
	border-radius: 14px;
	background: var(--kob-surface);
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}
.window-mock-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--kob-border);
	background: var(--kob-accent-soft);
}
.window-mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--kob-border); }
.window-mock-bar span { margin-left: 6px; font-size: 12px; color: var(--kob-muted); }
.window-mock-body { padding: 0; }

/* ------------------------------------------------------------ sections --- */

section.band { padding: 66px 0; }
section.band.alt { background: var(--kob-surface); border-block: 1px solid var(--kob-border); }
.section-head { max-width: 66ch; margin-bottom: 30px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: 18px; }
.card {
	padding: 22px;
	border: 1px solid var(--kob-border);
	border-radius: 14px;
	background: var(--kob-surface);
	box-shadow: var(--kob-shadow-1);
}
section.band.alt .card { background: var(--kob-bg); }
.card h3 { font-size: 17px; margin-bottom: 6px; }
.card p { margin: 0; color: var(--kob-muted); font-size: 14.5px; }
.card .kob-icon {
	width: 22px;
	height: 22px;
	margin-bottom: 12px;
	color: var(--kob-accent);
}

/* ------------------------------------------------------------ code ------- */

.code {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: var(--site-code-bg);
	border: 1px solid rgba(234, 246, 250, 0.12);
}
.code-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid rgba(234, 246, 250, 0.1);
	color: rgba(207, 228, 236, 0.6);
	font-size: 12px;
	font-family: "Cascadia Mono", ui-monospace, Menlo, Consolas, monospace;
}
.code-bar .copy-btn { margin-left: auto; }
.code pre {
	margin: 0;
	padding: 16px 18px;
	overflow-x: auto;
	color: var(--site-code-fg);
	font-family: "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13.2px;
	line-height: 1.62;
	tab-size: 2;
}

.tok-comment { color: #6d8f9c; font-style: italic; }
.tok-string { color: #a5d6a7; }
.tok-number { color: #f0b37e; }
.tok-keyword { color: #6fc3e8; }
.tok-atom { color: #d8a0e8; }
.tok-fn { color: #ffd479; }
.tok-tag { color: #6fc3e8; }
.tok-attr { color: #ffd479; }
.tok-punct { color: #8fa9b4; }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }

/* ------------------------------------------------------- live examples --- */

.example {
	border: 1px solid var(--kob-border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--kob-surface);
	margin: 0 0 26px;
}
.example-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--kob-border);
	background: var(--kob-accent-soft);
}
.example-head h4 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--kob-accent-dark); }
.example-head .spacer { flex: 1; }
.example-tabs { display: flex; gap: 2px; }
.example-tab {
	padding: 4px 12px;
	border: 1px solid transparent;
	border-radius: 7px;
	background: transparent;
	color: var(--kob-muted);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.example-tab:hover { color: var(--kob-accent-dark); }
.example-tab.on { background: var(--kob-surface); border-color: var(--kob-border); color: var(--kob-accent-dark); }
.example-preview { padding: 20px; background: var(--kob-bg); }
.example-source { display: none; }
.example-source .code { border-radius: 0; border: none; border-top: 1px solid var(--kob-border); }
.example.show-source .example-source { display: block; }

/* --------------------------------------------------------------- docs ---- */

.doc-shell {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	padding: 34px 0 90px;
}
.doc-nav {
	position: sticky;
	top: calc(var(--site-nav-h) + 20px);
	max-height: calc(100vh - var(--site-nav-h) - 40px);
	overflow-y: auto;
	padding-right: 8px;
}
.doc-nav h5 {
	margin: 18px 0 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--kob-muted);
}
.doc-nav h5:first-child { margin-top: 0; }
.doc-nav a {
	display: block;
	padding: 5px 10px;
	border-radius: 7px;
	color: var(--kob-text);
	font-size: 14px;
}
.doc-nav a:hover { background: var(--kob-accent-soft); text-decoration: none; }
.doc-nav a.active { background: var(--kob-accent-soft); color: var(--kob-accent-dark); font-weight: 700; }

.doc-body > section { padding-top: 14px; margin-bottom: 46px; }
.doc-body h2 { padding-bottom: 8px; border-bottom: 1px solid var(--kob-border); }
.doc-body h3 { margin-top: 30px; }

.api-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.api-table th, .api-table td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--kob-border);
	text-align: left;
	vertical-align: top;
}
.api-table th {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kob-muted);
	border-bottom-color: var(--kob-accent);
}
.api-table td:first-child { white-space: nowrap; font-family: "Cascadia Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--kob-accent-dark); }
.api-table td:nth-child(2) { white-space: nowrap; color: var(--kob-muted); font-size: 12.5px; }
.table-scroll { overflow-x: auto; }

.callout {
	padding: 14px 18px;
	margin: 0 0 20px;
	border-left: 3px solid var(--kob-accent);
	border-radius: 0 10px 10px 0;
	background: var(--kob-accent-soft);
	font-size: 14.5px;
}
.callout p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- compare --- */

.compare { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--kob-surface); border-radius: 12px; overflow: hidden; }
.compare th, .compare td { padding: 13px 16px; border-bottom: 1px solid var(--kob-border); text-align: left; }
.compare thead th { background: var(--kob-accent-soft); color: var(--kob-accent-dark); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.compare tbody td:first-child { font-weight: 600; }
.compare .yes { color: var(--kob-success); font-weight: 700; }
.compare .no { color: var(--kob-danger); font-weight: 700; }

/* ------------------------------------------------------------- footer ---- */

.footer {
	padding: 40px 0;
	border-top: 1px solid var(--kob-border);
	background: var(--kob-surface);
	color: var(--kob-muted);
	font-size: 14px;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.footer .spacer { flex: 1; }
.footer nav { display: flex; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------ responsive - */

@media (max-width: 900px) {
	.hero-grid { grid-template-columns: 1fr; gap: 34px; }
	.doc-shell { grid-template-columns: 1fr; gap: 0; }
	.doc-nav {
		position: static;
		max-height: none;
		margin-bottom: 26px;
		padding: 14px;
		border: 1px solid var(--kob-border);
		border-radius: 12px;
		background: var(--kob-surface);
	}
	.nav-links {
		position: absolute;
		top: var(--site-nav-h);
		right: 12px;
		left: 12px;
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 8px;
		border: 1px solid var(--kob-border);
		border-radius: 12px;
		background: var(--kob-surface);
		box-shadow: var(--kob-shadow-2);
	}
	.nav-links.open { display: flex; }
	.nav-burger { display: inline-flex; margin-left: auto; }
	.nav-tools { display: flex; gap: 8px; }
}

@media (max-width: 560px) {
	section.band { padding: 46px 0; }
	h2 { font-size: 25px; }
	.hero { padding: 52px 0 46px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}

/* ------------------------------------------------------------ scrollbars - */

/* <html class="kob-scrollbars"> opts the whole page into the library's themed
   scrollbars. The code panels stay dark in both themes, so they override the
   thumb colours locally rather than borrowing the page's. */
.code,
.code pre {
	--kob-scrollbar-thumb: rgba(207, 228, 236, 0.26);
	--kob-scrollbar-thumb-hover: rgba(207, 228, 236, 0.45);
}

/* Same for the always-dark hero band. */
.hero {
	--kob-scrollbar-thumb: rgba(234, 246, 250, 0.26);
	--kob-scrollbar-thumb-hover: rgba(234, 246, 250, 0.45);
}