/* Examples & tutorials index (/example/).
   Loaded after site.css + legacy.css, so it reuses the shared tokens. Every rule
   is scoped under .ex to outrank the legacy Kapital theme's element styles. */

.ex {
	--ex-gutter: clamp(1rem, 0.4rem + 2.5vw, 2rem);
	--ex-radius: 14px;
	--ex-hero-top: #d5d7ee;
	--ex-hero-bottom: #e8e9f2;
	--ex-amber: #9a5b00;
	--ex-amber-50: #fdf1dc;
	--ex-shadow: 0 1px 2px rgba(18, 20, 27, .05);
	--ex-shadow-hover: 0 1px 2px rgba(18, 20, 27, .06), 0 24px 48px -28px rgba(18, 20, 27, .35);
	--ex-sticky-top: 7.25rem;

	background: var(--paper); color: var(--ink-950);
	font: 400 16px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased;
}
.ex *, .ex *::before, .ex *::after { box-sizing: border-box; }
.ex :where(h1, h2, h3, p, ul, ol, li, dl, dt, dd) { margin: 0; padding: 0; border: 0; background: none; float: none; }
.ex :where(ol, ul) { list-style: none; }
.ex dl, .ex dt, .ex dd { margin: 0; padding: 0; border: 0; background: none; float: none; width: auto; text-align: left; }
.ex dt::after, .ex dt::before { content: none; }
.ex a { color: inherit; text-decoration: none; }
.ex input { width: auto; height: auto; min-height: 0; margin: 0; box-shadow: none; letter-spacing: normal; text-transform: none; }
.ex .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ex :focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }
.ex .ex-wrap { width: 100%; max-width: calc(1240px + 2 * var(--ex-gutter)); margin: 0 auto; padding-left: var(--ex-gutter); padding-right: var(--ex-gutter); }

.ex .ex-eyebrow { font: 500 13px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); }
.ex .ex-h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.1; color: var(--ink-950); }
.ex .ex-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.25rem; }
.ex .ex-section-head p { color: var(--ink-600); font-size: .9375rem; }
.ex .ex-section-head--spaced { margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }

/* ---- Hero ---- */
.ex .ex-hero {
	padding: clamp(3rem, 2rem + 4vw, 5rem) 0 clamp(2.5rem, 2rem + 2vw, 3.5rem);
	background:
		radial-gradient(circle at 1px 1px, rgba(74, 79, 196, .14) 1px, transparent 0) 0 0 / 22px 22px,
		radial-gradient(48rem 26rem at 85% 30%, rgba(74, 79, 196, .18), transparent 70%),
		linear-gradient(180deg, var(--ex-hero-top) 0%, var(--ex-hero-bottom) 100%);
	border-bottom: 1px solid var(--line);
}
.ex .ex-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .ex .ex-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }
.ex .ex-hero h1 {
	margin-top: 1rem; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em;
	font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.25rem); line-height: 1.02; color: var(--ink-950);
}
.ex .ex-lede { max-width: 38rem; margin-top: 1.25rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: var(--ink-600); }
.ex .ex-lede a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.ex .ex-stats { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin-top: 2rem; }
.ex .ex-stats div { display: flex; flex-direction: column; gap: .15rem; }
.ex .ex-stats dt { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.ex .ex-stats dd { font: 700 1.5rem/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ink-950); }

.ex .ex-explorer {
	position: relative; overflow: hidden; padding: clamp(1.5rem, 1rem + 1.5vw, 2rem); border-radius: var(--ex-radius);
	background: var(--ink-950); color: #c4c7d2; box-shadow: 0 30px 60px -36px rgba(18, 20, 27, .6);
}
.ex .ex-explorer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(30rem 16rem at 100% 0%, rgba(124, 129, 240, .35), transparent 70%); }
.ex .ex-explorer > * { position: relative; }
.ex .ex-explorer .ex-eyebrow { color: var(--indigo-300); }
.ex .ex-explorer h2 { margin-top: .6rem; font: 800 1.6rem/1.15 var(--font-display); letter-spacing: -0.03em; color: var(--white); }
.ex .ex-explorer p { margin-top: .6rem; font-size: .9375rem; }
.ex .ex-explorer__note { display: flex; gap: .5rem; align-items: flex-start; margin-top: 1rem; padding: .7rem .8rem; border-radius: 9px; background: rgba(255, 255, 255, .06); font-size: .875rem; color: #b4b8c4; }
.ex .ex-explorer__note svg { flex: none; width: 16px; height: 16px; margin-top: .15rem; fill: none; stroke: var(--indigo-300); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ex .ex-explorer__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

.ex .ex-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .6rem 1.1rem;
	border: 1px solid transparent; border-radius: 6px; font: 600 15px/1.2 var(--font-sans);
	transition: background-color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-normal) var(--ease-out-expo);
}
.ex .ex-btn:active { transform: translateY(1px); }
.ex .ex-btn--primary { background: var(--indigo); color: var(--white); }
.ex .ex-btn--primary:hover { background: var(--indigo-600); color: var(--white); }
.ex .ex-btn--ghost { border-color: rgba(255, 255, 255, .22); color: var(--white); }
.ex .ex-btn--ghost:hover { border-color: rgba(255, 255, 255, .5); color: var(--white); }

