/* Kernaim Help Center theme for the Chatwoot portal (help.kernaim.to).
 * Injected by nginx (sub_filter) into every /hc/ page, never part of the Chatwoot image.
 * Source of truth: infra/chatwoot/helpcenter/theme/hc.css in the ka-web repo. Deploy with deploy.sh.
 * Palette + type follow apps/main-site (tailwind tokens + product pages): ground #14141a,
 * surface #1d1c25, raised #22212e, line #2c2b35, body text #B5BAC5, accent #FF6600, ok #32E17E.
 * Rules are additive: if a Chatwoot update renames a class, that element falls back to the
 * stock look. Nothing here can break page logic. */

@font-face { font-family: 'ClashDisplay'; src: url('/kn/fonts/ClashDisplay-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'ClashDisplay'; src: url('/kn/fonts/ClashDisplay-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/kn/fonts/Satoshi-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/kn/fonts/Satoshi-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/kn/fonts/Satoshi-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
	--kn-ground: #f6f4f0;
	--kn-surface: #ffffff;
	--kn-raised: #f0ede8;
	--kn-inset: #ebe8e2;
	--kn-line: #e2ded7;
	--kn-line-strong: #cfcac2;
	--kn-text: #1b1a20;
	--kn-body: #45444d;
	--kn-muted: #6b6f7a;
	--kn-accent: #e85d00;
	--kn-accent-hover: #ff6600;
	--kn-accent-ink: #b84800;
	--kn-accent-soft: rgba(232, 93, 0, 0.09);
	--kn-accent-line: rgba(232, 93, 0, 0.4);
	--kn-ok: #0f9d63;
	--kn-ok-soft: rgba(15, 157, 99, 0.09);
	--kn-danger: #d6284a;
	--kn-danger-soft: rgba(214, 40, 74, 0.09);
	--kn-shadow: 0 1px 2px rgba(20, 18, 30, 0.06), 0 10px 30px rgba(20, 18, 30, 0.07);
	--kn-glow: 0 0 0 rgba(0, 0, 0, 0);
	--kn-sans: 'Satoshi', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--kn-display: 'ClashDisplay', 'Satoshi', 'Inter', system-ui, sans-serif;
	--kn-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
}
html.dark {
	--kn-ground: #14141a;
	--kn-surface: #1d1c25;
	--kn-raised: #22212e;
	--kn-inset: #101015;
	--kn-line: #2c2b35;
	--kn-line-strong: #3a3947;
	--kn-text: #ffffff;
	--kn-body: #b5bac5;
	--kn-muted: #8c94a2;
	--kn-accent: #ff6600;
	--kn-accent-hover: #ff8533;
	--kn-accent-ink: #ff8a3d;
	--kn-accent-soft: rgba(255, 102, 0, 0.12);
	--kn-accent-line: rgba(255, 102, 0, 0.45);
	--kn-ok: #32e17e;
	--kn-ok-soft: rgba(50, 225, 126, 0.1);
	--kn-danger: #ff5c72;
	--kn-danger-soft: rgba(255, 92, 114, 0.1);
	--kn-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
	--kn-glow: 0 0 40px rgba(255, 102, 0, 0.18);
}

/* ---------- Frame: fonts, ground, header, hero ---------- */
html { background: var(--kn-ground); }
body, body.font-default, #portal, .main-content { font-family: var(--kn-sans) !important; background: var(--kn-ground) !important; color: var(--kn-body); }
.main-content { min-height: 100vh; }
.main-content > header { background: var(--kn-surface) !important; border-bottom: 1px solid var(--kn-line); box-shadow: none !important; }
.main-content > header a span { font-family: var(--kn-display); font-weight: 600; letter-spacing: -0.01em; color: var(--kn-text) !important; }
.main-content > header img { height: 2.25rem; }
/* The uploaded logo is a white wordmark on transparent: give it a dark chip on the light header. */
html.light .main-content > header img { background: #14141a; border-radius: 8px; padding: 0.3rem 0.45rem; box-sizing: content-box; height: 1.65rem; }
#appearance-dropdown, .main-content > header .fixed > div { background: var(--kn-surface) !important; border-color: var(--kn-line) !important; }
.main-content > header .desktop-theme-button { border-color: var(--kn-line) !important; color: var(--kn-body) !important; }
.main-content > header .desktop-theme-button:hover { background: var(--kn-raised) !important; }
.main-content > header .mobile-theme-button, .main-content > header label { color: var(--kn-body) !important; }

#portal-bg { background: var(--kn-ground) !important; box-shadow: none !important; position: relative; }
#portal-bg-gradient { background: radial-gradient(70% 120% at 12% 0%, var(--kn-accent-soft), transparent 60%) !important; }
#portal-bg h1 { font-family: var(--kn-display); font-weight: 600; letter-spacing: -0.02em; color: var(--kn-text) !important; text-wrap: balance; }
#portal-bg p, #portal-bg span { color: var(--kn-body); }
#portal-bg a { color: var(--kn-muted) !important; text-decoration: none; }
#portal-bg a:hover { color: var(--kn-accent) !important; }
#portal-bg .text-4xl { line-height: 1; }

/* Search. Chatwoot renders form > div (the bar: icon + transparent input + kbd hint) and puts a ring on the
 * div when focused. The div is the one and only bar; the input stays invisible inside it. */
#search-wrap form > div {
	background: var(--kn-surface) !important; color: var(--kn-muted) !important;
	border: 1px solid var(--kn-line-strong) !important; border-radius: 14px !important;
	box-shadow: var(--kn-shadow) !important; padding: 0.3rem 0.9rem !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#search-wrap form > div:focus-within { border-color: var(--kn-accent) !important; box-shadow: 0 0 0 3px var(--kn-accent-soft), var(--kn-shadow) !important; }
#search-wrap form > div > svg { color: var(--kn-accent); flex: none; }
#search-wrap input {
	background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important;
	color: var(--kn-text) !important; font-family: var(--kn-sans); font-size: 1rem; padding: 0.6rem 0.5rem !important; border-radius: 0 !important;
}
#search-wrap input:focus { box-shadow: none !important; outline: none !important; }
#search-wrap input::placeholder { color: var(--kn-muted); }
#search-wrap kbd { background: var(--kn-raised) !important; border-color: var(--kn-line) !important; color: var(--kn-muted) !important; font-family: var(--kn-mono) !important; border-radius: 6px; }
#search-wrap .absolute > div { background: var(--kn-surface) !important; border: 1px solid var(--kn-line) !important; border-radius: 14px !important; box-shadow: var(--kn-shadow) !important; }
#search-wrap [role='listbox'] li { border-radius: 10px; }
#search-wrap [role='listbox'] li:hover, #search-wrap [role='listbox'] li[class*='bg-n-alpha'] { background: var(--kn-raised) !important; }
#search-wrap [role='listbox'] span, #search-wrap .absolute > div div { color: var(--kn-body) !important; }
#search-wrap [role='listbox'] span.text-base { color: var(--kn-text) !important; font-weight: 600; }
#search-wrap [role='listbox'] svg, #search-wrap [role='listbox'] [class*='i-lucide'] { color: var(--kn-accent) !important; }

/* ---------- Home + category pages: cards ---------- */
#category-block, .main-content section > div.border { background: var(--kn-surface) !important; border: 1px solid var(--kn-line) !important; border-radius: 16px !important; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
#category-block:hover { border-color: var(--kn-accent-line) !important; box-shadow: var(--kn-shadow), var(--kn-glow); }
#category-block h3, .main-content section h3 { font-family: var(--kn-display); font-weight: 600; letter-spacing: -0.01em; color: var(--kn-text) !important; }
#category-block h3 a, .main-content section h3 a { color: inherit !important; text-decoration: none; }
#category-block h3 a:hover { color: var(--kn-accent) !important; }
#category-block > div > div > span, #category-block p { color: var(--kn-muted) !important; }
#category-item { color: var(--kn-body) !important; border-radius: 10px !important; transition: background 0.15s ease, color 0.15s ease; }
a:hover > #category-item { background: var(--kn-raised) !important; color: var(--kn-text) !important; }
#category-item svg, #category-item span { color: var(--kn-accent); }
#category-block > a { border-radius: 16px; transition: background 0.15s ease; }
#category-block > a:hover { background: var(--kn-raised) !important; }
#category-block > a h3 { color: var(--kn-text) !important; }
#category-block > a p, #category-block > a span { color: var(--kn-muted) !important; }
#category-block > a:hover h3 { color: var(--kn-accent) !important; }

/* ---------- Article page: hero meta, layout ---------- */
#portal-bg .text-slate-600, #portal-bg .text-slate-500 { color: var(--kn-muted) !important; }
/* Layout width: Chatwoot caps every band at max-w-5xl (64rem). 72rem keeps the 48rem article column and
 * leaves a real sidebar; header, hero and cards widen together so left edges stay aligned. */
.main-content .max-w-5xl { max-width: 72rem !important; }
div:has(> #cw-hc-toc) { gap: 3rem; }

/* Table of contents. Chatwoot renders ol.border-l-2 > li.border-l-2 (active li = border-n-portal) > p (with a
 * per-heading-level ml-* indent) > a, for h1+h2+h3. Sections only (h3 entries carry the ml-5 indent class and
 * are hidden), fixed column, 2-line clamp, own scrollbar, "On this page" label. Keep Chatwoot's bar. */
#cw-hc-toc { display: none; }
@media (min-width: 1024px) {
	#cw-hc-toc {
		display: block; flex: 0 0 16.25rem !important; max-width: 16.25rem; font-size: 0.8125rem;
		position: sticky; top: 6rem; align-self: flex-start; max-height: calc(100vh - 7rem); overflow-y: auto;
		scrollbar-width: thin; scrollbar-color: var(--kn-line-strong) transparent;
	}
}
#cw-hc-toc > div { position: static !important; padding-top: 0.5rem !important; border: 0 !important; }
#cw-hc-toc > div::before {
	content: 'On this page'; display: block; margin: 0 0 0.75rem 0.875rem;
	font-family: var(--kn-display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kn-muted);
}
#cw-hc-toc nav { border: 0 !important; max-width: none !important; }
#cw-hc-toc ol, #cw-hc-toc ul { border-left-color: var(--kn-line) !important; gap: 0.1rem !important; }
#cw-hc-toc li { border-left-color: transparent; transition: border-color 0.15s ease; }
#cw-hc-toc li.border-n-portal { border-left-color: var(--kn-accent) !important; }
#cw-hc-toc li:has(> p.ltr\:ml-5) { display: none; }
#cw-hc-toc li > p { margin: 0 !important; padding: 0.3rem 0.875rem !important; }
#cw-hc-toc a {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	color: var(--kn-muted) !important; text-decoration: none !important; font-weight: 500; line-height: 1.35; transition: color 0.15s ease;
}
#cw-hc-toc a:hover, #cw-hc-toc li.border-n-portal a, #cw-hc-toc a.text-n-portal { color: var(--kn-text) !important; }

