/* Oogle Help Center
 *
 * Every colour, font, radius and shadow is a custom property that falls back
 * to the theme's own presets (theme.json) and then to neutral defaults, so the
 * help center takes on the site's identity without site-specific CSS.
 *
 * Motion: hover never moves layout. Lifting surfaces travel with `translate`
 * (composited), and extend their hit box by the lift distance so the pointer
 * cannot fall off the bottom edge and flicker. Nothing animates a size, a
 * margin or a border width. All motion is off under prefers-reduced-motion.
 */

.okb {
	--okb-accent: var(--wp--preset--color--blue-600, #1560e8);
	--okb-accent-strong: var(--wp--preset--color--blue-700, #0e4dbb);
	--okb-accent-soft: var(--wp--preset--color--blue-100, #e3eefd);
	--okb-ink: var(--wp--preset--color--ink, #14283c);
	--okb-ink-2: var(--wp--preset--color--ink-2, #43607b);
	--okb-ink-3: var(--wp--preset--color--ink-3, #546f8a);
	--okb-bg: var(--wp--preset--color--paper, #fff);
	--okb-surface: var(--wp--preset--color--paper, #fff);
	--okb-mist: var(--wp--preset--color--mist, #f7f9fa);
	--okb-frost: var(--wp--preset--color--frost, #eff2f5);
	--okb-line: var(--wp--preset--color--line, #e3e9ee);
	--okb-line-2: var(--wp--preset--color--line-2, #cfd9e2);
	--okb-hero: var(--wp--preset--color--navy-900, #0c1d2e);
	--okb-hero-2: var(--wp--preset--color--navy-800, #12283d);
	--okb-hero-ink: #f4f9fd;
	--okb-hero-ink-2: #a8bfd3;
	--okb-ice: var(--wp--preset--color--sky-400, #5fb9ee);
	--okb-ok: #0e7f58;
	--okb-warn: #8a5300;
	--okb-danger: #b42318;
	--okb-font: var(--wp--preset--font-family--body, inherit);
	--okb-font-head: var(--wp--preset--font-family--display, inherit);
	--okb-font-mono: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	--okb-r-sm: .625rem;
	--okb-r: 1.125rem;
	--okb-r-lg: 1.375rem;
	--okb-shadow: 0 2px 4px rgba(8, 25, 45, .04), 0 14px 36px -20px rgba(8, 25, 45, .16);
	--okb-shadow-on: 0 2px 6px rgba(8, 25, 45, .05), 0 22px 48px -24px rgba(8, 25, 45, .26), 0 26px 52px -30px rgba(21, 96, 232, .3);
	--okb-ease: cubic-bezier(.16, 1, .3, 1);
	--okb-dur: 300ms;
	--okb-lift: -3px;
	--okb-max: 1240px;
	--okb-gap: clamp(1rem, 2.5vw, 1.5rem);
	--okb-sticky-top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.25rem);

	color: var(--okb-ink);
	background: var(--okb-bg);
	font-family: var(--okb-font);
	font-size: 1rem;
	line-height: 1.6;
	display: block;
	padding-bottom: clamp(2rem, 5vw, 4rem);
}

.okb *,
.okb *::before,
.okb *::after { box-sizing: border-box; }

.okb :where(a) { color: var(--okb-accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.okb a:hover { color: var(--okb-accent-strong); }
.okb :focus-visible { outline: 3px solid var(--okb-accent); outline-offset: 2px; border-radius: 6px; }
.okb :where(h1, h2, h3, h4) { font-family: var(--okb-font-head); color: var(--okb-ink); line-height: 1.2; letter-spacing: -.01em; }
.okb :where(ul, ol) { margin: 0; padding: 0; }
.okb .okb-icon { width: 1.25em; height: 1.25em; flex: none; }

.okb-sr {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.okb-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.okb-eyebrow {
	margin: 0 0 .5rem;
	font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--okb-accent);
}
.okb-eyebrow a { color: inherit; text-decoration: none; }
.okb-eyebrow a:hover { text-decoration: underline; }

/* ── Hero ─────────────────────────────────────────────── */

.okb-hero {
	position: relative;
	z-index: 2; /* Search suggestions may open over the next section. */
	isolation: isolate;
	color: var(--okb-hero-ink);
	background:
		radial-gradient(1100px 520px at 82% -10%, rgba(95, 185, 238, .16), transparent 60%),
		radial-gradient(700px 420px at -8% 22%, rgba(21, 96, 232, .18), transparent 55%),
		linear-gradient(180deg, var(--okb-hero) 0%, var(--okb-hero-2) 100%);
	padding: clamp(3rem, 8vw, 6rem) var(--okb-gap) clamp(3rem, 7vw, 5rem);
}
.okb-hero__glow {
	/* The glow is clipped here, not by the hero, so the hero never clips the suggestions. */
	position: absolute; inset: 0; z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.okb-hero__glow::before {
	content: ""; position: absolute; top: -40%; right: -10%;
	width: 60vmax; height: 60vmax;
	background: radial-gradient(closest-side, rgba(95, 185, 238, .14), transparent 70%);
}
.okb-hero__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.okb-hero .okb-eyebrow { color: var(--okb-ice); }
.okb-hero__title { margin: 0 0 .75rem; color: var(--okb-hero-ink); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; }
.okb-hero__text { margin: 0 auto 1.75rem; max-width: 620px; color: var(--okb-hero-ink-2); font-size: 1.125rem; }
.okb-hero--slim { padding-block: clamp(2rem, 5vw, 3.5rem); }
.okb-hero--slim .okb-hero__title { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
.okb-hero .okb-eyebrow a { color: var(--okb-ice); }

/* ── Search ───────────────────────────────────────────── */

.okb-search { position: relative; text-align: left; }
.okb-search__field {
	position: relative;
	display: flex; align-items: center; gap: .5rem;
	background: var(--okb-surface);
	border: 1px solid var(--okb-line-2);
	border-radius: 999px;
	padding: .375rem .375rem .375rem 1.125rem;
	box-shadow: var(--okb-shadow);
	transition: box-shadow var(--okb-dur) var(--okb-ease), border-color var(--okb-dur) var(--okb-ease);
}
.okb-search__field:focus-within { border-color: var(--okb-accent); box-shadow: 0 0 0 4px rgba(21, 96, 232, .18), var(--okb-shadow); }
.okb-search__icon { color: var(--okb-ink-3); }
.okb-search__input {
	flex: 1; min-width: 0;
	border: 0; outline: 0; background: transparent;
	font: inherit; font-size: 1.0625rem; color: var(--okb-ink);
	padding: .625rem 0;
}
.okb-search__input::placeholder { color: var(--okb-ink-3); opacity: 1; }
.okb-search__input::-webkit-search-cancel-button { cursor: pointer; }
.okb .okb-search__field:focus-within :focus-visible { outline: 0; }
.okb-search__submit {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
	min-height: 2.75rem; padding: 0 1.25rem;
	border: 0; border-radius: 999px;
	background: var(--okb-accent); color: #fff;
	font: inherit; font-weight: 600; cursor: pointer;
	transition: background-color var(--okb-dur) var(--okb-ease);
}
.okb-search__submit:hover { background: var(--okb-accent-strong); }
.okb-search--hero .okb-search__field { padding-left: 1.375rem; }
.okb-search--hero .okb-search__input { font-size: 1.125rem; padding-block: .875rem; }
.okb-search--compact { width: min(100%, 22rem); }
.okb-search--compact .okb-search__field { box-shadow: none; padding: .125rem .125rem .125rem .875rem; }
.okb-search--compact .okb-search__input { font-size: .9375rem; padding-block: .5rem; }
.okb-search--compact .okb-search__submit { min-height: 2.25rem; width: 2.25rem; padding: 0; }

/* Suggestions float over the page: opening them never moves anything. */
.okb-suggest {
	position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + .5rem);
	list-style: none; margin: 0; padding: .375rem;
	background: var(--okb-surface); color: var(--okb-ink);
	border: 1px solid var(--okb-line); border-radius: var(--okb-r);
	box-shadow: 0 24px 60px -20px rgba(8, 25, 45, .35), 0 2px 6px rgba(8, 25, 45, .06);
	max-height: min(70vh, 28rem); overflow-y: auto;
}
.okb-suggest[hidden] { display: none; }
.okb-suggest__item { display: block; padding: .625rem .75rem; border-radius: .625rem; cursor: pointer; text-decoration: none; color: inherit; }
.okb-suggest__item[aria-selected="true"], .okb-suggest__item:hover { background: var(--okb-accent-soft); }
.okb-suggest__title { display: block; font-weight: 600; color: var(--okb-ink); }
.okb-suggest__meta { display: block; font-size: .8125rem; color: var(--okb-ink-3); }
.okb-suggest__all { border-top: 1px solid var(--okb-line); margin-top: .25rem; padding-top: .625rem; font-weight: 600; color: var(--okb-accent); }
.okb-suggest__empty { padding: .75rem; color: var(--okb-ink-2); font-size: .9375rem; }
.okb mark { background: rgba(95, 185, 238, .28); color: inherit; border-radius: 3px; padding: 0 .1em; }

.okb-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-top: 1rem; }
.okb-filter { display: grid; gap: .25rem; font-size: .8125rem; color: var(--okb-hero-ink-2); }
.okb-filter select {
	min-height: 2.5rem; padding: 0 2rem 0 .875rem; border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .2); background-color: rgba(255, 255, 255, .08); color: var(--okb-hero-ink);
	font: inherit; font-size: .9375rem;
}
.okb-filter select option { color: #14283c; }
/* The quiet button's ink is !important for light surfaces; on the dark hero it must be light, or it disappears. */
.okb-filters .okb-button--quiet { color: var(--okb-hero-ink) !important; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); font-weight: 600; }
.okb-filters .okb-button--quiet:hover, .okb-filters .okb-button--quiet:focus-visible { color: var(--okb-hero-ink) !important; border-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .2); }
.okb-search:not(.okb-search--hero):not(.okb-search--compact) .okb-filters { max-width: 100%; }
@media (max-width: 599px) {
	.okb-filters { display: grid; grid-template-columns: 1fr; }
	.okb-filter select, .okb-filters .okb-button--quiet { width: 100%; }
}

.okb-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.okb-chips ul { display: contents; list-style: none; }
.okb-chips__label { color: var(--okb-hero-ink-2); font-size: .875rem; }
.okb-chip {
	display: inline-block; padding: .3125rem .8125rem; border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06);
	color: var(--okb-hero-ink) !important; text-decoration: none; font-size: .875rem;
	transition: background-color var(--okb-dur) var(--okb-ease), border-color var(--okb-dur) var(--okb-ease);
}
.okb-chip:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); }

/* ── Sections and cards ───────────────────────────────── */

.okb-section, .okb-results-wrap, .okb-shell, .okb-topbar { width: min(100% - 2 * var(--okb-gap), var(--okb-max)); margin-inline: auto; }
.okb-section { padding-top: clamp(2.5rem, 6vw, 4rem); }
.okb-section--tint { position: relative; }
.okb-section--tint::before {
	content: ""; position: absolute; z-index: -1; inset: 1.5rem calc(50% - 50vw) -2rem;
	background: var(--okb-mist);
}
.okb-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.okb-section__head h2 { margin: 0; font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.okb-more { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; text-decoration: none; }
.okb-more .okb-icon { width: 1rem; height: 1rem; transition: translate var(--okb-dur) var(--okb-ease); }
.okb-more:hover .okb-icon { translate: 3px 0; }

.okb-grid { display: grid; gap: 1.375rem; list-style: none; }
.okb-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.okb-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); margin-bottom: 2rem; gap: 1rem; }
.okb-grid--shortcuts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .875rem; }
.okb-grid > li { display: flex; }

.okb-card,
.okb-shortcut,
.okb-product {
	position: relative;
	display: flex; flex-direction: column; gap: .375rem; width: 100%;
	padding: 1.375rem 1.375rem 1.25rem;
	border: 1px solid var(--okb-line); border-radius: var(--okb-r-lg);
	background: var(--okb-surface);
	box-shadow: var(--okb-shadow);
	color: var(--okb-ink) !important; text-decoration: none;
	overflow-anchor: none;
	transition: translate var(--okb-dur) var(--okb-ease), box-shadow var(--okb-dur) var(--okb-ease), border-color var(--okb-dur) var(--okb-ease);
}
/* While lifted, the hit box reaches back down to where the card was. */
.okb-card::after, .okb-shortcut::after, .okb-product::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0; }
.okb-card__icon {
	display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: .5rem;
	border-radius: .875rem; background: var(--okb-accent-soft); color: var(--okb-accent);
}
.okb-card__icon .okb-icon { width: 1.375rem; height: 1.375rem; }
.okb-card__title { font-family: var(--okb-font-head); font-weight: 700; font-size: 1.125rem; line-height: 1.3; }
.okb-card__text { color: var(--okb-ink-2); font-size: .9375rem; }
.okb-card__count { margin-top: auto; padding-top: .5rem; color: var(--okb-ink-3); font-size: .8125rem; font-weight: 600; }

.okb-shortcut { flex-direction: row; align-items: center; gap: .75rem; padding: 1rem 1.125rem; border-radius: var(--okb-r); font-weight: 600; line-height: 1.35; }
.okb-shortcut .okb-icon { color: var(--okb-accent); }

@media (hover: hover) and (pointer: fine) {
	.okb-card:hover, .okb-shortcut:hover, .okb-product:hover {
		translate: 0 var(--okb-lift);
		border-color: var(--okb-line-2);
		box-shadow: var(--okb-shadow-on);
	}
	.okb-card:hover::after, .okb-shortcut:hover::after, .okb-product:hover::after { height: calc(-1 * var(--okb-lift) + 1px); }
}

.okb-columns { display: grid; gap: 1.375rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.okb-panel { padding: 1.5rem; border: 1px solid var(--okb-line); border-radius: var(--okb-r-lg); background: var(--okb-surface); box-shadow: var(--okb-shadow); }
.okb-panel__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-size: 1.25rem; }
.okb-panel__title .okb-icon { color: var(--okb-accent); }
.okb-links { list-style: none; display: grid; }
.okb-links li + li { border-top: 1px solid var(--okb-line); }
.okb-links a { display: block; padding: .625rem 0; font-weight: 500; text-decoration: none; color: var(--okb-ink); }
.okb-links a:hover { color: var(--okb-accent); }
.okb-panel .okb-more { margin-top: .75rem; }

.okb-list { list-style: none; display: grid; gap: .625rem; }
.okb-item__link {
	display: grid; gap: .125rem; padding: 1rem 1.125rem;
	border: 1px solid var(--okb-line); border-radius: var(--okb-r);
	background: var(--okb-surface); color: var(--okb-ink) !important; text-decoration: none;
	transition: border-color var(--okb-dur) var(--okb-ease), background-color var(--okb-dur) var(--okb-ease);
}
.okb-item__link:hover { border-color: var(--okb-accent); background: var(--okb-mist); }
.okb-item__title { font-weight: 600; }
.okb-item__text { color: var(--okb-ink-2); font-size: .9375rem; }
.okb-item__meta { color: var(--okb-ink-3); font-size: .8125rem; }
.okb-list--compact .okb-item__link { padding: .75rem 1rem; }

/* ── Article layout ───────────────────────────────────── */

.okb-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem 1rem; border-bottom: 1px solid var(--okb-line); }
.okb-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; gap: .25rem; font-size: .875rem; color: var(--okb-ink-3); }
.okb-crumbs li + li::before { content: "/"; margin-right: .375rem; color: var(--okb-line-2); }
.okb-crumbs a { color: var(--okb-ink-2); text-decoration: none; }
.okb-crumbs a:hover { color: var(--okb-accent); text-decoration: underline; }
.okb-crumbs [aria-current] { color: var(--okb-ink); font-weight: 500; }

.okb-shell { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); padding-top: 2rem; align-items: start; }
@media (min-width: 960px) {
	.okb-shell { grid-template-columns: 15rem minmax(0, 1fr); }
}
@media (min-width: 1200px) {
	.okb-shell--toc { grid-template-columns: 15rem minmax(0, 1fr) 13.5rem; }
}

.okb-nav { display: none; position: sticky; top: var(--okb-sticky-top); max-height: calc(100vh - var(--okb-sticky-top) - 1rem); overflow-y: auto; overscroll-behavior: contain; padding-right: .5rem; font-size: .9375rem; }
@media (min-width: 960px) {
	.okb-nav { display: block; }
	.okb-nav-mobile { display: none; }
}
.okb-nav__title, .okb-toc__title { margin: 0 0 .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--okb-ink-3); }
.okb-nav ul, .okb-nav-mobile ul { list-style: none; }
.okb-nav ul ul, .okb-nav-mobile ul ul { margin: .125rem 0 .5rem .75rem; padding-left: .625rem; border-left: 1px solid var(--okb-line); }
.okb-nav a, .okb-nav-mobile a { display: block; padding: .3125rem .5rem; border-radius: .5rem; color: var(--okb-ink-2); text-decoration: none; line-height: 1.4; }
.okb-nav a:hover, .okb-nav-mobile a:hover { color: var(--okb-ink); background: var(--okb-mist); }
.okb-nav a[aria-current], .okb-nav-mobile a[aria-current] { color: var(--okb-accent); background: var(--okb-accent-soft); font-weight: 600; }
.okb-nav .is-open > a { color: var(--okb-ink); font-weight: 600; }
.okb-nav__articles a { font-size: .875rem; }

.okb-nav-mobile, .okb-toc-mobile {
	border: 1px solid var(--okb-line); border-radius: var(--okb-r); background: var(--okb-mist);
}
.okb-nav-mobile > summary, .okb-toc-mobile > summary {
	display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; cursor: pointer; font-weight: 600; list-style: none;
}
.okb-nav-mobile > summary::-webkit-details-marker, .okb-toc-mobile > summary::-webkit-details-marker { display: none; }
.okb-nav-mobile > summary::after, .okb-toc-mobile > summary::after { content: "+"; margin-left: auto; font-weight: 400; }
.okb-nav-mobile[open] > summary::after, .okb-toc-mobile[open] > summary::after { content: "−"; }
.okb-nav-mobile > nav, .okb-toc-mobile > ol { padding: 0 .75rem .875rem; }
.okb-toc-mobile { margin: 0 0 1.5rem; }
@media (min-width: 1200px) { .okb-toc-mobile { display: none; } }

.okb-toc { display: none; position: sticky; top: var(--okb-sticky-top); font-size: .875rem; }
@media (min-width: 1200px) { .okb-toc { display: block; } }
.okb-toc__list { list-style: none; border-left: 1px solid var(--okb-line); }
.okb-toc__list a { display: block; margin-left: -1px; padding: .3125rem .75rem; border-left: 2px solid transparent; color: var(--okb-ink-2); text-decoration: none; line-height: 1.4; }
.okb-toc__list a:hover { color: var(--okb-ink); }
.okb-toc__list a[aria-current="true"] { color: var(--okb-accent); border-left-color: var(--okb-accent); font-weight: 600; }
.okb-toc__l3 a { padding-left: 1.5rem; }

.okb-article { min-width: 0; max-width: 46rem; }
.okb-article__head { margin-bottom: 1.5rem; }
.okb-article__title { margin: 0 0 .75rem; font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 700; }
.okb-article__summary { margin: 0 0 1rem; font-size: 1.125rem; color: var(--okb-ink-2); }
.okb-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; color: var(--okb-ink-3); font-size: .875rem; }
.okb-meta li { display: inline-flex; align-items: center; gap: .375rem; }
.okb-meta .okb-icon { width: 1rem; height: 1rem; }
.okb-verified { color: var(--okb-ok); font-weight: 600; }
.okb-level { padding: .125rem .5rem; border-radius: 999px; background: var(--okb-frost); color: var(--okb-ink-2); font-weight: 600; font-size: .75rem; letter-spacing: .02em; }
.okb-applies { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: .875rem 0 0; font-size: .875rem; color: var(--okb-ink-3); }
.okb-tag { display: inline-block; padding: .125rem .625rem; border-radius: 999px; border: 1px solid var(--okb-line-2); color: var(--okb-ink-2) !important; text-decoration: none; font-size: .8125rem; font-weight: 500; }
.okb-tag:hover { border-color: var(--okb-accent); color: var(--okb-accent) !important; }
.okb-applies__versions { color: var(--okb-ink-3); }

.okb-variants { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.5rem; padding: .5rem; border-radius: var(--okb-r); background: var(--okb-mist); border: 1px solid var(--okb-line); }
.okb-variants__label { padding: 0 .5rem; font-size: .875rem; font-weight: 600; color: var(--okb-ink-2); }
.okb-variants ul { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; }
.okb-variants a, .okb-variants [aria-current] { display: inline-block; padding: .375rem .875rem; border-radius: 999px; font-size: .875rem; font-weight: 600; text-decoration: none; }
.okb-variants a { color: var(--okb-ink-2); }
.okb-variants a:hover { background: var(--okb-surface); color: var(--okb-ink); }
.okb-variants [aria-current] { background: var(--okb-surface); color: var(--okb-accent); box-shadow: 0 1px 3px rgba(8, 25, 45, .1); }

.okb-before { margin: 0 0 1.75rem; padding: 1.125rem 1.25rem; border-radius: var(--okb-r); background: var(--okb-mist); border: 1px solid var(--okb-line); }
.okb-before__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1rem; }
.okb-before__title .okb-icon { color: var(--okb-accent); }
.okb-before ul { padding-left: 1.25rem; color: var(--okb-ink-2); }

/* ── Article content ──────────────────────────────────── */

.okb-content { font-size: 1.0625rem; line-height: 1.75; }
.okb-content > * { margin-block: 0 1.25rem; }
.okb-content h2 { margin-top: 2.5rem; font-size: 1.5rem; scroll-margin-top: calc(var(--okb-sticky-top) + 1rem); }
.okb-content h3 { margin-top: 2rem; font-size: 1.1875rem; scroll-margin-top: calc(var(--okb-sticky-top) + 1rem); }
.okb-content ul, .okb-content ol { padding-left: 1.5rem; }
.okb-content li + li { margin-top: .375rem; }
.okb-content img { max-width: 100%; height: auto; border-radius: .75rem; }
.okb-content figure { margin-inline: 0; }
.okb-content .okb-shot img, .okb-steps img {
	display: block; margin: .75rem 0 .25rem; border: 1px solid var(--okb-line); border-radius: .75rem;
	box-shadow: 0 1px 2px rgba(8, 25, 45, .06), 0 12px 32px -18px rgba(8, 25, 45, .25);
	background: var(--okb-surface);
}
.okb-zoomable { cursor: zoom-in; }
.okb-content code { font-family: var(--okb-font-mono); font-size: .9em; padding: .125em .375em; border-radius: .375rem; background: var(--okb-frost); color: var(--okb-ink); }
.okb-content kbd { font-family: var(--okb-font-mono); font-size: .85em; padding: .1em .45em; border: 1px solid var(--okb-line-2); border-bottom-width: 2px; border-radius: .375rem; background: var(--okb-surface); }
.okb-content table { width: 100%; border-collapse: collapse; font-size: .9375rem; display: block; overflow-x: auto; }
.okb-content th, .okb-content td { padding: .625rem .75rem; border-bottom: 1px solid var(--okb-line); text-align: left; vertical-align: top; }
.okb-content th { background: var(--okb-mist); font-weight: 600; }

/* Numbered steps */
.okb-content ol.okb-steps { list-style: none; padding: 0; }
.okb-steps > li { position: relative; padding: 0 0 1.25rem 3rem; margin: 0 !important; }
.okb-steps > li::before {
	content: counter(list-item);
	position: absolute; left: 0; top: .1rem;
	display: grid; place-items: center; width: 2rem; height: 2rem;
	border-radius: 50%; background: var(--okb-accent-soft); color: var(--okb-accent);
	font-family: var(--okb-font-head); font-weight: 700; font-size: .9375rem;
}
.okb-steps > li::after { content: ""; position: absolute; left: 1rem; top: 2.5rem; bottom: .375rem; width: 1px; background: var(--okb-line); }
.okb-steps > li:last-child::after { display: none; }

/* Code with copy */
.okb-content pre {
	position: relative; overflow-x: auto;
	padding: 1rem 1.125rem; border-radius: var(--okb-r);
	background: #0c1d2e; color: #e6eef6;
	font-family: var(--okb-font-mono); font-size: .875rem; line-height: 1.65;
}
.okb-content pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.okb-code { position: relative; }
.okb-code pre { padding-right: 5.5rem; }
.okb-copy {
	position: absolute; top: .5rem; right: .5rem;
	display: inline-flex; align-items: center; gap: .25rem;
	padding: .25rem .625rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .08); color: #e6eef6; font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer;
}
.okb-copy:hover { background: rgba(255, 255, 255, .16); }
.okb-copy:focus-visible { outline-color: var(--okb-ice) !important; }
.okb-tok-c { color: #8fa6bb; font-style: italic; }
.okb-tok-s { color: #a5e3a1; }
.okb-tok-k { color: #8cc8ff; }
.okb-tok-n { color: #f5c07a; }
.okb-tok-v { color: #f0a4c6; }

/* Callouts */
.okb-callout { margin: 0 0 1.5rem; padding: 1rem 1.125rem; border-radius: var(--okb-r); border: 1px solid; border-left-width: 4px; }
.okb-callout__label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; font-weight: 700; font-size: .9375rem; }
.okb-callout__body > :last-child { margin-bottom: 0; }
.okb-callout__body > * { margin-block: 0 .75rem; }
.okb-callout--note { background: #eef5ff; border-color: #c4dafb; border-left-color: var(--okb-accent); }
.okb-callout--note .okb-callout__label { color: var(--okb-accent-strong); }
.okb-callout--tip { background: #edf9f3; border-color: #bfe6d3; border-left-color: var(--okb-ok); }
.okb-callout--tip .okb-callout__label { color: var(--okb-ok); }
.okb-callout--warning { background: #fff7e8; border-color: #f2d9a6; border-left-color: #c67f10; }
.okb-callout--warning .okb-callout__label { color: var(--okb-warn); }
.okb-callout--danger { background: #fdf0ef; border-color: #f4c7c3; border-left-color: var(--okb-danger); }
.okb-callout--danger .okb-callout__label { color: var(--okb-danger); }

/* Platform tabs */
.okb-tabs { margin: 0 0 1.75rem; }
.okb-tabs__label { margin: 0 0 .5rem; font-weight: 600; color: var(--okb-ink-2); font-size: .9375rem; }
.okb-tabs__list { display: flex; flex-wrap: wrap; gap: .25rem; padding: .3125rem; border-radius: var(--okb-r); background: var(--okb-frost); }
.okb-tabs__list[hidden] { display: none; }
.okb-tabs__list [role="tab"] {
	padding: .5rem .9375rem; border: 0; border-radius: .75rem; background: transparent; color: var(--okb-ink-2);
	font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
	transition: background-color var(--okb-dur) var(--okb-ease), color var(--okb-dur) var(--okb-ease), box-shadow var(--okb-dur) var(--okb-ease);
}
.okb-tabs__list [role="tab"]:hover { color: var(--okb-ink); }
.okb-tabs__list [role="tab"][aria-selected="true"] { background: var(--okb-surface); color: var(--okb-accent); box-shadow: 0 1px 3px rgba(8, 25, 45, .12); }
.okb-tabs__panel { padding-top: 1.25rem; }
.okb-tabs__panel > :last-child { margin-bottom: 0; }
.okb-tabs.is-enhanced .okb-tabs__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.okb-tabs.is-enhanced .okb-tabs__panel[hidden] { display: none; }

/* FAQ */
.okb-faq { margin-top: 2.5rem; }
.okb-faq h2 { font-size: 1.5rem; margin: 0 0 1rem; }
.okb-faq__item { border-bottom: 1px solid var(--okb-line); }
.okb-faq__item > summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; font-weight: 600; list-style: none; }
.okb-faq__item > summary::-webkit-details-marker { display: none; }
.okb-faq__item > summary::after { content: "+"; color: var(--okb-accent); font-size: 1.25rem; line-height: 1; }
.okb-faq__item[open] > summary::after { content: "−"; }
.okb-faq__answer { padding: 0 0 1rem; color: var(--okb-ink-2); }

/* Related services */
.okb-products { display: grid; gap: .875rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.okb-product { padding: 1.125rem 1.25rem; gap: .5rem; }
.okb-product__text { color: var(--okb-ink-2); font-size: .9375rem; }
.okb-product__label { display: inline-flex; align-items: center; gap: .375rem; font-weight: 700; color: var(--okb-accent); }
.okb-product__label .okb-icon { width: 1rem; height: 1rem; transition: translate var(--okb-dur) var(--okb-ease); }
.okb-product:hover .okb-product__label .okb-icon { translate: 3px 0; }

/* Feedback */
.okb-feedback { margin-top: 2.5rem; padding: 1.375rem 1.5rem; border-radius: var(--okb-r-lg); border: 1px solid var(--okb-line); background: var(--okb-mist); }
.okb-feedback__vote { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.okb-feedback__title { margin: 0; font-size: 1.0625rem; }
.okb-feedback__buttons { display: flex; gap: .5rem; }
.okb-feedback__more { flex-basis: 100%; display: grid; gap: .5rem; }
.okb-feedback__more[hidden] { display: none; }
.okb-feedback textarea, .okb-request textarea {
	width: 100%; padding: .75rem .875rem; border-radius: .75rem; border: 1px solid var(--okb-line-2);
	background: var(--okb-surface); color: var(--okb-ink); font: inherit; resize: vertical;
}
.okb-feedback label, .okb-request label { font-weight: 600; font-size: .9375rem; }
.okb-feedback__status { flex-basis: 100%; margin: 0; font-weight: 600; color: var(--okb-ok); }
.okb-feedback__status:empty { display: none; }
.okb-feedback__status.is-error { color: var(--okb-danger); }
.okb-feedback__report { margin-top: 1rem; border-top: 1px solid var(--okb-line); padding-top: .875rem; }
.okb-feedback__report > summary { cursor: pointer; color: var(--okb-ink-2); font-size: .9375rem; }
.okb-feedback__report form { display: grid; gap: .5rem; margin-top: .875rem; }
.okb-feedback fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.okb-feedback fieldset label { font-weight: 500; }
.okb-hint { margin: 0; font-size: .8125rem; color: var(--okb-ink-3); }

.okb-related { margin-top: 2.5rem; }
.okb-related h2 { font-size: 1.25rem; margin: 0 0 1rem; }

/* Buttons */
.okb-button {
	display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
	min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; border: 1px solid var(--okb-accent);
	background: var(--okb-accent); color: #fff !important; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
	transition: background-color var(--okb-dur) var(--okb-ease), border-color var(--okb-dur) var(--okb-ease), color var(--okb-dur) var(--okb-ease);
	justify-self: start;
}
.okb-button:hover { background: var(--okb-accent-strong); border-color: var(--okb-accent-strong); }
.okb-button--quiet { background: var(--okb-surface); color: var(--okb-ink) !important; border-color: var(--okb-line-2); min-height: 2.5rem; padding: 0 1.125rem; }
.okb-button--quiet:hover { background: var(--okb-surface); border-color: var(--okb-accent); color: var(--okb-accent) !important; }
.okb-button--quiet[aria-pressed="true"] { border-color: var(--okb-accent); color: var(--okb-accent) !important; background: var(--okb-accent-soft); }
.okb-button--ghost { background: transparent; color: var(--okb-hero-ink) !important; border-color: rgba(255, 255, 255, .3); }
.okb-button--ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
.okb-button--primary { box-shadow: 0 10px 24px -12px rgba(21, 96, 232, .7); }

/* Term pages */
.okb-term__head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
.okb-term__icon { display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--okb-accent-soft); color: var(--okb-accent); }
.okb-term__icon .okb-icon { width: 1.625rem; height: 1.625rem; }
.okb-term__count { margin: 0 0 .75rem; font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--okb-ink-3); }
.okb-empty { color: var(--okb-ink-2); }

/* Search results */
.okb-results-wrap { max-width: 52rem; padding-top: 2rem; }
.okb-results__count { margin: 0 0 1rem; color: var(--okb-ink-3); font-size: .9375rem; }
.okb-note { margin: 0 0 1rem; padding: .625rem .875rem; border-radius: .75rem; background: var(--okb-mist); color: var(--okb-ink-2); font-size: .9375rem; }
.okb-results { list-style: none; display: grid; gap: .25rem; }
.okb-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.okb-result {
	position: relative; padding: 1.125rem 1.375rem;
	background: var(--okb-surface); border: 1px solid var(--okb-line); border-radius: var(--okb-r-md, 1.125rem);
	box-shadow: var(--okb-shadow);
	transition: translate var(--okb-dur) var(--okb-ease), box-shadow var(--okb-dur) var(--okb-ease), border-color var(--okb-dur) var(--okb-ease);
}
.okb-result:focus-within { border-color: var(--okb-accent); }
@media (hover: hover) and (pointer: fine) {
	.okb-result:hover { translate: 0 var(--okb-lift); box-shadow: var(--okb-shadow-on); border-color: var(--okb-line-2); }
}
@media (max-width: 599px) { .okb-result { padding: 1rem; } }
.okb-result__cat { margin: 0 0 .125rem; font-size: .8125rem; font-weight: 600; color: var(--okb-ink-3); }
.okb-result__title { margin: 0 0 .25rem; font-size: 1.1875rem; }
.okb-result__title a { text-decoration: none; }
.okb-result__title a:hover { text-decoration: underline; }
/* The whole card is the link target; the title stays the accessible name. */
.okb-result__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.okb-results__count { color: var(--okb-ink-3); font-size: .875rem; margin: 0 0 .875rem; }
.okb-result__excerpt { margin: 0; color: var(--okb-ink-2); }
.okb-noresults { padding: 1.5rem; border-radius: var(--okb-r-lg); background: var(--okb-mist); border: 1px solid var(--okb-line); }
.okb-noresults h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.okb-request { margin-top: 1.5rem; }
.okb-request form { display: grid; gap: .5rem; }
.okb-request h2 { margin: 0 0 .25rem; font-size: 1.125rem; }

/* Support band */
.okb-support { width: min(100% - 2 * var(--okb-gap), var(--okb-max)); margin: clamp(3rem, 7vw, 5rem) auto 0; padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--okb-r-lg); color: var(--okb-hero-ink); background: radial-gradient(600px 300px at 90% 0%, rgba(95, 185, 238, .18), transparent 60%), linear-gradient(135deg, var(--okb-hero), var(--okb-hero-2)); }
.okb-support__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.okb-support__text { display: flex; align-items: flex-start; gap: 1rem; }
.okb-support__icon { width: 2.25rem !important; height: 2.25rem !important; color: var(--okb-ice); }
.okb-support h2 { margin: 0 0 .25rem; color: var(--okb-hero-ink); font-size: 1.375rem; }
.okb-support p { margin: 0; color: var(--okb-hero-ink-2); }
.okb-support__actions { display: flex; flex-wrap: wrap; gap: .625rem; }
.okb-support__request { margin-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 1rem; }
.okb-support__request > summary { cursor: pointer; color: var(--okb-hero-ink); font-weight: 600; }
.okb-support .okb-request { margin-top: 1rem; padding: 1.25rem; border-radius: var(--okb-r); background: var(--okb-surface); color: var(--okb-ink); }
.okb-support .okb-request h2 { color: var(--okb-ink); }

/* Lightbox */
.okb-lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 94vh; overflow: visible; }
.okb-lightbox::backdrop { background: rgba(8, 20, 32, .82); backdrop-filter: blur(3px); }
.okb-lightbox img { display: block; max-width: min(96vw, 1400px); max-height: 88vh; width: auto; height: auto; border-radius: .75rem; background: #fff; }
.okb-lightbox__close {
	position: absolute; top: -.75rem; right: -.75rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
	border: 0; background: #fff; color: #14283c; font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.okb-lightbox__caption { margin: .5rem 0 0; color: #e6eef6; text-align: center; font-size: .875rem; }

/* Search block outside the help center */
.okb-search-block { background: transparent; padding: 0; }

/* Entrance: a gentle fade for the hero contents only (no movement of other content). */
@media (prefers-reduced-motion: no-preference) {
	.okb-hero__inner { animation: okb-in .6s var(--okb-ease) both; }
	@keyframes okb-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
	.okb *, .okb *::before, .okb *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.okb-card:hover, .okb-shortcut:hover, .okb-product:hover { translate: none; }
}

/* ── Dark scheme (opt-in in settings: dark, or auto) ─── */
.okb--scheme-dark {
	--okb-ink: #e7eef5; --okb-ink-2: #b4c4d4; --okb-ink-3: #8fa3b8;
	--okb-bg: #0b1622; --okb-surface: #111f2e; --okb-mist: #0f1c2a; --okb-frost: #172739;
	--okb-line: #1f3247; --okb-line-2: #2a4058; --okb-accent: #5b9dff; --okb-accent-strong: #8ab8ff; --okb-accent-soft: rgba(91, 157, 255, .14);
	--okb-ok: #46c08f; --okb-warn: #f0b45c; --okb-danger: #ff8a80;
	--okb-shadow: 0 1px 2px rgba(0, 0, 0, .4); --okb-shadow-on: 0 18px 40px -20px rgba(0, 0, 0, .7);
}
@media (prefers-color-scheme: dark) {
	.okb--scheme-auto {
		--okb-ink: #e7eef5; --okb-ink-2: #b4c4d4; --okb-ink-3: #8fa3b8;
		--okb-bg: #0b1622; --okb-surface: #111f2e; --okb-mist: #0f1c2a; --okb-frost: #172739;
		--okb-line: #1f3247; --okb-line-2: #2a4058; --okb-accent: #5b9dff; --okb-accent-strong: #8ab8ff; --okb-accent-soft: rgba(91, 157, 255, .14);
		--okb-ok: #46c08f; --okb-warn: #f0b45c; --okb-danger: #ff8a80;
		--okb-shadow: 0 1px 2px rgba(0, 0, 0, .4); --okb-shadow-on: 0 18px 40px -20px rgba(0, 0, 0, .7);
	}
}
.okb--scheme-dark .okb-callout, .okb--scheme-auto .okb-callout { background: var(--okb-mist); }
.okb--scheme-dark .okb-chip, .okb--scheme-dark .okb-filter select option { color: inherit; }

@media print {
	.okb-nav, .okb-nav-mobile, .okb-toc, .okb-toc-mobile, .okb-topbar .okb-search, .okb-feedback, .okb-support, .okb-products, .okb-copy, .okb-variants { display: none !important; }
	.okb-shell { display: block; }
	.okb-tabs__list { display: none !important; }
	.okb-tabs__panel[hidden] { display: block !important; }
}

.okb .okb-confirm { background: #fff3bf; color: #5c4400; padding: 0 .25em; border-radius: 3px; font-weight: 600; }

/* Staging preview (reviewers only; see Front\Preview). */
.okb-preview-bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
	max-width: var(--okb-max); margin: 0 auto; padding: .625rem var(--okb-gap);
	font-size: .875rem; color: var(--okb-ink-2);
	background: #fff8e6; border-bottom: 1px solid #f1d9a6;
}
.okb-preview-bar--off a { font-weight: 600; color: var(--okb-accent); }
.okb-empty { text-align: center; padding-block: 2.5rem; }
.okb-badge {
	display: inline-block; vertical-align: .15em;
	padding: .1rem .5rem; border-radius: 999px;
	font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
}
.okb-badge--draft { color: var(--okb-warn); background: #fdf0d2; box-shadow: inset 0 0 0 1px #f1d9a6; }
.okb-article__title .okb-badge { font-family: var(--okb-font); margin-left: .5rem; }