/* hoc-tokens.css */
/* The House of Control design tokens, the first part of /_kb/site.css: the
   frame and the pages' own stylesheets (assets/css/) are written with them,
   and the James look (assets/look/james.css) then sets them to the James
   app's palette, Inter and its shapes. Same names and values as hoc-next-theme,
   the theme of the new houseofcontrol.com, from the 15 Sept 2026 handoff, with
   the brand colours written out (kb-mvp's copy, static-site/assets/, until
   2026-10-17). Only tokens here: each page's own CSS uses them. The brand's
   fonts, Sora and Satoshi, aren't loaded: the help centre is in Inter. */

:root {
	/* The eight brand colours. */
	--hoc-quantum-blue: #132a4e;
	--hoc-core-blue: #114e7e;
	--hoc-crisp-beige: #f2efe5;
	--hoc-cipher-blue: #c8f1fa;
	--hoc-kinetic-purple: #4967a4;
	--hoc-polished-lilac: #d3def0;
	--hoc-lilac: #dfc0fa;
	--hoc-paper: #ffffff;
	/* Product-UI tints: derived, for interaction states, never a brand surface. */
	--hoc-quantum-blue-900: #0b1c36;
	--hoc-core-blue-700: #0d3d63;
	--hoc-core-blue-300: #4d7ba5;
	--hoc-lilac-700: #be93ec;
	--hoc-lilac-300: #ecdcfb;
	--hoc-lilac-100: #f8f2fe;
	--hoc-polished-700: #c2ccdd;
	--hoc-cipher-blue-300: #e0f7fc;
	--hoc-cipher-blue-100: #f0fbfd;
	/* Ink: navy-tinted neutrals for borders and backgrounds, never type. */
	--hoc-ink-1000: #132a4e;
	--hoc-ink-900: #0b1c36;
	--hoc-ink-800: #1f3d6a;
	--hoc-ink-700: #2e3a55;
	--hoc-ink-500: #5b6680;
	--hoc-ink-400: #8390a8;
	--hoc-ink-300: #aeb8cc;
	--hoc-ink-200: #d5dbe6;
	--hoc-ink-100: #e8ecf3;
	--hoc-ink-50: #f2f5fa;
	--hoc-ink-25: #f8fafd;
	--hoc-hairline: var(--hoc-ink-100);
	/* Type. */
	--hoc-fg: #010101;
	--hoc-fg-on-dark: #ffffff;
	--hoc-text-link: var(--hoc-core-blue);
	--hoc-text-link-hover: var(--hoc-quantum-blue);
	--hoc-font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hoc-font-body: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hoc-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	--hoc-t-display-1: 88px;
	--hoc-t-display-2: 64px;
	--hoc-t-h1: 48px;
	--hoc-t-h2: 36px;
	--hoc-t-h3: 28px;
	--hoc-t-h4: 22px;
	--hoc-t-h5: 18px;
	--hoc-t-body-lg: 18px;
	--hoc-t-body: 16px;
	--hoc-t-body-sm: 14px;
	--hoc-t-caption: 12px;
	--hoc-t-eyebrow: 12px;
	--hoc-lh-tight: 1.05;
	--hoc-lh-snug: 1.2;
	--hoc-lh-normal: 1.45;
	--hoc-lh-loose: 1.6;
	--hoc-tracking-tight: -0.02em;
	--hoc-tracking-wide: 0.08em;
	/* Spacing: a 4px grid. */
	--hoc-sp-1: 4px;
	--hoc-sp-2: 8px;
	--hoc-sp-3: 12px;
	--hoc-sp-4: 16px;
	--hoc-sp-5: 20px;
	--hoc-sp-6: 24px;
	--hoc-sp-8: 32px;
	--hoc-sp-10: 40px;
	--hoc-sp-12: 48px;
	--hoc-sp-16: 64px;
	--hoc-sp-20: 80px;
	--hoc-sp-24: 96px;
	/* Radii: fields and buttons 10, cards 14. */
	--hoc-r-xs: 4px;
	--hoc-r-sm: 6px;
	--hoc-r-md: 10px;
	--hoc-r-lg: 14px;
	--hoc-r-xl: 20px;
	--hoc-r-2xl: 28px;
	--hoc-r-pill: 999px;
	/* Shadows in brand ink, never black. */
	--hoc-shadow-sm: 0 1px 2px rgb(19 42 78 / 0.06), 0 1px 1px rgb(19 42 78 / 0.04);
	--hoc-shadow-md: 0 4px 12px rgb(19 42 78 / 0.1), 0 1px 2px rgb(19 42 78 / 0.05);
	--hoc-shadow-lg: 0 18px 38px -12px rgb(19 42 78 / 0.22), 0 4px 10px rgb(19 42 78 / 0.08);
	--hoc-shadow-xl: 0 32px 64px -16px rgb(19 42 78 / 0.26), 0 8px 18px rgb(19 42 78 / 0.1);
	--hoc-shadow-navy: 0 12px 28px -8px rgb(19 42 78 / 0.45);
	/* Motion: no bounce, no overshoot. */
	--hoc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--hoc-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--hoc-dur-fast: 120ms;
	--hoc-dur-base: 200ms;
	--hoc-dur-slow: 320ms;
	/* Layout. */
	--hoc-max-product: 1440px;
	--hoc-gutter-mobile: 24px;
	--hoc-gutter-desktop: 48px;
	/* The approved gradients: one per large surface (a hero or a band), never on
	   buttons, cards, badges, icons or text. */
	--hoc-grad-quantum: radial-gradient(140% 160% at 14% 4%, #24457c 0%, #132a4e 52%, #0b192f 100%);
	--hoc-grad-core: radial-gradient(140% 160% at 14% 4%, #1a6ba6 0%, #114e7e 52%, #0b3a5e 100%);
	--hoc-grad-kinetic: radial-gradient(140% 160% at 14% 4%, #5875b2 0%, #4967a4 55%, #3b5488 100%);
	--hoc-grad-lilac: radial-gradient(140% 160% at 14% 4%, #ebd8fc 0%, #dfc0fa 55%, #d0abf3 100%);
	--hoc-grad-cipher: radial-gradient(140% 160% at 14% 4%, #d6f5fc 0%, #c8f1fa 55%, #ace5f2 100%);
	--hoc-grad-beige: radial-gradient(140% 160% at 14% 4%, #f7f4ec 0%, #f2efe5 55%, #eae6d8 100%);
}

/* css/shell.css */
/* The frame of every page (lib/pages/layout.mjs): header, menu column and
   drawer, footer; and the parts several pages share (lib/pages/parts.mjs),
   buttons and notices. It comes right after hoc-tokens.css in /_kb/site.css,
   each page's own styles come after it, and look B (assets/look/) last: it
   spans the header across the window and makes the menu a column from 1024px
   (a drawer below). Phones are under 640px (24px gutters). */

:root {
	--kb-gutter: var(--hoc-gutter-mobile);
	--kb-header-h: 56px;
	--kb-menu-w: 264px;
	--kb-menu-gap: 56px;
	--kb-text-w: 720px;
	--kb-toc-w: 220px;
	--kb-col-gap: 48px;
	/* The text column plus "On this page", without the menu. */
	--kb-content-w: calc(var(--kb-text-w) + var(--kb-col-gap) + var(--kb-toc-w));
	--kb-shell-w: var(--kb-content-w);
	color-scheme: light;
}
@media (min-width: 640px) {
	:root {
		--kb-gutter: var(--hoc-gutter-desktop);
		--kb-header-h: 64px;
	}
}
@media (min-width: 1360px) {
	:root {
		--kb-shell-w: calc(var(--kb-menu-w) + var(--kb-menu-gap) + var(--kb-content-w));
	}
}
@media (min-width: 2200px) {
	:root {
		--kb-menu-w: 300px;
		--kb-text-w: 760px;
		--kb-toc-w: 260px;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Anchors land below the sticky header. */
	scroll-padding-top: calc(var(--kb-header-h) + 24px);
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--hoc-paper);
	color: var(--hoc-fg);
	font: 400 var(--hoc-t-body) / 1.5 var(--hoc-font-body);
	-webkit-font-smoothing: antialiased;
	/* A long word wraps instead of widening the page. */
	overflow-wrap: break-word;
}
body[data-kb-drawer-open] {
	overflow: hidden;
}
a {
	color: var(--hoc-text-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
a:hover {
	color: var(--hoc-text-link-hover);
}
:focus-visible {
	outline: 2px solid var(--hoc-kinetic-purple);
	outline-offset: 2px;
}
img,
svg {
	flex: none;
}

.kb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.kb-skip {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: var(--hoc-r-md);
	background: var(--hoc-quantum-blue);
	color: var(--hoc-fg-on-dark);
	font-weight: 600;
}
.kb-skip:focus {
	top: 12px;
	color: var(--hoc-fg-on-dark);
}

/* --- Header ------------------------------------------------------------ */

.kb-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--hoc-crisp-beige);
	border-bottom: 1px solid var(--hoc-ink-100);
}
.kb-header__row {
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--kb-header-h);
}
.kb-header__end {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin-left: auto;
}

.kb-brand {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 16px;
	color: var(--hoc-quantum-blue);
	text-decoration: none;
}
.kb-brand:hover {
	color: var(--hoc-quantum-blue);
}
.kb-brand__label {
	display: none;
	align-items: center;
	height: 24px;
	padding-left: 16px;
	border-left: 1px solid var(--hoc-ink-200);
	color: var(--hoc-fg);
	font: 600 var(--hoc-t-eyebrow) / 1 var(--hoc-font-display);
	letter-spacing: var(--hoc-tracking-wide);
	text-transform: uppercase;
	white-space: nowrap;
}
/* Room for the label only where the header's other parts still fit beside it. */
@media (min-width: 1024px) {
	.kb-brand__label {
		display: inline-flex;
	}
}

.kb-menu-button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 44px;
	height: 44px;
	margin-left: -10px;
	border-radius: var(--hoc-r-md);
	color: var(--hoc-fg);
	font: 600 var(--hoc-t-body-sm) / 1 var(--hoc-font-body);
	text-decoration: none;
}
.kb-menu-button:hover {
	color: var(--hoc-fg);
	background: var(--hoc-paper);
}
.kb-menu-button__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}
@media (min-width: 640px) {
	.kb-menu-button {
		width: auto;
		height: 40px;
		margin-left: 0;
		padding: 0 14px 0 12px;
		border: 1px solid var(--hoc-ink-200);
		background: var(--hoc-paper);
	}
	.kb-menu-button:hover {
		border-color: var(--hoc-ink-300);
	}
	.kb-menu-button__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}
}
@media (min-width: 1360px) {
	.kb-menu-button {
		display: none;
	}
}

/* --- The page: the menu column beside <main> ---------------------------- */

.kb-shell {
	flex: 1 0 auto;
	padding-top: 32px;
}
.kb-menu-col {
	display: none;
}
.kb-main {
	min-width: 0;
}
.kb-main:focus {
	outline: none;
}
@media (min-width: 1360px) {
	.kb-shell--menu {
		display: grid;
		grid-template-columns: var(--kb-menu-w) minmax(0, 1fr);
		column-gap: var(--kb-menu-gap);
		padding-top: 0;
	}
	.kb-shell--menu .kb-main {
		padding-top: 32px;
	}
	.kb-shell--menu .kb-menu-col {
		display: block;
		position: sticky;
		top: var(--kb-header-h);
		align-self: start;
		max-height: calc(100vh - var(--kb-header-h));
		padding: 32px 24px 48px 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-right: 1px solid var(--hoc-ink-100);
	}
}

/* --- The menu: All articles, then each topic and its articles ----------- */

.kb-menu {
	font-size: var(--hoc-t-body-sm);
}
.kb-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.kb-menu a {
	color: var(--hoc-fg);
	text-decoration: none;
}
.kb-menu__all {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 12px;
	border-left: 2px solid transparent;
	border-radius: 0 var(--hoc-r-sm) var(--hoc-r-sm) 0;
	font: 600 var(--hoc-t-body-sm) / 1.3 var(--hoc-font-display);
}
.kb-menu__all svg {
	color: var(--hoc-ink-300);
}
.kb-menu .kb-menu__sections {
	margin-top: 12px;
	border-top: 1px solid var(--hoc-ink-100);
}
.kb-menu__sections > li {
	border-bottom: 1px solid var(--hoc-ink-100);
}
.kb-menu__section > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 10px 12px;
	font: 600 var(--hoc-t-body-sm) / 1.3 var(--hoc-font-display);
	list-style: none;
	cursor: pointer;
}
.kb-menu__section > summary::-webkit-details-marker {
	display: none;
}
.kb-menu__chevron {
	color: var(--hoc-ink-300);
	transition: transform var(--hoc-dur-fast) var(--hoc-ease-out);
}
.kb-menu__section[open] > summary .kb-menu__chevron {
	transform: rotate(180deg);
}
/* A topic's articles, indented, with a guide line on the left that the page's
   own row covers with its bar. */
.kb-menu .kb-menu__articles,
.kb-menu__empty {
	margin: 0 0 12px 16px;
	border-left: 1px solid var(--hoc-ink-200);
}
.kb-menu__articles a,
.kb-menu__empty a {
	display: block;
	margin: 0 0 2px -1px;
	padding: 8px 12px;
	border-left: 2px solid transparent;
	border-radius: 0 var(--hoc-r-sm) var(--hoc-r-sm) 0;
	font: 400 var(--hoc-t-body-sm) / 1.4 var(--hoc-font-body);
}
.kb-menu__all:hover,
.kb-menu__articles a:hover,
.kb-menu__empty a:hover {
	background: var(--hoc-ink-25);
	color: var(--hoc-fg);
}
.kb-menu__all[aria-current],
.kb-menu__articles a[aria-current] {
	border-left-color: var(--hoc-quantum-blue);
	background: var(--hoc-crisp-beige);
}

/* --- The drawer, under 1360: the menu in a dialog from the left ---------- */

.kb-drawer {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(320px, 100%);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	background: var(--hoc-paper);
	color: var(--hoc-fg);
	box-shadow: var(--hoc-shadow-xl);
}
.kb-drawer::backdrop {
	background: rgb(19 42 78 / 0.32);
}
@media (prefers-reduced-motion: no-preference) {
	.kb-drawer[open] {
		animation: kb-drawer-in var(--hoc-dur-base) var(--hoc-ease-out);
	}
}
@keyframes kb-drawer-in {
	from {
		transform: translateX(-24px);
		opacity: 0;
	}
}
.kb-drawer__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--kb-header-h);
	padding: 0 12px 0 24px;
	border-bottom: 1px solid var(--hoc-ink-100);
	background: var(--hoc-paper);
}
.kb-drawer__title {
	margin: 0;
	font: 600 var(--hoc-t-body) / 1 var(--hoc-font-display);
}
.kb-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--hoc-r-md);
	background: transparent;
	color: var(--hoc-fg);
	cursor: pointer;
}
.kb-drawer__close:hover {
	background: var(--hoc-ink-50);
}
.kb-drawer__menu {
	padding: 16px 12px 24px;
}
@media (max-width: 639px) {
	.kb-drawer {
		width: 100%;
	}
}