/* ---------- Article body ---------- */
#cw-article-content { color: var(--kn-body) !important; font-size: 1rem; line-height: 1.7; font-family: var(--kn-sans); counter-reset: kn-section; }
#cw-article-content p, #cw-article-content li, #cw-article-content td { color: var(--kn-body) !important; }
#cw-article-content strong { color: var(--kn-text) !important; font-weight: 700; }
#cw-article-content a { color: var(--kn-accent) !important; text-decoration: none !important; text-underline-offset: 4px; transition: color 0.15s ease; }
#cw-article-content a:hover { color: var(--kn-accent-hover) !important; text-decoration: underline !important; }
#cw-article-content a strong { color: inherit !important; }
#cw-article-content > :first-child { margin-top: 0 !important; }

#cw-article-content h2 {
	display: flex; align-items: flex-start; gap: 0.75rem;
	font-family: var(--kn-display); font-weight: 600; font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.02em;
	color: var(--kn-text) !important; margin: 2.75rem 0 1.1rem;
}
#cw-article-content h2::before {
	content: ''; flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.15rem;
	background: var(--kn-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 0 8px rgba(255, 102, 0, 0.45));
}
#cw-article-content h3 { font-family: var(--kn-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--kn-text) !important; margin: 2rem 0 0.75rem; }
#cw-article-content h1 { font-family: var(--kn-display); font-weight: 600; color: var(--kn-text) !important; letter-spacing: -0.02em; }