/* ---- Layout ---- */
.ex .ex-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
@media (min-width: 1024px) { .ex .ex-body { grid-template-columns: 13rem minmax(0, 1fr); gap: 3.5rem; } }
.ex .ex-main { min-width: 0; }
.ex .ex-group { scroll-margin-top: var(--ex-sticky-top); }
.ex .ex-group + .ex-group { margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }

/* ---- Sidebar: filter + topic index ---- */
.ex .ex-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (min-width: 1024px) { .ex .ex-side { position: sticky; top: var(--ex-sticky-top); align-self: start; max-height: calc(100vh - var(--ex-sticky-top) - 1rem); } }
.ex .ex-filter { position: relative; display: block; }
.ex .ex-filter svg { position: absolute; left: .8rem; top: 50%; z-index: 1; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--ink-500); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.ex .ex-filter input {
	box-sizing: border-box; -webkit-appearance: none; appearance: none;
	width: 100%; height: 44px; padding: 0 .85rem 0 2.3rem;
	border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: var(--ink-950);
	font: 400 15px/1.4 var(--font-sans); box-shadow: var(--ex-shadow);
	transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.ex .ex-filter input::placeholder { color: var(--ink-500); }
.ex .ex-filter input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(74, 79, 196, .15); }
.ex .ex-count { font: 400 13px/1.4 var(--font-mono); color: var(--ink-500); }

.ex .ex-toc { position: relative; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--ex-gutter)); padding: 0 var(--ex-gutter) .25rem; }
.ex .ex-toc::-webkit-scrollbar { display: none; }
.ex .ex-toc a {
	display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex: none;
	padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white);
	font: 500 14px/1.3 var(--font-sans); color: var(--ink-700);
	transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.ex .ex-toc a span { font: 400 12px/1 var(--font-mono); color: var(--ink-500); }
.ex .ex-toc a:hover { border-color: var(--ink-300); color: var(--ink-950); }
.ex .ex-toc a.is-active { background: var(--ink-950); border-color: var(--ink-950); color: var(--white); }
.ex .ex-toc a.is-active span { color: var(--ink-300); }
.ex .ex-toc a.is-empty { opacity: .4; }
@media (min-width: 1024px) {
	.ex .ex-toc { flex-direction: column; gap: 0; overflow-x: visible; overflow-y: auto; margin: 0; padding: 0; border-left: 1px solid var(--line); scrollbar-width: thin; }
	.ex .ex-toc a { margin-left: -1px; padding: .3rem 0 .3rem 1rem; border: 0; border-left: 2px solid transparent; border-radius: 0; background: none; font-size: 13.5px; }
	.ex .ex-toc a.is-active { background: none; border-left-color: var(--indigo); color: var(--indigo); }
	.ex .ex-toc a.is-active span { color: var(--indigo); }
}
.ex .ex-legend { display: none; align-items: center; gap: .5rem; font-size: 12.5px; color: var(--ink-500); }
@media (min-width: 1024px) { .ex .ex-legend { display: flex; } }

/* ---- Tags ---- */
.ex .ex-tag { display: inline-flex; align-items: center; flex: none; padding: .1rem .45rem; border-radius: 999px; font: 500 11px/1.5 var(--font-mono); letter-spacing: .02em; white-space: nowrap; }
.ex .ex-tag--pro { background: var(--ex-amber-50); color: var(--ex-amber); }
.ex .ex-tag--meta { background: var(--indigo-50); color: var(--indigo-ink); }