/* --- Footer ------------------------------------------------------------- */

.kb-footer {
	margin-top: 64px;
	padding: 24px var(--kb-gutter) 32px;
	border-top: 1px solid var(--hoc-ink-100);
	font-size: var(--hoc-t-body-sm);
	text-align: center;
}
.kb-footer p {
	margin: 0;
}

/* --- Shared parts (lib/pages/parts.mjs) ---------------------------------- */

/* Breadcrumbs: home icon › topic › the page itself. */
.kb-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 0;
	padding: 0;
	font-size: var(--hoc-t-body-sm);
	line-height: 1.4;
	list-style: none;
}
.kb-crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.kb-crumbs a {
	display: inline-flex;
	align-items: center;
	color: var(--hoc-fg);
	text-decoration: none;
}
.kb-crumbs a:hover {
	color: var(--hoc-fg);
	text-decoration: underline;
}
.kb-crumbs__sep {
	color: var(--hoc-ink-300);
}
.kb-crumbs .cur {
	font-weight: 600;
}

/* A page's title and its lede. */
.kb-title {
	max-width: 760px;
	margin: 24px 0 0;
	font: 600 30px / 1.2 var(--hoc-font-display);
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.kb-lede {
	max-width: 720px;
	margin: 16px 0 0;
	font-size: var(--hoc-t-body-lg);
	line-height: 1.5;
}
@media (min-width: 640px) {
	.kb-title {
		font-size: 40px;
		line-height: 1.15;
	}
	.kb-lede {
		font-size: 20px;
	}
}

/* Articles as rows: the document icon, the title, a line below, a note at the right. */
.kb-doclist {
	margin: 0;
	padding: 0;
	list-style: none;
}
.kb-doclist__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--hoc-ink-100);
}
.kb-doclist__row:last-child {
	border-bottom: 1px solid var(--hoc-ink-100);
}
.kb-doclist__icon {
	margin-top: 3px;
	color: var(--hoc-ink-300);
}
.kb-doclist__text {
	flex: 1;
	min-width: 0;
}
.kb-doclist__title {
	color: var(--hoc-fg);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}
.kb-doclist__title:hover {
	color: var(--hoc-text-link);
	text-decoration: underline;
}
.kb-doclist__sub,
.kb-doclist__end {
	margin: 2px 0 0;
	font-size: var(--hoc-t-body-sm);
	line-height: 1.45;
}
.kb-doclist__end {
	flex: none;
	margin: 0;
	white-space: nowrap;
}

/* Buttons: secondary unless primary. Pressed: 1px down and darker, never scaled. */
.kb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--hoc-ink-200);
	border-radius: var(--hoc-r-md);
	background: var(--hoc-paper);
	color: var(--hoc-fg);
	font: 600 var(--hoc-t-body) / 1 var(--hoc-font-body);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--hoc-dur-fast) var(--hoc-ease-out), border-color var(--hoc-dur-fast) var(--hoc-ease-out);
}
.kb-button:hover {
	border-color: var(--hoc-ink-300);
	background: var(--hoc-ink-25);
	color: var(--hoc-fg);
}
.kb-button--primary {
	border-color: var(--hoc-quantum-blue);
	background: var(--hoc-quantum-blue);
	color: var(--hoc-fg-on-dark);
}
.kb-button--primary:hover {
	border-color: var(--hoc-quantum-blue-900);
	background: var(--hoc-quantum-blue-900);
	color: var(--hoc-fg-on-dark);
}
.kb-button:active {
	transform: translateY(1px);
	filter: brightness(0.88);
}

/* A notice: crisp beige, for "nothing here yet". */
.kb-notice {
	padding: 20px 24px;
	border-radius: var(--hoc-r-lg);
	background: var(--hoc-crisp-beige);
}
.kb-notice > :first-child {
	margin-top: 0;
}
.kb-notice > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0s !important;
		animation-duration: 0s !important;
	}
}

@media print {
	.kb-header,
	.kb-menu-col,
	.kb-drawer,
	.kb-skip {
		display: none !important;
	}
	.kb-shell--menu {
		display: block;
	}
}

/* css/article.css */
/* The parts of the article page (lib/pages/article.mjs) the site has had from
   the start, after Spiris's help centre: the head and its meta row, the
   article's text and the components the articles use, "On this page" and the
   vote box. Look B (assets/look/james.css and b.css, after this) sets the
   page's layout, its type and colours, and draws its own parts (the rail,
   "Still unsure?", previous and next, the related cards). */

.kb-article {
	max-width: var(--kb-text-w);
}
@media (min-width: 1152px) {
	.kb-article {
		max-width: var(--kb-content-w);
	}
}

/* --- The head: breadcrumbs, title, lede, meta row, rule ------------------ */