/* Steps: an ordered list becomes numbered cards; a bold-only first line is the step title */
#cw-article-content ol { list-style: none !important; padding: 0 !important; margin: 0 0 1.5rem !important; counter-reset: kn-step; display: grid; gap: 0.75rem; }
#cw-article-content ol > li {
	counter-increment: kn-step; position: relative; margin: 0 !important;
	background: var(--kn-surface); border: 1px solid var(--kn-line); border-radius: 16px;
	padding: 0.9rem 1.25rem 0.9rem 3.5rem !important; box-shadow: var(--kn-shadow);
}
#cw-article-content ol > li::before {
	content: counter(kn-step); position: absolute; left: 1.1rem; top: 0.95rem;
	width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
	font-family: var(--kn-display); font-weight: 600; font-size: 0.8rem; color: #fff; background: var(--kn-accent);
	box-shadow: 0 0 14px rgba(255, 102, 0, 0.55);
}
#cw-article-content ol > li::marker { content: none; }
#cw-article-content ol > li > p { margin: 0 0 0.6rem !important; }
#cw-article-content ol > li > p:last-child { margin-bottom: 0 !important; }
#cw-article-content ol > li > p:first-child:has(> strong:only-child) {
	margin: -0.9rem -1.25rem 0.85rem -3.5rem !important; padding: 0.8rem 1.25rem 0.8rem 3.5rem;
	border-bottom: 1px solid var(--kn-line); background: var(--kn-raised); border-radius: 16px 16px 0 0;
}
#cw-article-content ol > li > p:first-child:has(> strong:only-child) > strong { font-family: var(--kn-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
#cw-article-content ol > li ul { margin: 0.4rem 0 0.2rem; }
#cw-article-content ol > li ol { margin: 0.6rem 0 0.2rem !important; gap: 0.5rem; }
#cw-article-content ol > li ol > li { padding-left: 2.75rem !important; box-shadow: none; background: var(--kn-raised); }
#cw-article-content ol > li ol > li::before { left: 0.8rem; top: 0.85rem; width: 1.25rem; height: 1.25rem; font-size: 0.7rem; }
#cw-article-content ul { padding-left: 1.4rem; }
#cw-article-content ul > li { padding-left: 0.2rem; }
#cw-article-content ul > li::marker { color: var(--kn-accent); }