/* ---- Start here: numbered path ---- */
.ex .ex-steps { display: grid; gap: .75rem; counter-reset: step; }
@media (min-width: 640px) { .ex .ex-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ex .ex-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ex .ex-steps li { counter-increment: step; }
.ex .ex-step {
	display: flex; align-items: flex-start; gap: .9rem; height: 100%; padding: 1rem 1.1rem;
	border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--ex-shadow);
	transition: border-color var(--duration-fast), box-shadow var(--duration-normal) var(--ease-out-expo), transform var(--duration-normal) var(--ease-out-expo);
}
.ex .ex-step::before {
	content: counter(step, decimal-leading-zero); flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
	border-radius: 8px; background: var(--indigo-50); color: var(--indigo); font: 600 13px/1 var(--font-mono);
	transition: background-color var(--duration-fast), color var(--duration-fast);
}
.ex .ex-step b { display: block; font: 600 15px/1.35 var(--font-sans); color: var(--ink-950); }
.ex .ex-step .ex-tag { margin-top: .35rem; }
.ex .ex-step:hover { border-color: var(--indigo-300); box-shadow: var(--ex-shadow-hover); transform: translateY(-2px); }
.ex .ex-step:hover::before { background: var(--indigo); color: var(--white); }

/* ---- App tutorials ---- */
.ex .ex-apps { display: grid; gap: 1rem; }
@media (min-width: 640px) { .ex .ex-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ex .ex-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ex .ex-app {
	display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.25rem 1.3rem 1.1rem;
	border: 1px solid var(--line); border-radius: var(--ex-radius); background: var(--white); box-shadow: var(--ex-shadow);
	transition: border-color var(--duration-fast), box-shadow var(--duration-normal) var(--ease-out-expo), transform var(--duration-normal) var(--ease-out-expo);
}
.ex .ex-app:hover { border-color: #dcdbd3; box-shadow: var(--ex-shadow-hover); transform: translateY(-3px); }
.ex .ex-app__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.ex .ex-app h3 { font: 700 1.125rem/1.3 var(--font-display); letter-spacing: -0.015em; color: var(--ink-950); }
.ex .ex-app__more { margin-top: auto; font: 600 14px/1.3 var(--font-sans); color: var(--indigo); }
.ex .ex-app__more span { display: inline-block; transition: transform var(--duration-normal) var(--ease-out-expo); }
.ex .ex-app:hover .ex-app__more span { transform: translateX(3px); }

/* ---- Topic lists ---- */
.ex .ex-topic { padding: 1.25rem 1.4rem 1rem; border: 1px solid var(--line); border-radius: var(--ex-radius); background: var(--white); box-shadow: var(--ex-shadow); }
.ex .ex-topic + .ex-topic { margin-top: 1rem; }
.ex .ex-topic__head { display: flex; align-items: baseline; gap: .6rem; padding-bottom: .75rem; margin-bottom: .35rem; border-bottom: 1px solid var(--line-soft); }
.ex .ex-topic h3 { font: 700 1.2rem/1.25 var(--font-display); letter-spacing: -0.02em; color: var(--ink-950); }
.ex .ex-topic__head small { font: 400 12.5px/1 var(--font-mono); color: var(--ink-500); }
.ex .ex-links { display: grid; column-gap: 1.5rem; }
@media (min-width: 720px) { .ex .ex-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex .ex-links a {
	display: flex; align-items: center; gap: .55rem; padding: .5rem .55rem; margin: 0 -.55rem; border-radius: 8px;
	font-size: .9375rem; line-height: 1.4; color: var(--ink-800);
	transition: background-color var(--duration-fast), color var(--duration-fast);
}
.ex .ex-links a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo-300); transition: background-color var(--duration-fast); }
.ex .ex-links a > span:not(.ex-tag) { flex: 1; min-width: 0; }
.ex .ex-links a:hover { background: var(--indigo-50); color: var(--indigo-ink); }
.ex .ex-links a:hover::before { background: var(--indigo); }

.ex .ex-empty { padding: 3rem 1rem; text-align: center; color: var(--ink-500); border: 1px dashed var(--line); border-radius: var(--ex-radius); }
.ex [hidden] { display: none !important; }

/* ---- Knowledge Base callout ---- */
.ex .ex-kb {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
	margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
	border-radius: var(--ex-radius); background: var(--indigo-50); border: 1px solid #dcdcf7;
}
.ex .ex-kb > div { flex: 1 1 26rem; }
.ex .ex-kb h2 { font: 800 1.5rem/1.15 var(--font-display); letter-spacing: -0.025em; color: var(--ink-950); }
.ex .ex-kb p { margin-top: .5rem; color: var(--ink-600); }
.ex .ex-kb__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.ex .ex-btn--outline { background: var(--white); border-color: var(--line); color: var(--ink-950); }
.ex .ex-btn--outline:hover { border-color: var(--ink-300); color: var(--ink-950); }

@media (prefers-reduced-motion: reduce) {
	.ex *, .ex *::before { transition: none !important; }
	.ex .ex-step:hover, .ex .ex-app:hover { transform: none; }
}