.kb-article-head {
	margin-bottom: 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--hoc-ink-100);
}
.kb-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 24px;
	margin-top: 24px;
	font-size: var(--hoc-t-body-sm);
	line-height: 1.4;
}
.kb-meta__info {
	margin: 0;
}
@media (max-width: 639px) {
	.kb-meta__info {
		flex-basis: 100%;
	}
}
/* "Copy link": a link-blue text button, 44px tall to touch, without making the row taller. */
.kb-copy-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: -12px -8px;
	padding: 0 8px;
	border: 0;
	border-radius: var(--hoc-r-sm);
	background: none;
	color: var(--hoc-text-link);
	font: 500 var(--hoc-t-body-sm) / 1 var(--hoc-font-body);
	cursor: pointer;
}
.kb-copy-link[hidden] {
	display: none;
}
.kb-copy-link:hover {
	color: var(--hoc-text-link-hover);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
.kb-copy-link:active {
	transform: translateY(1px);
	color: var(--hoc-quantum-blue-900);
}

/* Only in the preview (app/preview/server.mjs): the draft banner and the
   eyebrow and tags, so the editor can change them in the page. */
.kb-draft-banner {
	margin: 0 0 24px;
	padding: 12px 16px;
	border-radius: var(--hoc-r-md);
	background: var(--hoc-crisp-beige);
	font-size: var(--hoc-t-body-sm);
	font-weight: 600;
}
.kb-preview-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--hoc-ink-200);
	font-size: var(--hoc-t-body-sm);
	line-height: 1.4;
}
.kb-tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}
.kb-tag {
	padding: 2px 10px;
	border-radius: var(--hoc-r-pill);
	background: var(--hoc-ink-50);
	font-size: 12px;
	font-weight: 500;
}

/* --- The article's text --------------------------------------------------- */

.kb-article-body {
	font-size: 17px;
	line-height: 1.6;
}
@media (min-width: 640px) {
	.kb-article-body {
		font-size: var(--hoc-t-body-lg);
		line-height: 1.65;
	}
}
.kb-article-body > :first-child {
	margin-top: 0;
}
.kb-article-body p {
	margin: 0 0 20px;
}
.kb-article-body h2 {
	margin: 48px 0 12px;
	font: 600 24px / 1.25 var(--hoc-font-display);
	letter-spacing: -0.01em;
}
.kb-article-body h3 {
	margin: 32px 0 8px;
	font: 600 20px / 1.3 var(--hoc-font-display);
}
.kb-article-body h4,
.kb-article-body h5,
.kb-article-body h6 {
	margin: 24px 0 8px;
	font: 600 var(--hoc-t-h5) / 1.35 var(--hoc-font-display);
}
@media (min-width: 640px) {
	.kb-article-body h2 {
		font-size: 28px;
	}
	.kb-article-body h3 {
		font-size: var(--hoc-t-h4);
	}
}
.kb-article-body h2 + h3 {
	margin-top: 16px;
}
.kb-article-body strong {
	font-weight: 700;
}
.kb-article-body ul,
.kb-article-body ol {
	margin: 0 0 20px;
	padding-left: 24px;
}
.kb-article-body ul {
	list-style: disc;
}
.kb-article-body ol {
	list-style: decimal;
}
.kb-article-body li + li {
	margin-top: 8px;
}
.kb-article-body li > ul,
.kb-article-body li > ol {
	margin: 8px 0 0;
}
/* A list with blank lines between its items has paragraphs in them. */
.kb-article-body li > p {
	margin: 0;
}
.kb-article-body li > p + * {
	margin-top: 8px;
}
.kb-article-body li::marker {
	font-variant-numeric: tabular-nums;
}

/* Steps (<Steps>): a numbered list whose numbers are Sora, a bit apart. The
   list's own numbering stays, so a list that starts at 3 (start="3") counts
   from 3, and Safari keeps calling it a list. */
.kb-article-body ol.kb-steps {
	padding-left: 32px;
	list-style: decimal;
}
.kb-article-body ol.kb-steps > li {
	padding-left: 4px;
}
.kb-article-body ol.kb-steps > li + li {
	margin-top: 10px;
}
.kb-article-body ol.kb-steps > li::marker {
	font-family: var(--hoc-font-display);
	font-weight: 600;
}

.kb-article-body code {
	padding: 1px 5px;
	border-radius: var(--hoc-r-xs);
	background: var(--hoc-ink-50);
	font-family: var(--hoc-font-mono);
	font-size: 0.875em;
}
.kb-article-body pre {
	margin: 0 0 20px;
	padding: 16px 20px;
	overflow-x: auto;
	border-radius: var(--hoc-r-md);
	background: var(--hoc-ink-50);
	font-size: 15px;
	line-height: 1.5;
}
.kb-article-body pre code {
	padding: 0;
	background: none;
	font-size: inherit;
}
.kb-article-body blockquote {
	margin: 0 0 20px;
	padding-left: 20px;
	border-left: 3px solid var(--hoc-ink-200);
}
.kb-article-body blockquote > :last-child {
	margin-bottom: 0;
}
.kb-article-body hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--hoc-ink-100);
}
.kb-article-body img {
	max-width: 100%;
	height: auto;
}
/* A link to another site: ↗ after it, kept on its line, and silent for screen
   readers (the page describes such links in words: kb-ext-note). */
.kb-article-body a.kb-ext::after {
	content: '\a0↗';
	content: '\a0↗' / '';
}
/* Only in the preview: a link to an article that isn't published yet. */
.kb-article-body .kb-unpublished {
	text-decoration-style: dotted;
}

/* Notes (<Aside>): a label line over the text, a 3px bar in the type's brand
   colour, a lilac fill for the two that warn. No status colours. Inside a
   line of text, a note is spans, drawn as blocks all the same. */
.kb-note {
	display: block;
	margin: 24px 0;
	padding: 16px 0 16px 20px;
	border-left: 3px solid var(--hoc-kinetic-purple);
}
.kb-note--tip {
	border-left-color: var(--hoc-core-blue);
}
.kb-note--caution,
.kb-note--danger {
	padding-right: 20px;
	border-radius: 0 var(--hoc-r-md) var(--hoc-r-md) 0;
	background: var(--hoc-lilac-300);
}
.kb-note--caution {
	border-left-color: var(--hoc-lilac-700);
}
.kb-note--danger {
	border-left-color: var(--hoc-quantum-blue);
}
/* The label line; .kb-note in front, as it is a paragraph, and the article's paragraphs have margins. */
.kb-note .kb-note__title {
	display: block;
	margin: 0 0 4px;
	font: 600 var(--hoc-t-body) / 1.4 var(--hoc-font-display);
}
.kb-note__content {
	display: block;
	font-size: 17px;
	line-height: 1.6;
}
.kb-note__content > :last-child {
	margin-bottom: 0;
}

/* StatusTag: a pill in the line of text, its fill picked from its label
   (lib/components.mjs), its text #010101. */
.kb-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--hoc-r-pill);
	background: var(--hoc-ink-50);
	font-family: var(--hoc-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-indent: 0;
}
.kb-status--polished {
	background: var(--hoc-polished-lilac);
}
.kb-status--cipher {
	background: var(--hoc-cipher-blue-300);
}
.kb-status--lilac {
	background: var(--hoc-lilac);
}
.kb-status--lilac-soft {
	background: var(--hoc-lilac-300);
}
.kb-status--beige {
	background: var(--hoc-crisp-beige);
}
.kb-status--outline {
	box-shadow: inset 0 0 0 1px var(--hoc-ink-200);
}

/* A status list (div.kb-statuslist): a row per status, the pill and what it
   means, hairlines between. The pills share one column, as wide as the widest.
   The rows are divs, or spans in a paragraph when the file indents them (MDX
   then reads them as one paragraph); the paragraph steps aside for the grid. */
.kb-statuslist {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	margin: 0 0 20px;
	border-bottom: 1px solid var(--hoc-ink-100);
}
.kb-statuslist > p {
	display: contents;
}
.kb-statusrow {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: 8rem minmax(0, 1fr);
	grid-template-columns: subgrid;
	column-gap: 16px;
	align-items: baseline;
	padding: 12px 0;
	border-top: 1px solid var(--hoc-ink-100);
	font-size: var(--hoc-t-body);
	line-height: 1.5;
}
.kb-statusrow > .kb-status {
	justify-self: start;
}
/* On phones the pill sits over its text, which keeps the width of the line. */
@media (max-width: 639px) {
	.kb-statuslist {
		grid-template-columns: minmax(0, 1fr);
	}
	.kb-statusrow {
		grid-template-columns: minmax(0, 1fr);
		grid-template-columns: subgrid;
		row-gap: 6px;
	}
}

/* Tables: no outer border, a ruled head, hairlines between rows, figures in
   columns; a table wider than the text scrolls in its own box. */
.kb-table {
	margin: 0 0 24px;
	overflow-x: auto;
}
.kb-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hoc-t-body);
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}
.kb-table th {
	padding: 0 12px 10px;
	border-bottom: 1px solid var(--hoc-ink-200);
	font: 600 var(--hoc-t-body-sm) / 1.4 var(--hoc-font-display);
	text-align: start;
	vertical-align: bottom;
}
.kb-table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--hoc-ink-100);
	vertical-align: top;
}
.kb-table th[align='center'],
.kb-table td[align='center'] {
	text-align: center;
}
.kb-table th[align='right'],
.kb-table td[align='right'] {
	text-align: end;
}

/* An image on its own: on crisp beige in a box, as Spiris shows its illustrations. */
.kb-figure {
	margin: 0 0 24px;
	padding: 16px;
	border: 1px solid var(--hoc-ink-100);
	border-radius: var(--hoc-r-md);
	background: var(--hoc-crisp-beige);
}
@media (min-width: 640px) {
	.kb-figure {
		padding: 28px;
	}
}
.kb-figure img {
	display: block;
	margin: 0 auto;
}

/* --- "On this page", from 1152 ------------------------------------------- */