/* Callouts: blockquote whose first bold words are a label (classes added by hc.js) */
#cw-article-content blockquote {
	--co: var(--kn-muted); --co-soft: var(--kn-raised);
	position: relative; margin: 1.5rem 0 !important; padding: 0.9rem 1.15rem 0.9rem 3.1rem !important;
	border: 1px solid color-mix(in srgb, var(--co) 40%, transparent) !important; border-left: 3px solid var(--co) !important;
	border-radius: 12px; background: var(--co-soft) !important; font-style: normal !important; color: var(--kn-body) !important;
	quotes: none;
}
#cw-article-content blockquote::before, #cw-article-content blockquote::after { content: none; }
#cw-article-content blockquote > .kn-icon {
	position: absolute; left: 1rem; top: 0.95rem; width: 1.25rem; height: 1.25rem; background: var(--co);
	-webkit-mask: var(--co-icon) center / contain no-repeat; mask: var(--co-icon) center / contain no-repeat;
	--co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
#cw-article-content blockquote.kn-warn, #cw-article-content blockquote.kn-danger { --co: var(--kn-accent); --co-soft: var(--kn-accent-soft); }
#cw-article-content blockquote.kn-warn > .kn-icon, #cw-article-content blockquote.kn-danger > .kn-icon {
	--co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
#cw-article-content blockquote.kn-danger { --co: var(--kn-danger); --co-soft: var(--kn-danger-soft); }
#cw-article-content blockquote.kn-tip, #cw-article-content blockquote.kn-ok { --co: var(--kn-ok); --co-soft: var(--kn-ok-soft); }
#cw-article-content blockquote.kn-tip > .kn-icon {
	--co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.3h6c0-1 .4-1.8 1-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
}
#cw-article-content blockquote.kn-ok > .kn-icon {
	--co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
}
#cw-article-content blockquote p { margin: 0 !important; }
#cw-article-content blockquote p + p { margin-top: 0.5rem !important; }
#cw-article-content blockquote > p:first-child > strong:first-child {
	color: var(--co) !important; font-family: var(--kn-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
	display: block; margin-bottom: 0.2rem;
}
#cw-article-content blockquote > p:first-child > strong:first-child::before, #cw-article-content blockquote > p:first-child > strong:first-child::after { content: none; }

/* Inline code = key / path chip. Fenced code = block with copy button */
#cw-article-content :not(pre) > code {
	font-family: var(--kn-mono); font-size: 0.82em; font-weight: 500; color: var(--kn-accent-ink) !important;
	background: var(--kn-accent-soft); border: 1px solid var(--kn-accent-line); border-radius: 6px; padding: 0.05em 0.45em 0.12em; white-space: nowrap;
}
#cw-article-content :not(pre) > code::before, #cw-article-content :not(pre) > code::after { content: none !important; }
#cw-article-content pre {
	position: relative; background: var(--kn-inset) !important; border: 1px solid var(--kn-line); border-left: 3px solid var(--kn-accent);
	border-radius: 12px; padding: 0.9rem 6.5rem 0.9rem 1.15rem !important; color: var(--kn-accent-ink) !important; overflow-x: auto;
	font-family: var(--kn-mono); font-size: 0.875rem; line-height: 1.6;
}
#cw-article-content pre code { background: none !important; border: 0 !important; padding: 0 !important; color: inherit !important; font-size: inherit; white-space: pre; }
#cw-article-content pre .kn-copy {
	position: absolute; top: 0.6rem; right: 0.6rem; font-family: var(--kn-display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--kn-muted); background: var(--kn-surface); border: 1px solid var(--kn-line); border-radius: 8px; padding: 0.3rem 0.6rem; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