.kb-toc {
	display: none;
}
@media (min-width: 1152px) {
	.kb-toc {
		display: block;
		position: sticky;
		top: calc(var(--kb-header-h) + 32px);
		max-height: calc(100vh - var(--kb-header-h) - 64px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}
.kb-toc__title {
	margin: 0 0 4px;
	font: 600 var(--hoc-t-body-sm) / 1.35 var(--hoc-font-display);
}
.kb-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.kb-toc a {
	display: block;
	padding: 8px 0;
	color: var(--hoc-fg);
	font-size: var(--hoc-t-body-sm);
	line-height: 1.35;
	text-decoration: none;
}
.kb-toc a:hover {
	color: var(--hoc-text-link);
	text-decoration: underline;
}
.kb-toc__item--h3 a {
	padding-left: 12px;
}

/* --- "Was this article helpful?" ------------------------------------------ */

.kb-helpful {
	margin-top: 64px;
	padding: 20px;
	border: 1px solid var(--hoc-ink-100);
	border-radius: var(--hoc-r-lg);
	background: var(--hoc-ink-25);
}
@media (min-width: 640px) {
	.kb-helpful {
		padding: 24px 28px;
	}
}
.kb-helpful__title {
	margin: 0 0 16px;
	font: 600 var(--hoc-t-body) / 1.4 var(--hoc-font-display);
}
.kb-helpful__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}
.kb-helpful__votes {
	display: flex;
	gap: 10px;
}
.kb-helpful__vote {
	width: 48px;
	min-height: 48px;
	padding: 0;
}
@media (min-width: 640px) {
	.kb-helpful__vote {
		width: 44px;
		min-height: 44px;
	}
}
.kb-helpful__vote[aria-pressed='true'] {
	border-color: var(--hoc-quantum-blue);
	background: var(--hoc-quantum-blue);
	color: var(--hoc-fg-on-dark);
}
.kb-helpful__thanks {
	margin: 0;
}
.kb-helpful__more {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}
.kb-helpful__more[hidden] {
	display: none;
}

@media print {
	.kb-toc,
	.kb-helpful,
	.kb-copy-link {
		display: none !important;
	}
	.kb-article {
		max-width: none;
	}
	.kb-article-body a.kb-ext::after {
		content: '\a0(' attr(href) ')';
	}
}

/* css/home.css */
/* The topic pages and All articles (lib/pages/topic.mjs, articles.mjs; after
   Spiris's help centre). The home page is look B's own (assets/look/b.css). */

/* --- Topic pages, and the lists All articles shares --------------------- */

.kb-topic {
	max-width: var(--kb-content-w);
}
.kb-topic__count {
	margin: 16px 0 0;
	font-size: var(--hoc-t-body-sm);
}
.kb-topic .kb-topic-list,
.kb-topic .kb-topic-empty {
	margin-top: 32px;
}
/* A row: the document icon, the title, the description below, the read time on
   the right (under the description on phones). */
.kb-topic-list .kb-doclist__row {
	padding: 16px 0;
}
.kb-topic-list .kb-doclist__icon {
	margin-top: 5px;
}
.kb-topic-list .kb-doclist__title {
	font-size: var(--hoc-t-body-lg);
	line-height: 1.4;
}
.kb-topic-list .kb-doclist__sub {
	margin-top: 4px;
	font-size: var(--hoc-t-body);
	line-height: 1.5;
}
.kb-topic-list .kb-doclist__end {
	margin-top: 3px;
}
@media (max-width: 639px) {
	.kb-topic-list .kb-doclist__row {
		flex-wrap: wrap;
	}
	.kb-topic-list .kb-doclist__end {
		flex-basis: 100%;
		margin: 0;
		padding-left: 28px;
	}
}
.kb-topic-empty {
	max-width: var(--kb-text-w);
}
.kb-topic-empty p {
	margin: 8px 0 0;
}
.kb-topic-empty .kb-topic-empty__title {
	margin: 0;
	font: 600 var(--hoc-t-body) / 1.4 var(--hoc-font-display);
}

/* --- All articles: the topics, and "On this page" from 1152px ----------- */

.kb-all {
	max-width: var(--kb-content-w);
}
.kb-all__topic {
	margin-top: 48px;
}
.kb-all__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.kb-all__title {
	min-width: 0;
	margin: 0;
	font: 600 22px / 1.25 var(--hoc-font-display);
	letter-spacing: -0.01em;
}
.kb-all__title a {
	color: var(--hoc-fg);
	text-decoration: none;
}
.kb-all__title a:hover {
	color: var(--hoc-fg);
	text-decoration: underline;
}
.kb-all__count {
	flex: none;
	margin: 0;
	font-size: var(--hoc-t-body-sm);
	white-space: nowrap;
}
@media (min-width: 640px) {
	.kb-all__title {
		font-size: 28px;
	}
}

.kb-all__toc {
	display: none;
}
@media (min-width: 1152px) {
	.kb-all {
		display: grid;
		grid-template-columns: minmax(0, var(--kb-text-w)) var(--kb-toc-w);
		column-gap: var(--kb-col-gap);
		align-items: start;
	}
	.kb-all__body {
		grid-area: 1 / 1;
		min-width: 0;
	}
	.kb-all__toc {
		display: block;
		grid-area: 1 / 2;
		position: sticky;
		top: calc(var(--kb-header-h) + 32px);
	}
}
.kb-all__toc-title {
	margin: 0 0 4px;
	font: 600 var(--hoc-t-body-sm) / 1.35 var(--hoc-font-display);
}
.kb-all__toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.kb-all__toc a {
	display: block;
	padding: 8px 0;
	color: var(--hoc-fg);
	font-size: var(--hoc-t-body-sm);
	line-height: 1.35;
	text-decoration: none;
}
.kb-all__toc a:hover {
	color: var(--hoc-fg);
	text-decoration: underline;
}

@media print {
	.kb-all__toc {
		display: none;
	}
}

/* css/not-found.css */
/* The 404 page (lib/pages/not-found.mjs): one centred block under the header,
   720px wide: the title, one line, the search box (560px), and the way to the
   home page and All articles. */

.kb-notfound {
	max-width: 720px;
	margin: 24px auto 0;
	text-align: center;
}
@media (min-width: 640px) {
	.kb-notfound {
		margin-top: 72px;
	}
}
.kb-notfound .kb-title {
	margin: 0 auto;
}
.kb-notfound .kb-lede {
	margin-inline: auto;
}
.kb-notfound__search {
	max-width: 560px;
	margin: 32px auto 0;
	text-align: start;
}
.kb-notfound__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 32px 0 0;
}
/* On phones, one under the other, as wide as the text. */
@media (max-width: 639px) {
	.kb-notfound__links {
		flex-direction: column;
	}
}

/* css/search.css */
/* The search box and its results (lib/pages/search.mjs, assets/js/search.js).
   - In the header: white, one ink-200 hairline, 400×40 from 1360px and 320
     below that (narrower where the header is short of room), with the "/" key
     at its end. Under 960px the header has only a search button, which opens
     the box as a sheet under the header, the results full width in it.
   - In the home page's hero: 772×60 (52 tall on phones), a shadow and no
     border, a 22px magnifier and 18px text.
   - The results hang under the box, as wide as it and at least 480px where
     there is room: paper, a shadow and no border; the marked row ink-25. */

.kb-search {
	position: relative;
	text-align: left;
}
.kb-search__box {
	position: relative;
	display: flex;
	align-items: center;
}
.kb-search__icon {
	position: absolute;
	left: 12px;
	color: var(--hoc-fg);
	pointer-events: none;
}
.kb-search__input {
	width: 100%;
	min-width: 0;
	height: 40px;
	margin: 0;
	padding: 0 40px 0 36px;
	border: 1px solid var(--hoc-ink-200);
	border-radius: var(--hoc-r-md);
	background: var(--hoc-paper);
	color: var(--hoc-fg);
	font: 400 var(--hoc-t-body-sm) / 1.2 var(--hoc-font-body);
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--hoc-dur-fast) var(--hoc-ease-out);
}
.kb-search__input:hover {
	border-color: var(--hoc-ink-300);
}
.kb-search__input::-webkit-search-decoration,
.kb-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
/* The "/" key, until the field has focus or text. */
.kb-search__key {
	position: absolute;
	right: 10px;
	min-width: 20px;
	height: 22px;
	padding: 0 6px;
	border: 1px solid var(--hoc-ink-200);
	border-radius: var(--hoc-r-xs);
	background: var(--hoc-paper);
	color: var(--hoc-fg);
	font: 500 var(--hoc-t-caption) / 20px var(--hoc-font-mono);
	text-align: center;
	pointer-events: none;
}
.kb-search__input:focus + .kb-search__key,
.kb-search__input:not(:placeholder-shown) + .kb-search__key {
	display: none;
}

/* --- In the header ------------------------------------------------------ */

/* A width, not a flex basis: the header sizes its right side from it. */
.kb-search--header {
	flex: 0 1 auto;
	width: 320px;
	min-width: 200px;
}
.kb-search--header .kb-search__box {
	container-type: inline-size;
}
/* Too narrow for the placeholder and the key both: the placeholder wins. */
@container (max-width: 259px) {
	.kb-search__key {
		display: none;
	}
}
@media (min-width: 1360px) {
	.kb-search--header {
		width: 400px;
	}
}

/* The button that opens the box under 960px: a magnifier, a × while open. */
.kb-search-toggle {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--hoc-r-md);
	color: var(--hoc-fg);
}
@media (hover: hover) {
	.kb-search-toggle:hover {
		background: var(--hoc-paper);
		color: var(--hoc-fg);
	}
}
.kb-search-toggle:active {
	transform: translateY(1px);
	background: var(--hoc-ink-50);
}
.kb-search-toggle__close,
.kb-search-toggle[aria-expanded='true'] .kb-search-toggle__open {
	display: none;
}
.kb-search-toggle[aria-expanded='true'] .kb-search-toggle__close {
	display: block;
}
@media (max-width: 959px) {
	.kb-search-toggle {
		display: inline-flex;
	}
	.kb-search--header {
		display: none;
	}
	/* The sheet: the header's beige, right under it, the whole width. */
	.kb-search--header[data-open] {
		position: fixed;
		top: calc(var(--kb-header-h) + 1px);
		right: 0;
		left: 0;
		display: block;
		width: auto;
		min-width: 0;
		padding: 12px var(--kb-gutter) 16px;
		background: var(--hoc-crisp-beige);
		box-shadow: var(--hoc-shadow-lg);
	}
	.kb-search--header[data-open] .kb-search__input {
		height: 44px;
		/* 16px, or iPhones zoom in on the field. */
		font-size: var(--hoc-t-body);
	}
	.kb-search--header[data-open] .kb-search__panel {
		position: static;
		width: auto;
		max-width: none;
		max-height: calc(100vh - var(--kb-header-h) - 100px);
		max-height: calc(100dvh - var(--kb-header-h) - 100px);
		margin-top: 12px;
		box-shadow: none;
	}
}
@media (max-width: 639px) {
	.kb-search-toggle {
		margin-right: -10px;
	}
}

/* --- In the home page's hero ---------------------------------------------- */

.kb-search--hero {
	max-width: 772px;
	margin: 32px auto 0;
}
.kb-search--hero .kb-search__icon {
	left: 20px;
}
.kb-search--hero .kb-search__input {
	height: 60px;
	padding: 0 20px 0 56px;
	border: 0;
	box-shadow: var(--hoc-shadow-md);
	font-size: var(--hoc-t-body-lg);
}
.kb-search--hero .kb-search__panel {
	right: 0;
	left: 0;
	width: auto;
}
@media (max-width: 639px) {
	.kb-search--hero {
		margin-top: 24px;
	}
	.kb-search--hero .kb-search__icon {
		left: 16px;
	}
	.kb-search--hero .kb-search__input {
		height: 52px;
		padding-left: 48px;
		font-size: var(--hoc-t-body);
	}
}

/* --- The results ---------------------------------------------------------- */

.kb-search__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	width: max(100%, 480px);
	max-width: calc(100vw - 2 * var(--kb-gutter));
	max-height: min(70vh, 640px);
	padding: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: var(--hoc-r-lg);
	background: var(--hoc-paper);
	box-shadow: var(--hoc-shadow-lg);
}
.kb-search__panel[hidden],
.kb-search__nothing[hidden] {
	display: none;
}
.kb-search__nothing {
	margin: 0;
	padding: 10px 12px 6px;
	font-size: var(--hoc-t-body);
	line-height: 1.4;
}
.kb-search__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.kb-search__option {
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-left: 2px solid transparent;
	border-radius: 0 var(--hoc-r-sm) var(--hoc-r-sm) 0;
	background: none;
	color: var(--hoc-fg);
	font: 400 var(--hoc-t-body-sm) / 1.45 var(--hoc-font-body);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.kb-search__option:hover {
	color: var(--hoc-fg);
}
/* The marked row, as the menu marks the page's own: a fill and a bar. */
.kb-search__option[aria-selected='true'] {
	border-left-color: var(--hoc-quantum-blue);
	background: var(--hoc-ink-50);
}
.kb-search__option:active {
	background: var(--hoc-ink-50);
}
.kb-search__title {
	display: block;
	font: 600 var(--hoc-t-body) / 1.35 var(--hoc-font-body);
}
.kb-search__where {
	display: block;
	margin-top: 2px;
}
.kb-search__snippet {
	display: -webkit-box;
	margin-top: 4px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
.kb-search__snippet strong {
	font-weight: 700;
}
@media print {
	.kb-search,
	.kb-search-toggle {
		display: none !important;
	}
}

/* css/video.css */
/* The film at the end of an article (lib/pages/article.mjs, lib/videos.mjs,
   js/video.js), after the text and before "Still unsure?": a heading like the
   text's own h2s, a 16:9 frame drawn as YouTube's player looks before it plays
   (the film's title slide, the channel's "h" and the article's title over a
   shade, the red play button, the length), and a line saying the video plays
   from YouTube. Pressing play puts YouTube's player in the frame
   (.kb-video__player). The colours are look B's (look/b.css), with their
   values as fallbacks. */

.kb-video {
	margin-top: 48px;
}
.kb-video__title {
	margin: 0 0 16px;
	color: var(--b-deep, #001b44);
	font: 700 24px / 1.3 var(--hoc-font-display);
	letter-spacing: -0.01em;
}

.kb-video__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	background: #000000;
}
.kb-video__cover,
.kb-video__player {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.kb-video__cover {
	color: #ffffff;
	text-decoration: none;
}
/* The focus ring: inside the frame (which clips anything outside it), above
   the title slide and the rest (which would cover the link's own outline), and
   in white (the site's see-through orange all but disappears on the dark
   film). Two classes and :focus-visible, to outweigh the site's own ring,
   .kb-look :focus-visible in look/james.css, which comes later. */
.kb-video__frame .kb-video__cover:focus-visible {
	outline: none;
}
.kb-video__frame .kb-video__cover:focus-visible::after {
	position: absolute;
	inset: 0;
	border: 3px solid #ffffff;
	border-radius: 12px;
	content: '';
	pointer-events: none;
}
.kb-video__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The channel's "h" and the title, over a shade at the top, as YouTube draws
   them before a video plays. */
.kb-video__top {
	position: absolute;
	inset: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px 40px;
	background: linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0));
}
.kb-video__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ffffff;
}
.kb-video__avatar img {
	display: block;
	width: 18px;
	height: auto;
}
.kb-video__name {
	overflow: hidden;
	font: 500 18px / 1.3 var(--hoc-font-body, Arial, sans-serif);
	text-overflow: ellipsis;
	text-shadow: 0 0 2px rgb(0 0 0 / 0.5);
	white-space: nowrap;
}

.kb-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	transform: translate(-50%, -50%);
	transition: transform 0.15s;
}
.kb-video__play-bg {
	fill: #ff0033;
}
.kb-video__cover:hover .kb-video__play {
	transform: translate(-50%, -50%) scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
	.kb-video__play {
		transition: none;
	}
}

.kb-video__time {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgb(0 0 0 / 0.8);
	font: 500 13px / 1.4 var(--hoc-font-body, Arial, sans-serif);
}

.kb-video__note {
	margin: 8px 0 0;
	color: var(--b-muted, #667085);
	font-size: 14px;
}

@media (max-width: 639px) {
	.kb-video__title {
		font-size: 21px;
	}
	.kb-video__top {
		gap: 10px;
		padding: 10px 12px 28px;
	}
	.kb-video__avatar {
		width: 32px;
		height: 32px;
	}
	.kb-video__avatar img {
		width: 14px;
	}
	.kb-video__name {
		font-size: 15px;
	}
}

/* look/james.css */
/* The James app's look, from the Aurora design system in Claude Design (the
   look Olav chose for the help centre on 2026-10-08, because people open it
   from inside the app): Inter for all text, Material Symbols for icons, deep
   blue on white and light lilac, white cards. It comes after every other
   stylesheet in /_kb/site.css (lib/write.mjs), so it restyles the site: first
   the site's own tokens set to the James palette, type and shapes, then the
   parts drawn the same as in the app. b.css, look B, follows.

   The palette: deep blue #001b44 (headings, primary buttons), medium blue
   #114e7e (its hover, focus borders), kinetic purple #4967a4 (links, accents,
   hover borders), cipher blue #c8f1fa (tinted fills), polished lilac #d3def0
   (hover and selected), lilac #e6eaf0 (the app's page), greys #f0f0f0 /
   #e0e0e0 (borders), #555 (secondary text), #888 (icons), #111 (text). Focus:
   a pulse red ring. Cards 16px round, buttons 8, fields 12.

   Inter is served by the site itself (assets/fonts/, SIL Open Font License,
   OFL.txt there): Inter 4 as a variable font, weights 100 to 900, in two
   parts by the characters each covers, as Google Fonts serves it. Nothing loads
   from fonts.googleapis.com. */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--hoc-quantum-blue: #001b44;
	--hoc-quantum-blue-900: #114e7e;
	--hoc-core-blue: #114e7e;
	--hoc-core-blue-700: #001b44;
	--hoc-crisp-beige: #e6eaf0;
	--hoc-cipher-blue: #c8f1fa;
	--hoc-cipher-blue-300: #c8f1fa;
	--hoc-cipher-blue-100: #e6eaf0;
	--hoc-kinetic-purple: #4967a4;
	--hoc-polished-lilac: #d3def0;
	--hoc-polished-700: #c2d0e8;
	--hoc-lilac: #d3def0;
	--hoc-lilac-700: #4967a4;
	--hoc-lilac-300: #e6eaf0;
	--hoc-lilac-100: #e6eaf0;
	--hoc-ink-1000: #001b44;
	--hoc-ink-900: #001b44;
	--hoc-ink-800: #114e7e;
	--hoc-ink-700: #555555;
	--hoc-ink-500: #555555;
	--hoc-ink-400: #888888;
	--hoc-ink-300: #888888;
	--hoc-ink-200: #e0e0e0;
	--hoc-ink-100: #f0f0f0;
	--hoc-ink-50: #e6eaf0;
	--hoc-ink-25: #e6eaf0;
	--hoc-hairline: #f0f0f0;
	--hoc-fg: #111111;
	--hoc-text-link: #4967a4;
	--hoc-text-link-hover: #001b44;
	--hoc-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hoc-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hoc-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	--hoc-r-xs: 4px;
	--hoc-r-sm: 8px;
	--hoc-r-md: 8px;
	--hoc-r-lg: 16px;
	--hoc-r-xl: 20px;
	--hoc-shadow-sm: 0 2px 8px rgb(0 0 0 / 0.06);
	--hoc-shadow-md: 0 4px 16px rgb(0 0 0 / 0.1);
	--hoc-shadow-lg: 0 4px 16px rgb(0 0 0 / 0.1);
	--hoc-shadow-xl: 0 24px 64px rgb(0 0 0 / 0.28);
	--hoc-shadow-navy: 0 4px 16px rgb(0 27 68 / 0.28);
	--kb-header-h: 64px;
}

body.kb-look {
	color: #111111;
	font-size: 14px;
}
.kb-look :focus-visible {
	outline: 3px solid rgb(255 78 29 / 0.45);
	outline-offset: 1px;
}

/* The icons are Material Symbols as inline SVGs (lib/icons.mjs, class kb-ms),
   in the colour of the text around them: no icon font to load. */

/* --- The logo and "Help centre" ----------------------------------------- */

.kb-look .kb-brand {
	gap: 12px;
	color: #001b44;
}
/* The James logo (brand/README.md): 32px tall in the 64px header, as in the
   James app's menu. */
.kb-look .kb-brand__logo {
	display: block;
	width: auto;
	height: 32px;
}
.kb-look .kb-brand__label {
	height: 20px;
	padding-left: 12px;
	border-left: 1px solid #c2d0e8;
	color: #001b44;
	font: 600 14px / 1 var(--hoc-font-body);
	letter-spacing: normal;
	text-transform: none;
}
@media (min-width: 640px) {
	.kb-look .kb-brand__label {
		display: inline-flex;
	}
}

/* --- Header controls: menu button, search toggle ------------------------- */