#cw-article-content pre .kn-copy:hover { color: var(--kn-text); border-color: var(--kn-accent-line); }

/* Images: rounded, ringed, glow on hover, caption from alt (figure built by hc.js), click = lightbox */
#cw-article-content img { max-width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--kn-shadow); }
#cw-article-content figure { margin: 1.5rem 0; }
#cw-article-content figure img { margin: 0; cursor: zoom-in; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
#cw-article-content figure img:hover { transform: translateY(-2px); border-color: var(--kn-accent-line); box-shadow: var(--kn-shadow), var(--kn-glow); }
#cw-article-content figcaption { margin-top: 0.5rem; font-size: 0.8rem; color: var(--kn-muted); }
#cw-article-content ol > li figure { margin: 0.75rem 0 0.25rem; }

/* Tables */
#cw-article-content .tableWrapper { border: 1px solid var(--kn-line) !important; border-radius: 14px !important; box-shadow: var(--kn-shadow); background: var(--kn-surface); margin: 1.25rem 0 !important; }
#cw-article-content table { font-size: 0.9375rem; }
#cw-article-content th { background: var(--kn-raised) !important; color: var(--kn-muted) !important; font-family: var(--kn-display); font-weight: 600 !important; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.7rem 0.9rem !important; border-color: var(--kn-line) !important; }
#cw-article-content td { color: var(--kn-body) !important; padding: 0.7rem 0.9rem !important; border-color: var(--kn-line) !important; background: transparent; }
#cw-article-content td:first-child { color: var(--kn-text) !important; font-weight: 500; }
#cw-article-content th:not(:last-child), #cw-article-content td:not(:last-child) { border-inline-end: 0 !important; }
#cw-article-content tr:hover td { background: var(--kn-raised); }

#cw-article-content hr { border: 0; border-top: 1px dashed var(--kn-line-strong); margin: 2.5rem 0; }
#cw-article-content iframe, #cw-article-content video { border-radius: 16px; border: 1px solid var(--kn-line); }
#cw-article-content sup { color: var(--kn-muted); }

/* Lightbox (hc.js) */
.kn-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 3vw; background: rgba(8, 8, 12, 0.92); cursor: zoom-out; animation: kn-fade 0.15s ease; }
.kn-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
@keyframes kn-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kn-lightbox, #category-block, #cw-article-content figure img { animation: none; transition: none; } }

/* Article footer bits Chatwoot may render (author, feedback), footer branding */
.main-content footer, .main-content > div:last-child > footer { background: var(--kn-ground) !important; border-top: 1px solid var(--kn-line); color: var(--kn-muted) !important; }
.main-content footer a { color: var(--kn-muted) !important; }
.main-content footer a:hover { color: var(--kn-accent) !important; }

/* Generic Tailwind colour overrides so stock-styled bits (mobile menu, search, article lists) match the palette */
html.dark .dark\:bg-slate-900 { background-color: var(--kn-ground) !important; }
html.dark .dark\:bg-slate-800 { background-color: var(--kn-surface) !important; }
html.dark .dark\:hover\:bg-slate-800:hover { background-color: var(--kn-raised) !important; }
html.dark .dark\:border-slate-800, html.dark .dark\:border-slate-700 { border-color: var(--kn-line) !important; }
html.dark .dark\:text-slate-50, html.dark .dark\:text-slate-100, html.dark .dark\:text-white { color: var(--kn-text) !important; }
html.dark .dark\:text-slate-200, html.dark .dark\:text-slate-300, html.dark .dark\:text-slate-400 { color: var(--kn-muted) !important; }
html.light .bg-white { background-color: var(--kn-surface) !important; }
html.light .border-slate-100, html.light .border-slate-200 { border-color: var(--kn-line) !important; }
html.light .text-slate-900, html.light .text-slate-800 { color: var(--kn-text) !important; }
html.light .text-slate-700, html.light .text-slate-600, html.light .text-slate-500 { color: var(--kn-muted) !important; }
.main-content ::selection { background: var(--kn-accent); color: #fff; }