.kb-look .kb-menu-button {
	color: #001b44;
	font: 600 14px / 1 var(--hoc-font-body);
}
@media (min-width: 640px) {
	.kb-look .kb-menu-button {
		height: 36px;
		border-color: #e0e0e0;
		border-radius: 8px;
	}
	.kb-look .kb-menu-button:hover {
		border-color: #4967a4;
		background: #ffffff;
	}
}
.kb-look .kb-search-toggle {
	color: #001b44;
}
@media (hover: hover) {
	.kb-look .kb-search-toggle:hover {
		background: #d3def0;
		color: #001b44;
	}
}
.kb-look .kb-drawer {
	box-shadow: 4px 0 16px -4px rgb(0 0 0 / 0.1);
}
.kb-look .kb-drawer::backdrop {
	background: rgb(0 27 68 / 0.35);
}

/* --- The search box ------------------------------------------------------ */

.kb-look .kb-search__icon {
	color: #4967a4;
}
.kb-look .kb-search__input {
	padding-left: 40px;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	color: #111111;
	font: 400 14px / 1.2 var(--hoc-font-body);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.kb-look .kb-search__input::placeholder {
	color: #888888;
	opacity: 1;
}
.kb-look .kb-search__input:hover {
	border-color: #4967a4;
}
.kb-look .kb-search__input:focus {
	border-color: #114e7e;
	outline: none;
	box-shadow: 0 0 0 3px rgb(255 78 29 / 0.3);
}
.kb-look .kb-search__key {
	border: 0;
	border-radius: 4px;
	background: #f0f0f0;
	color: #555555;
	font: 600 12px / 22px var(--hoc-font-body);
}
.kb-look .kb-search--hero .kb-search__input {
	height: 58px;
	padding-left: 52px;
	border: 1px solid #e0e0e0;
	font-size: 17px;
	box-shadow: none;
}
.kb-look .kb-search--hero .kb-search__icon {
	left: 18px;
}
.kb-look .kb-search__panel {
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgb(0 0 0 / 0.14);
}
.kb-look .kb-search__option {
	border-left: 0;
	border-radius: 8px;
}
.kb-look .kb-search__option:hover {
	background: #e6eaf0;
}
.kb-look .kb-search__option[aria-selected='true'] {
	background: #d3def0;
}
.kb-look .kb-search__title {
	color: #001b44;
	font-weight: 600;
}
.kb-look .kb-search__where,
.kb-look .kb-search__snippet {
	color: #555555;
}
.kb-look .kb-search__snippet strong {
	color: #111111;
}
.kb-look .kb-search--header[data-open] {
	background: #ffffff;
}

/* --- Buttons: secondary unless primary; no movement when pressed --------- */

.kb-look .kb-button {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #ffffff;
	color: #001b44;
	font: 600 14px / 1 var(--hoc-font-body);
	transition: background 0.12s, border-color 0.12s;
}
.kb-look .kb-button:hover {
	border-color: #4967a4;
	background: #ffffff;
	color: #001b44;
}
.kb-look .kb-button--primary {
	border-color: #001b44;
	background: #001b44;
	color: #ffffff;
}
.kb-look .kb-button--primary:hover {
	border-color: #114e7e;
	background: #114e7e;
	color: #ffffff;
}
.kb-look .kb-button:active {
	transform: none;
	filter: none;
}

/* --- Shared parts: breadcrumbs, article lists, notices, footer ----------- */

.kb-look .kb-crumbs ol {
	font-size: 13px;
}
.kb-look .kb-crumbs a {
	color: #4967a4;
	font-weight: 500;
}
.kb-look .kb-crumbs a:hover {
	color: #001b44;
}
.kb-look .kb-crumbs__sep {
	color: #888888;
}
.kb-look .kb-crumbs .cur {
	color: #111111;
	font-weight: 400;
}
.kb-look .kb-title {
	color: #001b44;
	font-weight: 700;
}
.kb-look .kb-lede {
	color: #555555;
}
.kb-look .kb-doclist__row {
	border-top-color: #f0f0f0;
}
.kb-look .kb-doclist__row:last-child {
	border-bottom-color: #f0f0f0;
}
.kb-look .kb-doclist__icon {
	color: #888888;
}
.kb-look .kb-doclist__title {
	color: #001b44;
}
.kb-look .kb-doclist__title:hover {
	color: #4967a4;
}
.kb-look .kb-doclist__sub,
.kb-look .kb-doclist__end,
.kb-look .kb-topic__count,
.kb-look .kb-all__count {
	color: #555555;
}
.kb-look .kb-notice {
	border-radius: 12px;
	background: #e6eaf0;
}
.kb-look .kb-footer {
	margin-top: 0;
	padding: 20px var(--kb-gutter) 24px;
	border-top: 1px solid #e0e0e0;
	color: #555555;
	font-size: 13px;
}

/* --- The article's text --------------------------------------------------- */

.kb-look .kb-article-body strong {
	color: #001b44;
	font-weight: 600;
}
.kb-look .kb-article-body a {
	color: #4967a4;
	text-decoration-color: rgb(73 103 164 / 0.4);
	text-underline-offset: 3px;
}
.kb-look .kb-article-body a:hover {
	color: #001b44;
	text-decoration-color: currentColor;
}
.kb-look .kb-article-body li::marker {
	color: #4967a4;
}
.kb-look .kb-article-body code {
	background: #f0f0f0;
	border-radius: 4px;
}
.kb-look .kb-article-body pre {
	border-radius: 12px;
	background: #f0f0f0;
}

/* Steps: each number in a circle (b.css adds the line down to the next one). */
.kb-look .kb-article-body ol.kb-steps {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-left: 0;
	list-style: none;
	counter-reset: kb-step;
}
.kb-look .kb-article-body ol.kb-steps > li {
	position: relative;
	margin: 0;
	padding-left: 40px;
	counter-increment: kb-step;
}
.kb-look .kb-article-body ol.kb-steps > li::before {
	content: counter(kb-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #001b44;
	color: #ffffff;
	font: 700 13px / 1 var(--hoc-font-body);
}

/* Notes: a rounded box with its icon, no bar at the side. */
.kb-look .kb-note {
	position: relative;
	margin: 20px 0;
	padding: 16px 18px 16px 50px;
	border: 0;
	border-radius: 12px;
	background: #e6eaf0;
}
/* Its icon is the Material Symbol's own file in /_kb/icons/ (lib/write.mjs),
   used as a mask over the note's colour. */
.kb-look .kb-note::before {
	content: '';
	position: absolute;
	top: 15px;
	left: 16px;
	width: 22px;
	height: 22px;
	background: currentColor;
	color: #4967a4;
	-webkit-mask: url('icons/info.svg') center / contain no-repeat;
	mask: url('icons/info.svg') center / contain no-repeat;
}
.kb-look .kb-note--tip {
	background: #c8f1fa;
}
.kb-look .kb-note--tip::before {
	-webkit-mask-image: url('icons/lightbulb.svg');
	mask-image: url('icons/lightbulb.svg');
	color: #001b44;
}
.kb-look .kb-note--caution {
	background: #fffbeb;
	box-shadow: inset 0 0 0 1px #fde68a;
}
.kb-look .kb-note--caution::before {
	-webkit-mask-image: url('icons/warning.svg');
	mask-image: url('icons/warning.svg');
	color: #d97706;
}
.kb-look .kb-note--danger {
	background: #fef2f2;
	box-shadow: inset 0 0 0 1px #fecaca;
}
.kb-look .kb-note--danger::before {
	-webkit-mask-image: url('icons/error.svg');
	mask-image: url('icons/error.svg');
	color: #dc2626;
}
.kb-look .kb-note .kb-note__title {
	margin: 0 0 4px;
	color: #001b44;
	font: 700 14px / 1.4 var(--hoc-font-body);
}
.kb-look .kb-note--caution .kb-note__title {
	color: #92400e;
}
.kb-look .kb-note--danger .kb-note__title {
	color: #991b1b;
}
.kb-look .kb-note__content {
	font-size: 14px;
	line-height: 1.6;
}
.kb-look .kb-table th {
	border-bottom-color: #e0e0e0;
	color: #001b44;
	font: 600 13px / 1.4 var(--hoc-font-body);
}
.kb-look .kb-table td {
	border-bottom-color: #f0f0f0;
}
.kb-look .kb-figure {
	border-color: #f0f0f0;
	border-radius: 12px;
}
.kb-look .kb-status {
	font-family: var(--hoc-font-body);
	color: #001b44;
}

/* --- "Was this article helpful?" ----------------------------------------- */

.kb-look .kb-helpful__vote {
	width: 40px;
	min-height: 40px;
}
.kb-look .kb-helpful__vote[aria-pressed='true'] {
	border-color: #001b44;
	background: #001b44;
	color: #ffffff;
}
.kb-look .kb-helpful__thanks {
	color: #555555;
	font-size: 13px;
}

/* look/b.css */
/* Look B, "Quiet docs" (lib/pages/layout.mjs, home.mjs, article.mjs): white
   and roomy, reading first, in the James app's colours and type (james.css,
   before this), as Even Elton reworked it (2026-10-14).
   The header spans the window; the menu is a light grey column on the left
   from 1024px (a drawer below), not on the home page; the article is 720px
   wide in the middle of what is left, with "On this page" at the right from
   1200px. The home page opens with a lilac banner.

   Decided with Olav (2026-10-16): a Polished Lilac banner, topic links in
   the header on the home page only, "/" as the search key; "Need more help?"
   (with its buttons) and "Still unsure?" send questions to James. */

body.kb-look--b {
	--b-deep: #001b44;
	--b-medium: #114e7e;
	--b-kinetic: #4967a4;
	--b-cipher: #c8f1fa;
	--b-lilac: #d3def0;
	--b-beige: #f2efe5;
	--b-text: #0b1b33;
	--b-body: #1f2a3c;
	--b-muted: #667085;
	--b-soft: #8a94a6;
	--b-line: #e6e9ef;
	--b-rail: #f7f8fa;
	/* The space beside the article's text. */
	--b-pad: var(--kb-gutter);
	background: #ffffff;
	color: var(--b-text);
	font-size: 15px;
}
@media (min-width: 640px) {
	body.kb-look--b {
		--b-pad: clamp(24px, 5vw, 72px);
	}
}
.kb-look--b .kb-button {
	border-radius: 999px;
}

/* --- Header: wordmark, the topics (home page), search --------------------- */

.kb-look--b .kb-header {
	background: #ffffff;
	border-bottom: 1px solid var(--b-line);
}
.kb-look--b .kb-header__row {
	gap: 24px;
	padding-inline: var(--kb-gutter);
}
@media (min-width: 640px) {
	.kb-look--b .kb-header__row {
		padding-inline: 24px;
	}
	.kb-look--b.kb-page--home .kb-header__row {
		gap: 32px;
		padding-inline: clamp(24px, 7.5vw, 122px);
	}
}
.kb-look--b .kb-brand__label {
	border-left-color: var(--b-line);
}
/* The menu and the breadcrumbs name the topics on every other page. */
.kb-b-topics {
	display: none;
	flex: 1 1 auto;
	gap: 4px 24px;
	min-width: 0;
	font-size: 14px;
	font-weight: 500;
}
@media (min-width: 860px) {
	.kb-page--home .kb-b-topics {
		display: flex;
	}
}
.kb-b-topics a {
	color: var(--b-text);
	text-decoration: none;
	white-space: nowrap;
}
.kb-b-topics a:hover {
	color: var(--b-medium);
}
.kb-look--b .kb-header__end {
	margin-left: auto;
}
/* Beside the topics from 960px; below that it is the sheet under the header
   (search.css), as wide as the window. */
@media (min-width: 960px) {
	.kb-look--b .kb-search--header {
		width: min(360px, 40vw);
	}
}
.kb-look--b .kb-search--header .kb-search__input {
	height: 38px;
	border-color: var(--b-line);
	border-radius: 10px;
	background: var(--b-rail);
}
.kb-look--b .kb-search--header .kb-search__input:focus {
	background: #ffffff;
}
.kb-look--b .kb-search__input::placeholder {
	color: var(--b-soft);
}
.kb-look--b .kb-search__key {
	border: 1px solid var(--b-line);
	border-radius: 5px;
	background: #ffffff;
	color: var(--b-muted);
}

/* --- The page and its menu column --------------------------------------- */

.kb-look--b .kb-shell {
	padding-top: 0;
}
@media (min-width: 1024px) {
	.kb-look--b .kb-shell--menu {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		column-gap: 0;
		padding-top: 0;
	}
	/* The grey column runs the page's whole height; the menu in it stays in view. */
	.kb-look--b .kb-shell--menu .kb-menu-col {
		position: static;
		display: block;
		align-self: stretch;
		max-height: none;
		padding: 28px 16px 48px;
		overflow: visible;
		border-right: 1px solid var(--b-line);
		background: var(--b-rail);
	}
	.kb-look--b .kb-shell--menu .kb-menu-col > .kb-menu {
		position: sticky;
		top: calc(var(--kb-header-h) + 28px);
		max-height: calc(100vh - var(--kb-header-h) - 56px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.kb-look--b .kb-menu-button {
		display: none;
	}
}
.kb-look--b .kb-menu__all {
	gap: 8px;
	min-height: 34px;
	margin-bottom: 14px;
	padding: 0 10px;
	border-left: 0;
	border-radius: 8px;
	color: var(--b-muted);
	font: 400 14px / 1.3 var(--hoc-font-body);
}
.kb-look--b .kb-menu__all .kb-ms {
	color: inherit;
}
.kb-look--b .kb-menu__all:hover {
	background: none;
	color: var(--b-text);
}
.kb-look--b .kb-menu .kb-menu__sections {
	margin-top: 0;
	border-top: 0;
}
.kb-look--b .kb-menu__sections > li {
	margin-top: 6px;
	border-bottom: 0;
}
.kb-look--b .kb-menu__section > summary {
	min-height: 34px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--b-muted);
	font: 600 13px / 1.3 var(--hoc-font-body);
	letter-spacing: normal;
	text-transform: none;
}
.kb-look--b .kb-menu__section > summary:hover,
.kb-look--b .kb-menu__section[open] > summary {
	background: none;
	color: var(--b-text);
}
.kb-look--b .kb-menu__chevron {
	color: var(--b-soft);
}
/* The topic's articles hang from a thin line; the page's own gets the accent on it. */
.kb-look--b .kb-menu .kb-menu__articles,
.kb-look--b .kb-menu__empty {
	margin: 2px 0 8px 10px;
	padding: 0 0 0 10px;
	border-left: 1px solid var(--b-line);
}
.kb-look--b .kb-menu__articles a,
.kb-look--b .kb-menu__empty a {
	margin: 0 0 0 -11px;
	padding: 6px 10px;
	border-left: 2px solid transparent;
	border-radius: 0;
	color: var(--b-muted);
	font: 400 13.5px / 1.4 var(--hoc-font-body);
}
.kb-look--b .kb-menu__articles a:hover,
.kb-look--b .kb-menu__empty a:hover {
	background: none;
	color: var(--b-text);
}
.kb-look--b .kb-menu__all[aria-current] {
	background: none;
	color: var(--b-deep);
	font-weight: 600;
}
.kb-look--b .kb-menu__articles a[aria-current] {
	border-left-color: var(--b-kinetic);
	background: none;
	color: var(--b-deep);
	font-weight: 600;
}

/* The pages without a layout of their own here (a topic, All articles, 404,
   …): their content in the middle of the space beside the menu. The home page
   and the articles place their own parts. */
.kb-look--b .kb-main {
	padding: 0;
}
.kb-look--b:not(.kb-page--home):not(.kb-page--article) .kb-main {
	padding: 32px var(--b-pad) 72px;
}
@media (min-width: 640px) {
	.kb-look--b:not(.kb-page--home):not(.kb-page--article) .kb-main {
		padding-top: 40px;
		padding-bottom: 96px;
	}
}
.kb-look--b:not(.kb-page--home):not(.kb-page--article) .kb-main > * {
	max-width: 960px;
	margin-inline: auto;
}

/* --- Home: the banner, in Polished Lilac (Olav, 2026-10-16) ----------- */

.kb-b-hero {
	--hero-title: var(--b-deep);
	--hero-sub: #2f4466;
	--pop-label: #2f4466;
	--chip-bg: rgb(255 255 255 / 0.7);
	--chip-bg-hover: #ffffff;
	--chip-border: rgb(0 27 68 / 0.1);
	--chip-text: var(--b-deep);
	padding: 64px var(--kb-gutter) 56px;
	background: var(--b-lilac);
	text-align: center;
}
@media (min-width: 640px) {
	.kb-b-hero {
		padding: 96px 16px 84px;
	}
}
.kb-b-hero__title {
	max-width: 880px;
	margin: 0 auto;
	color: var(--hero-title);
	font: 700 clamp(32px, 4.4vw, 50px) / 1.1 var(--hoc-font-display);
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.kb-b-hero__sub {
	max-width: 500px;
	margin: 18px auto 0;
	color: var(--hero-sub);
	font-size: 18px;
	line-height: 1.55;
	text-wrap: pretty;
}
.kb-b-hero__search {
	max-width: 680px;
	margin: 40px auto 0;
	text-align: start;
}
.kb-look--b .kb-search--hero {
	max-width: none;
}
/* One shadow, no border, on any of the three colours. */
.kb-look--b .kb-search--hero .kb-search__input {
	height: 60px;
	padding-right: 56px;
	padding-left: 52px;
	border: 0;
	border-radius: 12px;
	background: #ffffff;
	color: var(--b-text);
	font-size: 17px;
	box-shadow: 0 1px 2px rgb(0 27 68 / 0.08), 0 12px 32px rgb(0 27 68 / 0.22);
}
.kb-look--b .kb-search--hero .kb-search__input::placeholder {
	color: #7a8494;
}
.kb-look--b .kb-search--hero .kb-search__input:focus {
	box-shadow: 0 1px 2px rgb(0 27 68 / 0.08), 0 12px 32px rgb(0 27 68 / 0.22), 0 0 0 3px rgb(255 78 29 / 0.3);
}
.kb-look--b .kb-search--hero .kb-search__icon {
	left: 20px;
	color: var(--b-medium);
}
.kb-look--b .kb-search--hero .kb-search__key {
	right: 16px;
	color: #7a8494;
}
.kb-b-popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 22px auto 0;
	font-size: 14px;
}
.kb-b-popular__label {
	margin-right: 2px;
	color: var(--pop-label);
}
.kb-b-chip {
	padding: 7px 14px;
	border: 1px solid var(--chip-border);
	border-radius: 999px;
	background: var(--chip-bg);
	color: var(--chip-text);
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s;
}
.kb-b-chip:hover {
	background: var(--chip-bg-hover);
	color: var(--chip-text);
}

/* --- Home: every article by topic, then "Need more help?" ---------------- */

.kb-b-index {
	max-width: calc(1216px + 2 * var(--kb-gutter));
	margin: 0 auto;
	padding: 48px var(--kb-gutter) 72px;
}
@media (min-width: 640px) {
	.kb-b-index {
		padding-top: 64px;
		padding-bottom: 120px;
	}
}
.kb-b-index__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 32px;
}
.kb-b-index__title {
	margin: 0;
	color: var(--b-deep);
	font: 700 22px / 1.3 var(--hoc-font-display);
}
.kb-b-index__meta {
	margin: 0;
	color: #5b6678;
	font-size: 14px;
}
.kb-b-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 48px;
}
.kb-b-group__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--b-line);
	color: var(--b-deep);
	font: 700 16px / 1.3 var(--hoc-font-display);
}
.kb-b-group__title a {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}
.kb-b-group__title a:hover span {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kb-b-group__title .kb-ms {
	color: var(--b-kinetic);
}
.kb-b-group__count {
	color: #5b6678;
	font-size: 13px;
	font-weight: 500;
}
.kb-b-group__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.kb-b-group__list a {
	display: block;
	padding: 7px 0;
	color: var(--b-text);
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
}
.kb-b-group__list a:hover {
	color: var(--b-medium);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kb-b-group__empty {
	margin: 8px 0 0;
	color: #5b6678;
}
.kb-b-help {
	max-width: 520px;
	margin: 56px auto 0;
	padding: 28px 32px;
	border-radius: 14px;
	background: var(--b-beige);
	text-align: center;
}
.kb-b-help__title {
	margin: 0 0 6px;
	color: var(--b-deep);
	font: 700 17px / 1.3 var(--hoc-font-display);
}
.kb-b-help p {
	margin: 0;
	color: #5b6678;
	font-size: 14px;
	line-height: 1.5;
}
.kb-b-help__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}

/* --- Article: the text in the middle, "On this page" at the right -------- */

.kb-look--b .kb-article {
	max-width: none;
}
.kb-b-article__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 32px 0 72px;
}
@media (min-width: 640px) {
	.kb-b-article__grid {
		padding: 40px 0 96px;
	}
}
@media (min-width: 1200px) {
	.kb-b-article__grid {
		grid-template-columns: minmax(0, 1fr) 240px;
	}
}
.kb-b-article__text {
	box-sizing: content-box;
	width: calc(100% - 2 * var(--b-pad));
	min-width: 0;
	max-width: 720px;
	margin-inline: auto;
	padding-inline: var(--b-pad);
}
.kb-look--b .kb-article-head {
	margin-bottom: 0;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--b-line);
}
.kb-look--b .kb-crumbs ol {
	font-size: 13px;
}
.kb-look--b .kb-crumbs a {
	color: var(--b-muted);
	font-weight: 400;
}
.kb-look--b .kb-crumbs a:hover {
	color: var(--b-text);
}
.kb-look--b .kb-crumbs__sep {
	color: var(--b-soft);
}
.kb-look--b .kb-crumbs .cur {
	color: var(--b-text);
}
.kb-look--b .kb-title {
	margin: 16px 0 0;
	color: var(--b-deep);
	font: 700 clamp(30px, 3.6vw, 42px) / 1.12 var(--hoc-font-display);
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.kb-look--b .kb-lede {
	margin: 16px 0 0;
	color: #3d4a5e;
	font-size: 17px;
	line-height: 1.55;
}
@media (min-width: 640px) {
	.kb-look--b .kb-lede {
		font-size: 19px;
	}
}
.kb-look--b .kb-meta {
	margin-top: 22px;
	color: var(--b-muted);
	font-size: 13px;
}
.kb-look--b .kb-copy-link {
	min-height: 36px;
	margin: -8px -10px;
	padding: 0 10px;
	border-radius: 8px;
	color: var(--b-medium);
	font: 500 13px / 1 var(--hoc-font-body);
}
.kb-look--b .kb-copy-link:hover {
	color: var(--b-deep);
}

/* The text: bold for what the screen says, colour and a line only for links. */
.kb-look--b .kb-article-body {
	padding-top: 24px;
	color: var(--b-body);
	font-size: 16.5px;
	line-height: 1.75;
}
.kb-look--b .kb-article-body > :first-child {
	margin-top: 0;
}
.kb-look--b .kb-article-body p {
	margin: 0 0 24px;
}
.kb-look--b .kb-article-body h2 {
	margin: 48px 0 16px;
	color: var(--b-deep);
	font: 700 24px / 1.3 var(--hoc-font-display);
	letter-spacing: -0.01em;
}
.kb-look--b .kb-article-body h3 {
	margin: 32px 0 12px;
	color: var(--b-deep);
	font: 700 19px / 1.35 var(--hoc-font-display);
}
.kb-look--b .kb-article-body strong {
	color: var(--b-text);
	font-weight: 600;
}
.kb-look--b .kb-article-body a {
	color: var(--b-medium);
	text-decoration: underline;
	text-decoration-color: rgb(17 78 126 / 0.35);
	text-underline-offset: 3px;
}
.kb-look--b .kb-article-body a:hover {
	color: var(--b-deep);
	text-decoration-color: currentColor;
}
.kb-look--b .kb-article-body li::marker {
	color: var(--b-kinetic);
}
/* Steps: a filled number, a thin line down to the next one. */
.kb-look--b .kb-article-body ol.kb-steps {
	gap: 22px;
	margin: 0 0 24px;
}
.kb-look--b .kb-article-body ol.kb-steps > li {
	padding-left: 48px;
}
.kb-look--b .kb-article-body ol.kb-steps > li > :last-child {
	margin-bottom: 0;
}
.kb-look--b .kb-article-body ol.kb-steps > li::before {
	top: 1px;
	width: 28px;
	height: 28px;
	border: 0;
	background: var(--b-deep);
	color: #ffffff;
	font: 600 13px / 1 var(--hoc-font-body);
}
.kb-look--b .kb-article-body ol.kb-steps > li:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 36px;
	bottom: -16px;
	left: 13.5px;
	width: 1px;
	background: var(--b-line);
}
/* Notes: a soft tint and an accent bar at the side. */
.kb-look--b .kb-note {
	margin: 28px 0;
	padding: 16px 18px 16px 48px;
	border-left: 3px solid var(--b-medium);
	border-radius: 0 10px 10px 0;
	background: #eefafd;
	box-shadow: none;
}
.kb-look--b .kb-note::before {
	top: 18px;
	left: 16px;
	width: 20px;
	height: 20px;
	color: var(--b-medium);
}
.kb-look--b .kb-note .kb-note__title {
	margin: 0 0 2px;
	color: var(--b-deep);
	font: 700 15.5px / 1.6 var(--hoc-font-body);
}
.kb-look--b .kb-note__content {
	color: var(--b-body);
	font-size: 15.5px;
	line-height: 1.6;
}
.kb-look--b .kb-note__content > :last-child {
	margin-bottom: 0;
}
.kb-look--b .kb-note--tip {
	border-left-color: var(--b-kinetic);
	background: #f2f5fb;
}
.kb-look--b .kb-note--tip::before {
	color: var(--b-kinetic);
}
.kb-look--b .kb-note--caution {
	border-left-color: #d97706;
	background: #fffaeb;
}
.kb-look--b .kb-note--caution::before {
	color: #d97706;
}
.kb-look--b .kb-note--caution .kb-note__title {
	color: #92400e;
}
.kb-look--b .kb-note--danger {
	border-left-color: #dc2626;
	background: #fef3f2;
}
.kb-look--b .kb-note--danger::before {
	color: #dc2626;
}
.kb-look--b .kb-note--danger .kb-note__title {
	color: #991b1b;
}

/* --- After the text: Ask, the vote, previous and next, related ----------- */

.kb-b-unsure {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 48px;
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--b-beige);
}
.kb-b-unsure__text {
	flex: 1 1 260px;
}
.kb-b-unsure__text p {
	margin: 0;
	color: var(--b-body);
	font-size: 15px;
	line-height: 1.5;
}
.kb-b-unsure__text .kb-b-unsure__title {
	margin-bottom: 2px;
	color: var(--b-deep);
	font: 700 16px / 1.4 var(--hoc-font-display);
}
.kb-look--b .kb-helpful {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
	padding: 20px 0;
	border: 0;
	border-top: 1px solid var(--b-line);
	border-bottom: 1px solid var(--b-line);
	border-radius: 0;
	background: none;
}
.kb-look--b .kb-helpful__title {
	margin: 0;
	color: var(--b-body);
	font: 400 15px / 1.4 var(--hoc-font-body);
}
.kb-look--b .kb-helpful__votes {
	gap: 8px;
}
.kb-look--b .kb-helpful__vote {
	gap: 6px;
	width: auto;
	min-height: 34px;
	padding: 0 14px;
	border-color: var(--b-line);
	color: var(--b-text);
	font-size: 14px;
}
.kb-look--b .kb-helpful__vote:hover {
	border-color: var(--b-kinetic);
}
.kb-look--b .kb-helpful__vote[aria-pressed='true'] {
	border-color: var(--b-deep);
	background: var(--b-deep);
	color: #ffffff;
}
.kb-look--b .kb-helpful__thanks {
	color: var(--b-muted);
	font-size: 14px;
}
.kb-look--b .kb-helpful__more {
	flex-basis: 100%;
	margin-top: 4px;
}
.kb-b-pager {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 16px;
	margin-top: 32px;
}
.kb-b-pager__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--b-line);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color 0.15s;
}
.kb-b-pager__link:hover {
	border-color: var(--b-kinetic);
}
.kb-b-pager__link--next {
	align-items: flex-end;
	text-align: right;
}
.kb-b-pager__dir {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--b-muted);
	font-size: 12.5px;
}
.kb-b-pager__title {
	color: var(--b-deep);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}
.kb-b-related {
	margin-top: 56px;
}
.kb-b-related__title {
	margin: 0 0 16px;
	color: var(--b-deep);
	font: 700 18px / 1.3 var(--hoc-font-display);
}
.kb-b-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kb-b-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--b-line);
	border-radius: 12px;
	background: var(--b-rail);
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}
.kb-b-card:hover {
	border-color: var(--b-kinetic);
	background: #ffffff;
}
.kb-b-card__title {
	color: var(--b-deep);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}
/* The description, cut to three lines. */
.kb-b-card__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--b-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

/* --- "On this page", alone at the right ---------------------------------- */

.kb-b-rail {
	display: none;
}
@media (min-width: 1200px) {
	.kb-b-rail {
		display: block;
		padding-right: 24px;
	}
}
.kb-look--b .kb-b-rail .kb-toc {
	position: sticky;
	top: calc(var(--kb-header-h) + 40px);
	display: block;
	max-height: calc(100vh - var(--kb-header-h) - 80px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.kb-look--b .kb-toc__title {
	margin: 0 0 10px;
	color: var(--b-muted);
	font: 600 13px / 1.35 var(--hoc-font-body);
	letter-spacing: normal;
	text-transform: none;
}
.kb-look--b .kb-toc a {
	padding: 5px 0 5px 12px;
	border-left: 2px solid var(--b-line);
	color: var(--b-soft);
	font-size: 13.5px;
	line-height: 1.4;
}
.kb-look--b .kb-toc a:hover {
	color: var(--b-text);
	text-decoration: none;
}
.kb-look--b .kb-toc a[aria-current] {
	border-left-color: var(--b-kinetic);
	color: var(--b-deep);
	font-weight: 500;
}
.kb-look--b .kb-toc__item--h3 a {
	padding-left: 24px;
}

/* --- The other pages (topic, All articles, 404, …) ------------------------ */

.kb-look--b .kb-topic .kb-title,
.kb-look--b .kb-all .kb-title,
.kb-look--b .kb-notfound .kb-title {
	font-size: 36px;
}
.kb-look--b .kb-notfound .kb-title,
.kb-look--b .kb-notfound .kb-lede {
	margin-inline: auto;
}
.kb-look--b .kb-footer {
	border-top-color: var(--b-line);
	color: var(--b-muted);
}