/*
 * Wonia design system ("Registr", plan-design.md). Plain CSS, no build step: the deploy uploads the
 * repository as it is. Layers from the weakest to the strongest; a rule of a later layer wins over
 * an earlier one whatever its specificity, so utilities always win over components.
 *
 * Colour is data: the chrome is neutral slate, colour marks an entity type, a state, money or a
 * risk. Every colour is a token below; templates never use a hex value.
 */
@layer reset, tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------- fonts */
@font-face {
	font-family: "IBM Plex Sans Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 700;
	src: url("../a/fonts/plex-sans-latin-ext.woff2") format("woff2-variations");
	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;
}
@font-face {
	font-family: "IBM Plex Sans Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 700;
	src: url("../a/fonts/plex-sans-latin.woff2") format("woff2-variations");
	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: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../a/fonts/plex-mono-latin-ext-400.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;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../a/fonts/plex-mono-latin-400.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: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url("../a/fonts/plex-mono-latin-ext-500.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;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url("../a/fonts/plex-mono-latin-500.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;
}

/* ---------------------------------------------------------------- reset */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { margin: 0; }
	img, svg, canvas, video { vertical-align: middle; }
	img, video { max-width: 100%; height: auto; }
	input, button, select, textarea { font: inherit; color: inherit; }
	table { border-collapse: collapse; }
	[hidden] { display: none !important; }
}

/* ---------------------------------------------------------------- tokens */
@layer tokens {
	:root {
		color-scheme: light;

		--bg: #f5f7f9;
		--surface: #ffffff;
		--surface-2: #f2f4f7;
		--surface-3: #e8ecf0;
		--border: #e3e7ec;
		--border-strong: #cbd3dc;
		--text: #16202a;
		--text-2: #556270;
		--text-3: #7d8996;
		--accent: #2448c8;
		--accent-hover: #1d3aa6;
		--accent-soft: #edf1fd;
		--accent-on: #ffffff;
		--sidebar-bg: #fbfcfd;
		--row-hover: #f6f8fb;
		--overlay: rgb(15 26 36 / .45);

		/* entity and signal colours: the text colour and its tint */
		--domain: #b4500c;   --domain-tint: #fff1e5;
		--contact: #8a6200;  --contact-tint: #fdf5d8;
		--company: #0b7556;  --company-tint: #e4f5ee;
		--person: #6a3ec4;   --person-tint: #f0eafd;
		--money: #b02e66;    --money-tint: #fceaf2;
		--risk: #c0262d;     --risk-tint: #fdecec;
		--ok: #13794a;       --ok-tint: #e6f4ec;
		--warn: #9a5b00;     --warn-tint: #fff4dc;
		--info: #2448c8;     --info-tint: #edf1fd;
		--neutral: #556270;  --neutral-tint: #eef1f4;

		/* chart and map series, in this order */
		--series-1: #2448c8;
		--series-2: #b02e66;
		--series-3: #0b7556;
		--series-4: #b4500c;
		--series-5: #6a3ec4;
		--series-6: #8a6200;

		--font-sans: "IBM Plex Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		--fs-xs: 12px;
		--fs-s: 13px;
		--fs-m: 14px;
		--fs-l: 16px;
		--fs-xl: 20px;
		--fs-2xl: 24px;
		--fs-3xl: 28px;

		--radius-s: 6px;
		--radius: 10px;
		--shadow-pop: 0 10px 30px rgb(15 26 36 / .14), 0 2px 6px rgb(15 26 36 / .08);
		--shadow-card: 0 1px 2px rgb(15 26 36 / .04);
		--focus-ring: 0 0 0 3px rgb(36 72 200 / .28);
		--ease: cubic-bezier(.2, .7, .3, 1);

		--sidebar-w: 236px;
		--sidebar-rail: 60px;
		--topbar-h: 56px;
		--gutter: 28px;
	}

	/* the dark theme: chosen in the user menu (data-theme), otherwise by the system */
	:root[data-theme="dark"] {
		color-scheme: dark;

		--bg: #0d131a;
		--surface: #141c25;
		--surface-2: #1a2430;
		--surface-3: #223040;
		--border: #243140;
		--border-strong: #334457;
		--text: #e5eaef;
		--text-2: #9ba8b5;
		--text-3: #76838f;
		--accent: #8ea6ff;
		--accent-hover: #b0c1ff;
		--accent-soft: #1c2747;
		--accent-on: #0d131a;
		--sidebar-bg: #111821;
		--row-hover: #18212c;
		--overlay: rgb(0 0 0 / .6);

		--domain: #ff9a52;   --domain-tint: #3a2414;
		--contact: #e9c25a;  --contact-tint: #352c12;
		--company: #4fd1a5;  --company-tint: #10302a;
		--person: #b69cff;   --person-tint: #2a2147;
		--money: #f27aae;    --money-tint: #3a1a2a;
		--risk: #ff7a7a;     --risk-tint: #3d1a1c;
		--ok: #5fd39a;       --ok-tint: #12301f;
		--warn: #f0b456;     --warn-tint: #36280f;
		--info: #8ea6ff;     --info-tint: #1c2747;
		--neutral: #9ba8b5;  --neutral-tint: #1f2a36;

		--series-1: #8ea6ff;
		--series-2: #f27aae;
		--series-3: #4fd1a5;
		--series-4: #ff9a52;
		--series-5: #b69cff;
		--series-6: #e9c25a;

		--shadow-pop: 0 10px 30px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .4);
		--shadow-card: none;
		--focus-ring: 0 0 0 3px rgb(142 166 255 / .35);
	}
}

/* ---------------------------------------------------------------- base */
@layer base {
	html { scroll-padding-top: calc(var(--topbar-h) + 64px); }
	body {
		font-family: var(--font-sans);
		font-size: var(--fs-m);
		line-height: 1.5;
		color: var(--text);
		background: var(--bg);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-feature-settings: "kern";
	}
	h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.25; color: var(--text); }
	h1 { font-size: var(--fs-2xl); letter-spacing: -.012em; }
	h2 { font-size: var(--fs-xl); letter-spacing: -.008em; }
	h3 { font-size: var(--fs-l); }
	h4, h5, h6 { font-size: var(--fs-m); }
	p { margin: 0 0 .75em; }
	p:last-child { margin-bottom: 0; }
	a { color: var(--accent); text-decoration: none; }
	a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
	b, strong { font-weight: 600; }
	/* links inside running text are underlined, not told by colour alone */
	:is(p, li, .sub, .page-lead, .notice, .search-note, .panel-note, .empty) a:not(.btn, .ent:not(.is-plain), .pill, .tag) { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
	small { font-size: var(--fs-s); }
	hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
	code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }
	::selection { background: rgb(36 72 200 / .18); }
	:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
	input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
	table { font-variant-numeric: tabular-nums; }
	th { text-align: left; font-weight: 600; }
	ul, ol { padding-left: 1.25em; margin: 0 0 .75em; }
	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
	}
}

/* ---------------------------------------------------------------- layout: the app shell */
@layer layout {
	.app {
		display: grid;
		grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
		grid-template-rows: var(--topbar-h) auto;
		grid-template-areas: "side top" "side main";
		min-height: 100vh;
	}
	.rail .app { --sidebar-w: var(--sidebar-rail); }

	/* sidebar */
	.sidebar {
		grid-area: side;
		position: sticky;
		top: 0;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: var(--sidebar-bg);
		border-right: 1px solid var(--border);
		z-index: 30;
	}
	.brand {
		display: flex;
		align-items: center;
		gap: 10px;
		height: var(--topbar-h);
		padding: 0 16px;
		color: var(--text);
		font-weight: 650;
		font-size: 17px;
		letter-spacing: .02em;
		flex: none;
	}
	.brand:hover { color: var(--text); text-decoration: none; }
	.brand-mark { width: 28px; height: 28px; flex: none; }
	.brand-mark .mark-bg { fill: var(--mark-bg, #16202a); }
	.brand-mark .mark-fg { stroke: var(--mark-fg, #ffffff); }
	.brand-mark .mark-accent { stroke: var(--mark-accent, #8ea6ff); }
	.brand-mark .mark-dots { fill: var(--mark-accent, #8ea6ff); }
	:root[data-theme="dark"] .brand-mark, .auth-aside .brand-mark { --mark-bg: #e5eaef; --mark-fg: #16202a; --mark-accent: #2448c8; }
	.brand-sub { display: block; font-size: 11px; font-weight: 500; letter-spacing: .01em; color: var(--text-2); line-height: 1.2; }
	.sidenav { flex: 1; overflow-y: auto; padding: 6px 10px 16px; scrollbar-width: thin; }
	.nav-group { margin-top: 14px; }
	.nav-label {
		padding: 0 10px 4px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .07em;
		text-transform: uppercase;
		color: var(--text-2);
	}
	.sidenav a {
		position: relative;
		display: flex;
		align-items: center;
		gap: 10px;
		height: 34px;
		padding: 0 10px;
		border-radius: var(--radius-s);
		color: var(--text-2);
		font-weight: 500;
		white-space: nowrap;
	}
	.sidenav a .icon { width: 18px; height: 18px; flex: none; }
	.sidenav a:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
	.sidenav a.is-active { background: var(--accent-soft); color: var(--accent); }
	.sidenav a.is-active::before {
		content: "";
		position: absolute;
		left: -10px;
		top: 8px;
		bottom: 8px;
		width: 3px;
		border-radius: 0 3px 3px 0;
		background: var(--accent);
	}
	.nav-count {
		margin-left: auto;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 999px;
		background: var(--accent);
		color: var(--accent-on);
		font-size: 11px;
		font-weight: 600;
		line-height: 20px;
		text-align: center;
	}
	.sidebar-foot { flex: none; padding: 10px; border-top: 1px solid var(--border); }
	.sidebar-foot button {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		height: 32px;
		padding: 0 10px;
		border: 0;
		border-radius: var(--radius-s);
		background: none;
		color: var(--text-2);
		cursor: pointer;
		white-space: nowrap;
	}
	.sidebar-foot button:hover { background: var(--surface-3); color: var(--text); }
	.rail .app .nav-label, .rail .app .nav-text, .rail .app .brand-text { display: none; }
	.rail .app .nav-group { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
	.rail .app .nav-group:first-child { border-top: 0; padding-top: 0; }
	.rail .app .sidenav a { justify-content: center; padding: 0; }
	.rail .app .nav-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
	.rail .app .brand { justify-content: center; padding: 0; }
	.rail .app .sidebar-foot button { justify-content: center; padding: 0; }

	/* top bar */
	.topbar {
		grid-area: top;
		position: sticky;
		top: 0;
		z-index: 20;
		display: flex;
		align-items: center;
		gap: 12px;
		height: var(--topbar-h);
		padding: 0 var(--gutter);
		background: color-mix(in srgb, var(--surface) 92%, transparent);
		backdrop-filter: blur(8px);
		border-bottom: 1px solid var(--border);
	}
	.topbar-menu { display: none; }
	.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

	/* the page */
	.main { grid-area: main; min-width: 0; display: flex; flex-direction: column; }
	.page { flex: 1; width: 100%; max-width: 1680px; margin: 0 auto; padding: 22px var(--gutter) 48px; }
	.page.is-narrow { max-width: 1240px; }
	.page.is-full { max-width: none; padding: 0; display: flex; flex-direction: column; }

	.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-bottom: 20px; }
	.page-header > .page-heading { flex: 1 1 420px; min-width: 0; }
	.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font-size: var(--fs-s); color: var(--text-2); }
	.crumbs a { color: var(--text-2); }
	.crumbs a:hover { color: var(--accent); }
	.crumbs .icon { width: 14px; height: 14px; color: var(--text-3); }
	.result-nav { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--border); font-variant-numeric: tabular-nums; }
	.result-nav a { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 4px; }
	.result-nav a:hover { background: var(--surface-3); text-decoration: none; }
	.result-nav .is-off { color: var(--text-3); padding: 1px 6px; }
	.eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 4px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--text-2);
	}
	.eyebrow .icon { width: 14px; height: 14px; }
	.page-title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.014em; overflow-wrap: anywhere; }
	.page-title.is-entity { font-size: var(--fs-3xl); }
	.page-title.is-mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.02em; }
	.page-lead { margin-top: 6px; color: var(--text-2); max-width: 900px; }
	.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; color: var(--text-2); font-size: var(--fs-s); }
	.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

	/* phones and small laptops: the sidebar becomes a drawer */
	@media (max-width: 1023px) {
		:root { --gutter: 16px; }
		.app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
		.rail .app { --sidebar-w: 236px; }
		.sidebar {
			position: fixed;
			left: 0;
			top: 0;
			width: 272px;
			transform: translateX(-100%);
			transition: transform .18s var(--ease);
			box-shadow: var(--shadow-pop);
		}
		.app.is-drawer .sidebar { transform: none; }
		.rail .app .nav-label, .rail .app .nav-text, .rail .app .brand-text { display: revert; }
		.rail .app .sidenav a { justify-content: flex-start; padding: 0 10px; }
		.drawer-scrim { position: fixed; inset: 0; background: var(--overlay); z-index: 25; }
		.topbar-menu { display: inline-flex; }
		.sidebar-foot { display: none; }
		.page { padding-top: 16px; }
		.page-title.is-entity { font-size: var(--fs-2xl); }
	}
}

/* ---------------------------------------------------------------- components */
@layer components {

	/* icons from a/icons.svg */
	.icon {
		width: 16px;
		height: 16px;
		flex: none;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.75;
		stroke-linecap: round;
		stroke-linejoin: round;
		vertical-align: -3px;
	}
	.icon.is-s { width: 14px; height: 14px; vertical-align: -2px; }
	.icon.is-l { width: 20px; height: 20px; }
	.icon.is-spin { animation: spin 1s linear infinite; }
	@keyframes spin { to { transform: rotate(360deg); } }

	/* buttons */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 32px;
		padding: 0 12px;
		border: 1px solid var(--border-strong);
		border-radius: var(--radius-s);
		background: var(--surface);
		color: var(--text);
		font-size: var(--fs-m);
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		user-select: none;
		transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
	}
	.btn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
	.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
	.btn:disabled, .btn.is-disabled { opacity: .5; pointer-events: none; }
	.btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
	.btn.is-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on); }
	.btn.is-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
	.btn.is-ghost:hover { background: var(--surface-3); color: var(--text); }
	.btn.is-danger { color: var(--risk); }
	.btn.is-danger:hover { background: var(--risk-tint); border-color: var(--risk); color: var(--risk); }
	.btn.is-danger.is-solid { background: var(--risk); border-color: var(--risk); color: #fff; }
	.btn.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
	.btn.is-on { background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
	.btn.is-s { height: 28px; padding: 0 9px; font-size: var(--fs-s); gap: 5px; }
	.btn.is-l { height: 40px; padding: 0 18px; font-size: var(--fs-l); }
	.btn.is-icon { width: 32px; padding: 0; }
	.btn.is-icon.is-s { width: 28px; }
	.btn-group { display: inline-flex; }
	.btn-group > .btn { border-radius: 0; margin-left: -1px; }
	.btn-group > .btn:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); margin-left: 0; }
	.btn-group > .btn:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; }
	.btn-group > .btn.is-active { position: relative; z-index: 1; }

	/* form controls */
	.input, .select, .textarea {
		display: block;
		width: 100%;
		height: 34px;
		padding: 0 10px;
		border: 1px solid var(--border-strong);
		border-radius: var(--radius-s);
		background: var(--surface);
		color: var(--text);
		font-size: var(--fs-m);
		transition: border-color .12s, box-shadow .12s;
	}
	.textarea { height: auto; min-height: 80px; padding: 8px 10px; line-height: 1.45; resize: vertical; }
	.select {
		appearance: none;
		padding-right: 30px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 8px center;
		background-size: 16px;
		cursor: pointer;
	}
	.input::placeholder, .textarea::placeholder { color: var(--text-3); }
	.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--border-strong) 60%, var(--text-2)); }
	.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
	.input.is-s, .select.is-s { height: 30px; font-size: var(--fs-s); }
	.select.is-auto, .input.is-auto { width: auto; }
	.input.is-l { height: 44px; font-size: var(--fs-l); padding: 0 14px; }
	.input[type="date"] { font-variant-numeric: tabular-nums; }
	.input.has-error, .select.has-error { border-color: var(--risk); }
	.field { display: flex; flex-direction: column; gap: 5px; }
	.field > label, .field-label { margin: 0; font-size: var(--fs-s); font-weight: 600; color: var(--text); }
	.form-grid > .check { align-self: end; min-height: 34px; }
	.check { margin: 0; }
	.field-help { font-size: var(--fs-xs); color: var(--text-2); }
	.field-error { font-size: var(--fs-xs); color: var(--risk); font-weight: 500; }
	.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; }
	.form-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fieldset { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 12px; }
	.fieldset > legend { padding: 0 6px; margin: 0; font-size: var(--fs-s); font-weight: 600; width: auto; float: none; }
	.password-field { position: relative; }
	.password-field > .input { padding-right: 44px; }
	.password-field > .btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
	.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
	.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
	.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; flex: none; }
	.input-group { display: flex; align-items: stretch; }
	.input-group > .input, .input-group > .select { border-radius: 0; margin-left: -1px; min-width: 0; flex: 1; }
	.input-group > :first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); margin-left: 0; }
	.input-group > :last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; }
	.input-group > .input:focus { position: relative; z-index: 1; }
	.input-addon {
		display: inline-flex;
		align-items: center;
		padding: 0 10px;
		border: 1px solid var(--border-strong);
		background: var(--surface-2);
		color: var(--text-2);
		font-size: var(--fs-s);
		white-space: nowrap;
	}

	/* the search field of the search pages */
	.searchbar { display: flex; gap: 8px; }
	.searchbar-field { position: relative; flex: 1; min-width: 0; }
	.searchbar-field > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-2); pointer-events: none; }
	.searchbar-field > .input { height: 44px; padding-left: 42px; font-size: var(--fs-l); border-radius: 8px; }
	.searchbar > .btn { height: 44px; padding: 0 20px; border-radius: 8px; }

	/* panels: the sections of a page */
	.panel {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		box-shadow: var(--shadow-card);
		min-width: 0;
	}
	.panel-head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 12px;
		min-height: 48px;
		padding: 10px 16px;
		border-bottom: 1px solid var(--border);
	}
	.panel-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
	.panel-title .icon { color: var(--text-2); }
	.panel-count { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
	.panel-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--fs-s); color: var(--text-2); }
	.panel-source { font-size: var(--fs-xs); color: var(--text-2); }
	.panel-body { padding: 16px; }
	.panel-body.is-flush { padding: 0; }
	.panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: var(--fs-s); color: var(--text-2); }
	.panel-note { padding: 10px 16px; font-size: var(--fs-s); color: var(--text-2); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
	.panel > :last-child.is-flush > .dt tr:last-child td { border-bottom: 0; }
	.panel.is-risk { border-color: color-mix(in srgb, var(--risk) 35%, var(--border)); }
	.panel.is-risk > .panel-head { background: var(--risk-tint); border-radius: var(--radius) var(--radius) 0 0; }
	.panel.is-risk > .panel-head .panel-title, .panel.is-risk > .panel-head .panel-title .icon { color: var(--risk); }

	/* layout helpers for panels */
	.stack { display: flex; flex-direction: column; gap: 16px; }
	.stack.is-tight { gap: 8px; }
	.stack.is-loose { gap: 24px; }
	.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
	.cluster.is-tight { gap: 4px; }
	.grid { display: grid; gap: 16px; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); align-items: start; }
	.grid.is-3 { --cols: 3; }
	.grid.is-4 { --cols: 4; }
	.split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) var(--aside, 360px); align-items: start; }
	@media (max-width: 1279px) { .grid.is-4 { --cols: 2; } .grid.is-3 { --cols: 2; } }
	/* narrow screens: tables scroll inside their panel instead of the page */
	@media (max-width: 1023px) {
		.panel { overflow-x: auto; }
		.dt thead th { position: static; }
		.dt.is-fixed { table-layout: auto; }
		.dt.is-fixed td { white-space: normal; overflow-wrap: anywhere; }
		.dt.is-fixed :is(.w-xs, .w-s, .w-m, .w-l, .w-xl) { width: auto; }
		.dt .num { white-space: normal; }
		.filter-range { width: 100%; }
		.filter-range > .input, .filters .filter-range > .input[type="date"] { flex: 1; width: auto; min-width: 0; }
		.filters .select { max-width: 100%; }
		.searchbar > .btn { padding: 0 14px; }
	}
	@media (max-width: 1023px) {
		.grid, .grid.is-3, .grid.is-4 { --cols: 1; }
		.split { grid-template-columns: minmax(0, 1fr); }
	}

	/* key-value lists */
	.kv { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); margin: 0; }
	.kv > dt, .kv > dd { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--border); }
	.kv > dt { color: var(--text-2); font-weight: 400; padding-right: 8px; }
	.kv > dd { min-width: 0; overflow-wrap: anywhere; }
	.kv > dt:nth-last-of-type(1), .kv > dd:last-of-type { border-bottom: 0; }
	.kv.is-compact > dt, .kv.is-compact > dd { padding-top: 6px; padding-bottom: 6px; }
	.kv .sub { display: block; margin-top: 1px; font-size: var(--fs-s); color: var(--text-2); }
	.kv dd.is-muted { color: var(--text-2); }
	@media (max-width: 599px) {
		.kv { grid-template-columns: minmax(0, 1fr); }
		.kv > dt { padding-bottom: 0; border-bottom: 0; font-size: var(--fs-s); }
		.kv > dd { padding-top: 2px; }
	}

	/* data tables */
	.dt-wrap { overflow-x: auto; }
	.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-m); }
	.dt th, .dt td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
	.dt th:first-child, .dt td:first-child { padding-left: 16px; }
	.dt th:last-child, .dt td:last-child { padding-right: 16px; }
	.dt thead th {
		position: sticky;
		top: var(--topbar-h);
		z-index: 2;
		background: var(--surface-2);
		color: var(--text-2);
		font-size: var(--fs-xs);
		font-weight: 600;
		letter-spacing: .02em;
		white-space: nowrap;
		vertical-align: bottom;
		padding-top: 7px;
		padding-bottom: 7px;
	}
	.panel > .dt-wrap:first-child .dt thead th:first-child, .panel > .dt:first-child thead th:first-child { border-top-left-radius: var(--radius); }
	.dt-wrap .dt thead th { position: static; }
	.dt thead th a { color: inherit; display: inline-flex; align-items: center; gap: 3px; }
	.dt thead th a:hover { color: var(--text); text-decoration: none; }
	.dt thead th a.is-sorted { color: var(--accent); }
	.dt tbody tr { position: relative; }
	.dt tbody tr:hover > td { background: var(--row-hover); }
	.dt tbody tr:last-child > td { border-bottom: 0; }
	.dt .num, .dt th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
	.dt .sub { display: block; font-size: var(--fs-s); color: var(--text-2); margin-top: 1px; }
	.dt .cell-truncate { max-width: 0; width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.dt .cell-actions { width: 1%; white-space: nowrap; text-align: right; }
	.dt .cell-main a.row-link { font-weight: 600; color: var(--text); }
	.dt .cell-main a.row-link:hover { color: var(--accent); }
	/* the whole row opens the detail; other links of the row stay on top */
	.dt a.row-link::after { content: ""; position: absolute; inset: 0; }
	.dt tr:has(a.row-link) { cursor: pointer; }
	.dt tr:has(a.row-link) a:not(.row-link), .dt tr:has(a.row-link) button, .dt tr:has(a.row-link) .ext { position: relative; z-index: 1; }
	.dt.is-compact th, .dt.is-compact td { padding-top: 5px; padding-bottom: 5px; }
	.dt.is-compact .sub { display: inline; margin-left: 6px; }
	.dt tr.is-muted > td { color: var(--text-2); }
	.dt tr.is-selected > td { background: var(--accent-soft); }
	.dt tfoot td { font-weight: 600; background: var(--surface-2); }
	.dt .is-current { background: var(--accent-soft); }
	.dt tbody tr:hover > td.is-current { background: color-mix(in srgb, var(--accent-soft) 70%, var(--row-hover)); }
	.dt td.is-empty { padding: 28px 16px; color: var(--text-2); text-align: center; }
	.dt .ext { color: var(--text-3); margin-left: 2px; opacity: 0; transition: opacity .12s; }
	.dt tr:hover .ext { opacity: 1; }
	.dt .ext:hover { color: var(--accent); }

	/* list toolbar: the count, sort, export */
	.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
	.toolbar-count { font-weight: 600; font-variant-numeric: tabular-nums; }
	.toolbar-count .muted { font-weight: 400; }
	.toolbar-end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
	.toolbar label { margin: 0; }

	/* pills: states and signals; tags: sources and kinds */
	.pill {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		height: 22px;
		padding: 0 8px;
		border-radius: 999px;
		background: var(--neutral-tint);
		color: var(--neutral);
		font-size: var(--fs-xs);
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
		vertical-align: 1px;
	}
	.pill .icon { width: 13px; height: 13px; stroke-width: 2; }
	.pill.is-s { height: 18px; padding: 0 6px; font-size: 11px; }
	.pill.is-ok { background: var(--ok-tint); color: var(--ok); }
	.pill.is-warn { background: var(--warn-tint); color: var(--warn); }
	.pill.is-risk { background: var(--risk-tint); color: var(--risk); }
	.pill.is-info { background: var(--info-tint); color: var(--info); }
	.pill.is-money { background: var(--money-tint); color: var(--money); }
	.pill.is-domain { background: var(--domain-tint); color: var(--domain); }
	.pill.is-contact { background: var(--contact-tint); color: var(--contact); }
	.pill.is-company { background: var(--company-tint); color: var(--company); }
	.pill.is-person { background: var(--person-tint); color: var(--person); }
	.pill.is-solid-risk { background: var(--risk); color: #fff; }
	.pill.is-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-2); }
	a.pill:hover { text-decoration: none; filter: brightness(.96); }
	.tag {
		display: inline-flex;
		align-items: center;
		height: 20px;
		padding: 0 6px;
		border-radius: 4px;
		border: 1px solid var(--border);
		background: var(--surface-2);
		color: var(--text-2);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .01em;
		white-space: nowrap;
		vertical-align: 1px;
	}
	.tag.is-ok { border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: var(--ok-tint); color: var(--ok); }
	.tag.is-info { border-color: color-mix(in srgb, var(--info) 30%, transparent); background: var(--info-tint); color: var(--info); }
	.tag.is-warn { border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-tint); color: var(--warn); }
	.tag.is-popular { border-color: color-mix(in srgb, var(--domain) 30%, transparent); background: var(--domain-tint); color: var(--domain); margin-left: 4px; }
	.tag.is-risk { border-color: color-mix(in srgb, var(--risk) 30%, transparent); background: var(--risk-tint); color: var(--risk); }
	.tag.is-money { border-color: color-mix(in srgb, var(--money) 30%, transparent); background: var(--money-tint); color: var(--money); }
	.tag.is-person { border-color: color-mix(in srgb, var(--person) 30%, transparent); background: var(--person-tint); color: var(--person); }
	.tag.is-company { border-color: color-mix(in srgb, var(--company) 30%, transparent); background: var(--company-tint); color: var(--company); }

	/* entity links: the type's icon in its colour, the name */
	.ent { display: inline; color: var(--text); font-weight: 500; }
	.ent > .ent-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		margin-right: 6px;
		border-radius: 5px;
		vertical-align: -5px;
		background: var(--ent-tint);
		color: var(--ent);
	}
	.ent > .ent-icon .icon { width: 13px; height: 13px; stroke-width: 2; vertical-align: 0; }
	a.ent:hover { color: var(--accent); }
	.ent.is-plain { font-weight: 400; }
	.ent.is-gone { color: var(--text-2); }
	.ent-domain { --ent: var(--domain); --ent-tint: var(--domain-tint); }
	.ent-contact { --ent: var(--contact); --ent-tint: var(--contact-tint); }
	.ent-company { --ent: var(--company); --ent-tint: var(--company-tint); }
	.ent-person { --ent: var(--person); --ent-tint: var(--person-tint); }
	.ent-money { --ent: var(--money); --ent-tint: var(--money-tint); }
	.ent-risk { --ent: var(--risk); --ent-tint: var(--risk-tint); }
	.ent-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 9px;
		background: var(--ent-tint);
		color: var(--ent);
		flex: none;
	}
	.ent-badge .icon { width: 20px; height: 20px; }

	/* the header of a detail page: the type's badge, the name, the key facts */
	.entity-head { display: flex; align-items: flex-start; gap: 16px; }
	.entity-head-main { min-width: 0; flex: 1; }
	.ent-badge.is-l { width: 52px; height: 52px; border-radius: 13px; margin-top: 2px; }
	.ent-badge.is-l .icon { width: 26px; height: 26px; stroke-width: 1.6; }
	.page-header > .signals { flex-basis: 100%; margin-top: 0; }
	@media (max-width: 599px) { .ent-badge.is-l { display: none; } }

	/* table rows grouping the rows below them */
	.dt tr.group > th {
		padding-top: 12px;
		padding-bottom: 6px;
		background: var(--surface);
		color: var(--text-2);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .07em;
		text-transform: uppercase;
		border-bottom: 1px solid var(--border);
	}
	.dt tr.group:hover > th { background: var(--surface); }

	/* contact lists (phones, e-mails, webs) */
	.contact-list { list-style: none; margin: 0; padding: 0 0 6px; }
	.contact-list li { display: flex; align-items: center; gap: 10px; padding: 6px 16px; min-width: 0; font-size: var(--fs-s); }
	.contact-list li + li { border-top: 1px solid var(--border); }
	.contact-list li > .icon { color: var(--text-2); }
	.contact-list li > a, .contact-list li > span:not(.end) { min-width: 0; overflow-wrap: anywhere; }
	.contact-list .end { color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; }
	.panel-head + .contact-list { padding-top: 6px; }
	.subdomain-list { max-height: 420px; overflow-y: auto; }
	.subdomain-list li { padding-top: 4px; padding-bottom: 4px; }

	/* identifiers: mono, copyable */
	.id { font-family: var(--font-mono); font-size: .93em; letter-spacing: -.01em; white-space: nowrap; }
	.copy {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		margin-left: 2px;
		padding: 0;
		border: 0;
		border-radius: 4px;
		background: none;
		color: var(--text-3);
		cursor: pointer;
		vertical-align: -5px;
		opacity: 0;
		transition: opacity .12s;
	}
	.copy .icon { width: 14px; height: 14px; }
	:is(dd, td, li, span, div):hover > .copy, .copy:focus-visible, .copy.is-done { opacity: 1; }
	.copy:hover { background: var(--surface-3); color: var(--text); }
	.copy.is-done { color: var(--ok); }

	/* risk signals under an entity header */
	.signals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
	.signal {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 28px;
		padding: 3px 10px;
		border-radius: 6px;
		border: 1px solid color-mix(in srgb, var(--risk) 30%, transparent);
		background: var(--risk-tint);
		color: var(--risk);
		font-size: var(--fs-s);
		font-weight: 600;
	}
	.signal .icon { width: 15px; height: 15px; stroke-width: 2; }
	.signal .muted { color: color-mix(in srgb, var(--risk) 75%, var(--text-2)); font-weight: 500; }
	.signal.is-warn { border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-tint); color: var(--warn); }
	.signal.is-info { border-color: color-mix(in srgb, var(--info) 25%, transparent); background: var(--info-tint); color: var(--info); }
	a.signal:hover { text-decoration: none; filter: brightness(.97); }

	/* KPI strip */
	.kpis {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		overflow: hidden;
	}
	.kpi { display: block; padding: 12px 16px; border-right: 1px solid var(--border); color: var(--text); min-width: 0; }
	.kpi:last-child { border-right: 0; }
	a.kpi:hover { background: var(--row-hover); text-decoration: none; color: var(--text); }
	.kpi-value, .kpi-sub { display: block; }
	.kpi-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); letter-spacing: .02em; }
	.kpi-label .icon { width: 14px; height: 14px; }
	.kpi-value { margin-top: 2px; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.kpi-sub { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.kpi.is-empty .kpi-value { color: var(--text-3); }
	.kpi.is-money .kpi-label .icon { color: var(--money); }
	.kpi.is-risk .kpi-value { color: var(--risk); }
	.kpi .spark { display: block; margin-top: 6px; width: 100%; height: 28px; }
	@media (max-width: 599px) { .kpi { border-right: 0; border-bottom: 1px solid var(--border); } }

	/* in-page section tabs (anchors), sticky under the top bar */
	.section-nav {
		position: sticky;
		top: var(--topbar-h);
		z-index: 10;
		display: flex;
		gap: 2px;
		margin: 0 calc(-1 * var(--gutter)) 20px;
		padding: 0 var(--gutter);
		background: color-mix(in srgb, var(--bg) 94%, transparent);
		backdrop-filter: blur(8px);
		border-bottom: 1px solid var(--border);
		overflow-x: auto;
		scrollbar-width: none;
	}
	.section-nav a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 42px;
		padding: 0 12px;
		border-bottom: 2px solid transparent;
		margin-bottom: -1px;
		color: var(--text-2);
		font-weight: 500;
		white-space: nowrap;
	}
	.section-nav a:hover { color: var(--text); text-decoration: none; }
	.section-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }
	.section-nav .count { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); background: var(--surface-3); border-radius: 999px; padding: 1px 7px; }
	.section-nav a.is-risk .count { background: var(--risk-tint); color: var(--risk); }
	.section-nav a.is-empty { color: var(--text-3); }
	.section { scroll-margin-top: calc(var(--topbar-h) + 56px); }
	.section-title { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 12px; font-size: var(--fs-l); font-weight: 600; }
	.section-title .panel-source { margin-left: auto; font-weight: 400; }
	.absent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-2); font-size: var(--fs-s); }

	/* tabs (real tabs between views) and segmented controls */
	.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
	.tabs a, .tabs button {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 40px;
		padding: 0 12px;
		border: 0;
		border-bottom: 2px solid transparent;
		margin-bottom: -1px;
		background: none;
		color: var(--text-2);
		font-weight: 500;
		white-space: nowrap;
		cursor: pointer;
	}
	.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }
	.tabs .is-active { color: var(--accent); border-bottom-color: var(--accent); }
	.segmented { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--surface-3); gap: 2px; }
	.segmented a, .segmented button, .segmented label {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		height: 28px;
		padding: 0 10px;
		border: 0;
		border-radius: 6px;
		background: none;
		color: var(--text-2);
		font-size: var(--fs-s);
		font-weight: 500;
		white-space: nowrap;
		cursor: pointer;
	}
	.segmented a:hover, .segmented button:hover, .segmented label:hover { color: var(--text); text-decoration: none; }
	.segmented .is-active, .segmented input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(15 26 36 / .12); }
	.segmented label { padding: 0; }
	.segmented label > span { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; }
	.segmented input { position: absolute; opacity: 0; pointer-events: none; }

	/* filter bar of the search pages */
	.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
	.filters .select, .filters .input { width: auto; height: 32px; font-size: var(--fs-s); }
	.filters .select { max-width: 260px; }
	.filters .input[type="date"] { width: 140px; }
	.filter-range { display: inline-flex; align-items: center; }
	.filter-range > .input-addon { height: 32px; border-radius: var(--radius-s) 0 0 var(--radius-s); }
	.filter-range > .input { border-radius: 0; margin-left: -1px; }
	.filter-range > .input:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; }
	.filters .select.is-set, .filters .input.is-set { border-color: var(--accent); background-color: var(--accent-soft); color: var(--accent); font-weight: 500; }
	.filter-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-s); }
	.filter-checks-label { font-weight: 600; color: var(--text-2); font-size: var(--fs-xs); letter-spacing: .02em; text-transform: uppercase; margin-right: 2px; }
	.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
	.chip {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		height: 26px;
		padding: 0 4px 0 10px;
		border-radius: 999px;
		background: var(--accent-soft);
		color: var(--accent);
		font-size: var(--fs-s);
		font-weight: 500;
		white-space: nowrap;
	}
	.chip b { font-weight: 600; }
	.chip a, .chip button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
	.chip a:hover, .chip button:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); text-decoration: none; }
	.chip .icon { width: 13px; height: 13px; stroke-width: 2.2; }

	/* filter toggles: checkboxes shown as chips */
	.toggle { position: relative; display: inline-flex; cursor: pointer; user-select: none; }
	.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
	.toggle > span {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		height: 28px;
		padding: 0 11px;
		border: 1px solid var(--border-strong);
		border-radius: 999px;
		background: var(--surface);
		color: var(--text-2);
		font-size: var(--fs-s);
		font-weight: 500;
		white-space: nowrap;
		transition: background-color .12s, border-color .12s, color .12s;
	}
	.toggle:hover > span { color: var(--text); border-color: color-mix(in srgb, var(--border-strong) 50%, var(--text-2)); }
	.toggle input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
	.toggle input:checked + span::before {
		content: "";
		width: 12px;
		height: 12px;
		background: currentColor;
		-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='M20 6 9 17l-5-5'/%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='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	.toggle.is-risk input:checked + span { background: var(--risk-tint); border-color: var(--risk); color: var(--risk); }
	.toggle input:focus-visible + span { box-shadow: var(--focus-ring); }

	/* the search form of the search pages */
	.search-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
	.search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
	.search-row > .filter-checks-label { min-width: 52px; }
	.search-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--fs-s); }
	.search-foot .chips { flex: 1; }
	.more-filters { display: contents; }
	.more-filters > summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: var(--radius-s); color: var(--accent); font-size: var(--fs-s); font-weight: 500; cursor: pointer; }
	.more-filters > summary::-webkit-details-marker { display: none; }
	.more-filters > summary:hover { background: var(--accent-soft); }
	.more-filters[open] > summary .icon { transform: rotate(180deg); }
	.search-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-s); }
	.search-note .icon { margin-top: 2px; }
	.search-note:last-child { border-radius: 0 0 var(--radius) var(--radius); }

	/* column widths of fixed tables */
	.dt.is-fixed { table-layout: fixed; }
	.dt.is-fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.dt.is-fixed td.wrap { white-space: normal; }
	.dt .w-xs { width: 64px; }
	.dt .w-s { width: 120px; }
	.dt .w-m { width: 150px; }
	.dt .w-l { width: 210px; }
	.dt .w-xl { width: 280px; }
	.dt .w-icons { width: 118px; }
	.dt .w-half { width: 50%; }
	.flags { display: inline-flex; gap: 6px; color: var(--text-2); }
	.flags .icon { width: 15px; height: 15px; }
	.flags .is-off { color: var(--surface-3); }

	/* notices (callouts) */
	.notice {
		display: flex;
		gap: 12px;
		padding: 12px 16px;
		border: 1px solid var(--border);
		border-left: 3px solid var(--text-3);
		border-radius: var(--radius-s);
		background: var(--surface);
		font-size: var(--fs-m);
	}
	.notice > .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--text-2); }
	.notice-title { font-weight: 600; margin-bottom: 2px; }
	.notice.is-risk { border-color: color-mix(in srgb, var(--risk) 30%, transparent); border-left-color: var(--risk); background: var(--risk-tint); }
	.notice.is-risk > .icon, .notice.is-risk .notice-title { color: var(--risk); }
	.notice.is-warn { border-color: color-mix(in srgb, var(--warn) 30%, transparent); border-left-color: var(--warn); background: var(--warn-tint); }
	.notice.is-warn > .icon, .notice.is-warn .notice-title { color: var(--warn); }
	.notice.is-info { border-color: color-mix(in srgb, var(--info) 25%, transparent); border-left-color: var(--info); background: var(--info-tint); }
	.notice.is-info > .icon { color: var(--info); }
	.notice.is-ok { border-color: color-mix(in srgb, var(--ok) 30%, transparent); border-left-color: var(--ok); background: var(--ok-tint); }
	.notice.is-ok > .icon { color: var(--ok); }
	.notice.is-plain { border-left-width: 1px; background: var(--surface-2); }

	/* the plan's lock note */
	.plan-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--fs-s); color: var(--text-2); }
	.plan-note > .icon { color: var(--warn); }

	/* empty states */
	.empty { padding: 40px 24px; text-align: center; color: var(--text-2); }
	.empty > .icon { width: 28px; height: 28px; color: var(--text-3); margin-bottom: 10px; }
	.empty-title { font-size: var(--fs-l); font-weight: 600; color: var(--text); margin-bottom: 4px; }
	.empty .examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
	.empty.is-s { padding: 18px 16px; }

	/* loading */
	.skeleton { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
	@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
	.loading { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-s); }
	.loading::before {
		content: "";
		width: 14px;
		height: 14px;
		border-radius: 50%;
		border: 2px solid var(--surface-3);
		border-top-color: var(--accent);
		animation: spin .8s linear infinite;
	}

	/* pagination */
	.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
	.pager a, .pager span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 30px;
		height: 30px;
		padding: 0 8px;
		border-radius: var(--radius-s);
		color: var(--text);
		font-size: var(--fs-s);
		font-weight: 500;
		font-variant-numeric: tabular-nums;
	}
	.pager a:hover { background: var(--surface-3); text-decoration: none; }
	.pager .is-current { background: var(--accent); color: var(--accent-on); }
	.pager .is-disabled { color: var(--text-3); }
	.pager .gap { min-width: 16px; padding: 0; color: var(--text-3); }

	/* popovers: menus and help */
	[popover] { margin: 0; padding: 0; border: 0; color: inherit; background: none; overflow: visible; }
	.menu {
		min-width: 220px;
		padding: 6px;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		background: var(--surface);
		box-shadow: var(--shadow-pop);
	}
	.menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
	.menu a, .menu button {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		height: 32px;
		padding: 0 10px;
		border: 0;
		border-radius: var(--radius-s);
		background: none;
		color: var(--text);
		font-size: var(--fs-m);
		text-align: left;
		white-space: nowrap;
		cursor: pointer;
	}
	.menu a:hover, .menu button:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
	.menu .icon { color: var(--text-2); }
	.menu hr { margin: 6px 0; }
	.menu .is-active { color: var(--accent); }
	.menu .is-active .icon { color: var(--accent); }
	.popcard {
		width: min(440px, calc(100vw - 32px));
		padding: 14px 16px;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		background: var(--surface);
		box-shadow: var(--shadow-pop);
		font-size: var(--fs-s);
	}
	.popcard h4 { margin-bottom: 8px; }
	.popcard dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; }
	.popcard dt { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; color: var(--text); }
	.popcard dd { margin: 0; color: var(--text-2); }

	/* dialogs */
	dialog.dialog {
		width: min(460px, calc(100vw - 32px));
		padding: 0;
		border: 1px solid var(--border);
		border-radius: 12px;
		background: var(--surface);
		color: var(--text);
		box-shadow: var(--shadow-pop);
	}
	dialog.dialog::backdrop { background: var(--overlay); }
	.dialog-body { padding: 20px 20px 8px; }
	.dialog-title { font-size: var(--fs-l); font-weight: 600; margin-bottom: 6px; }
	.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; }

	/* toasts */
	.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 40px)); }
	.toast {
		display: flex;
		opacity: 1;
		max-width: none;
		flex-basis: auto;
		font-size: var(--fs-m);
		backdrop-filter: none;
		align-items: flex-start;
		gap: 10px;
		padding: 12px 12px 12px 14px;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		background: var(--surface);
		box-shadow: var(--shadow-pop);
		animation: toast-in .2s var(--ease);
	}
	.toast > .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
	.toast.is-error > .icon { color: var(--risk); }
	.toast.is-ok > .icon { color: var(--ok); }
	.toast-text { flex: 1; font-weight: 500; }
	.toast button { border: 0; background: none; color: var(--text-3); padding: 2px; cursor: pointer; border-radius: 4px; }
	.toast button:hover { color: var(--text); background: var(--surface-2); }
	.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
	@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

	/* timeline (history of changes) */
	.timeline { list-style: none; margin: 0; padding: 0; }
	.timeline-day { padding: 12px 16px 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); letter-spacing: .03em; text-transform: uppercase; }
	.timeline-item { display: grid; grid-template-columns: 56px 140px minmax(0, 1fr); gap: 4px 12px; padding: 7px 16px; border-bottom: 1px solid var(--border); align-items: baseline; }
	.timeline-item:last-child { border-bottom: 0; }
	.timeline-time { font-size: var(--fs-s); color: var(--text-2); font-variant-numeric: tabular-nums; }
	.timeline-field { font-weight: 500; }
	.timeline-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; }
	.timeline-change del { color: var(--text-2); text-decoration-color: color-mix(in srgb, var(--risk) 60%, transparent); }
	.timeline-change .arrow { color: var(--text-3); }
	.timeline-source { font-size: var(--fs-xs); color: var(--text-2); }
	.timeline-item.is-event { grid-template-columns: 56px minmax(160px, 260px) minmax(0, 1fr); }
	.timeline-item.is-unseen { background: var(--accent-soft); }
	.timeline-item .sub { display: block; font-size: var(--fs-xs); color: var(--text-2); }
	@media (max-width: 599px) { .timeline-item { grid-template-columns: 48px minmax(0, 1fr); } .timeline-change { grid-column: 1 / -1; } }

	/* inline bars in ranked lists */
	.bar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; min-width: 60px; }
	.bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--bar, var(--accent)); }
	.bar.is-money { --bar: var(--money); }
	.bar.is-risk { --bar: var(--risk); }
	.bar.is-company { --bar: var(--company); }
	.bar.is-domain { --bar: var(--domain); }
	.bar-row { display: flex; align-items: center; gap: 10px; }
	.bar-row .bar { flex: 1; }
	.bar-row b { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
	.dt tr.is-extra { display: none; }
	.panel.is-expanded .dt tr.is-extra { display: table-row; }
	.panel.is-expanded [data-expand] { display: none; }
	.panel-note.is-top { border-top: 0; border-bottom: 1px solid var(--border); border-radius: 0; }

	/* bar charts (App\Latte\BarChart) */
	.chart { --chart-gap: clamp(1px, calc(30% / var(--chart-n)), 6px); padding: 8px 14px 0 44px; }
	.chart-plot { position: relative; height: var(--chart-h); border-bottom: 1px solid var(--border-strong); }
	.chart-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); }
	.chart-line b { position: absolute; right: calc(100% + 8px); top: -8px; font-size: 11px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
	.chart-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--chart-n), minmax(0, 1fr)); align-items: end; }
	.chart-col { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 1px; height: 100%; padding: 0 var(--chart-gap); }
	.chart-col:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); text-decoration: none; }
	.chart-bar { flex: 1; max-width: 28px; min-height: 0; border-radius: 3px 3px 0 0; background: var(--series-1); }
	.chart-bar.s2 { background: var(--series-2); }
	.chart-bar.s3 { background: var(--series-3); }
	a.chart-col:hover .chart-bar { filter: brightness(1.1); }
	.chart-labels { display: grid; grid-template-columns: repeat(var(--chart-n), minmax(0, 1fr)); margin-top: 4px; font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
	.chart-labels span { text-align: center; white-space: nowrap; overflow: visible; }
	.chart-legend { margin-top: 8px; justify-content: center; }
	.swatch.s1 { --sw: var(--series-1); } .swatch.s2 { --sw: var(--series-2); } .swatch.s3 { --sw: var(--series-3); }

	/* meters (plan usage) */
	.meter { display: flex; flex-direction: column; gap: 4px; }
	.meter-head { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-s); }
	.meter-head b { font-variant-numeric: tabular-nums; }
	.meter .bar { height: 8px; }
	.meter.is-high .bar > span { background: var(--warn); }
	.meter.is-full .bar > span { background: var(--risk); }
	.usage {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 32px;
		padding: 0 10px;
		border-radius: var(--radius-s);
		color: var(--text-2);
		font-size: var(--fs-s);
		font-variant-numeric: tabular-nums;
	}
	.usage:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
	.usage-ring { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--usage-colour, var(--accent)) calc(var(--p) * 1%), var(--surface-3) 0); -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px); mask: radial-gradient(circle, transparent 5px, #000 5.5px); }
	.usage.is-high { --usage-colour: var(--warn); }
	.usage.is-full { --usage-colour: var(--risk); }

	/* avatar */
	.avatar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: var(--accent-soft);
		color: var(--accent);
		font-size: var(--fs-s);
		font-weight: 600;
		text-transform: uppercase;
		flex: none;
	}
	.user-btn { display: inline-flex; align-items: center; gap: 8px; padding: 2px; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--text); }
	.user-btn:hover .avatar { box-shadow: 0 0 0 3px var(--surface-3); }

	/* status dot (admins: server load) */
	.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
	.dot.is-warn { background: var(--warn); }
	.dot.is-risk { background: var(--risk); }

	/* keyboard keys */
	kbd, .kbd {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		border: 1px solid var(--border-strong);
		border-bottom-width: 2px;
		border-radius: 4px;
		background: var(--surface);
		color: var(--text-2);
		font-family: var(--font-sans);
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
	}

	/* the global search in the top bar */
	.omni { position: relative; flex: 1; max-width: 640px; }
	.omni-field { position: relative; }
	.omni-field > .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
	.omni-input {
		width: 100%;
		height: 36px;
		padding: 0 70px 0 36px;
		border: 1px solid var(--border);
		border-radius: 8px;
		background: var(--surface-2);
		color: var(--text);
		font-size: var(--fs-m);
		transition: background-color .12s, border-color .12s, box-shadow .12s;
	}
	.omni-input::placeholder { color: var(--text-2); }
	.omni-input:hover { border-color: var(--border-strong); }
	.omni-input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: var(--focus-ring); }
	.omni-keys { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: 3px; pointer-events: none; }
	.omni-input:focus ~ .omni-keys { display: none; }
	.omni-panel {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 6px);
		max-height: min(70vh, 560px);
		overflow-y: auto;
		padding: 6px;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		background: var(--surface);
		box-shadow: var(--shadow-pop);
		z-index: 50;
	}
	.omni-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
	.omni-kind { display: flex; align-items: center; gap: 6px; padding: 6px 10px 8px; font-size: var(--fs-s); color: var(--text-2); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
	.omni-kind b { color: var(--text); }
	.omni-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-s); color: var(--text); }
	.omni-item:hover, .omni-item.is-active { background: var(--accent-soft); text-decoration: none; color: var(--text); }
	.omni-item .ent-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: var(--ent-tint, var(--surface-3)); color: var(--ent, var(--text-2)); flex: none; }
	.omni-item .ent-icon .icon { width: 15px; height: 15px; }
	.omni-main { flex: 1; min-width: 0; }
	.omni-name { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.omni-meta { display: block; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.omni-item .enter { opacity: 0; }
	.omni-item.is-active .enter { opacity: 1; }
	.omni-empty { padding: 14px 10px; color: var(--text-2); font-size: var(--fs-s); }
	.omni-foot { display: flex; gap: 14px; padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-2); }
	.omni-foot span { display: inline-flex; align-items: center; gap: 4px; }

	/* the start page */
	.hero { max-width: 880px; margin: 12px 0 28px; }
	.hero .page-title { font-size: 30px; letter-spacing: -.02em; }
	.hero .page-lead { font-size: var(--fs-l); margin-top: 8px; }
	.omni.is-hero { max-width: none; margin-top: 18px; }
	.omni.is-hero .omni-input { height: 52px; padding-left: 48px; font-size: 17px; border-radius: 10px; background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-card); }
	.omni.is-hero .omni-field > .icon { left: 16px; }
	.hero-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
	button.tag { cursor: pointer; font-family: var(--font-mono); font-weight: 500; }
	button.tag:hover { border-color: var(--accent); color: var(--accent); }
	.menu.is-flat { min-width: 0; border: 0; box-shadow: none; border-radius: 0 0 var(--radius) var(--radius); }
	.menu.is-flat a { height: auto; min-height: 34px; padding: 7px 10px; white-space: normal; align-items: flex-start; }
	.menu.is-flat a .icon { margin-top: 2px; }

	/* category lists in columns */
	.cat-list { columns: 3 260px; column-gap: 32px; list-style: none; margin: 0; padding: 12px 16px; }
	.cat-list li { break-inside: avoid; display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px dashed var(--border); }

	/* the legend of the map and the graph */
	.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--text-2); }
	.legend-item { display: inline-flex; align-items: center; gap: 6px; }
	.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--sw, var(--text-3)); flex: none; }
	.swatch.is-round { border-radius: 50%; }
	.swatch.is-line { width: 16px; height: 0; border-top: 2px solid var(--sw); border-radius: 0; background: none; }
	.swatch.is-dashed { border-top-style: dashed; }

	/* canvas pages (map, graph) */
	.canvas-page { position: relative; flex: 1; display: flex; min-height: calc(100vh - var(--topbar-h)); }
	.canvas { position: relative; flex: 1; min-width: 0; background: var(--surface-2); }
	.canvas-bar {
		position: absolute;
		left: 16px;
		top: 16px;
		right: 16px;
		z-index: 500;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 8px;
		pointer-events: none;
	}
	.canvas-bar > * { pointer-events: auto; }
	.floating { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-pop); }
	.inspector {
		width: 380px;
		flex: none;
		display: flex;
		flex-direction: column;
		border-left: 1px solid var(--border);
		background: var(--surface);
		max-height: calc(100vh - var(--topbar-h));
		position: sticky;
		top: var(--topbar-h);
		overflow-y: auto;
	}
	@media (max-width: 1023px) {
		.canvas-page { flex-direction: column; }
		.inspector { width: auto; max-height: none; position: static; border-left: 0; border-top: 1px solid var(--border); }
	}

	/* the map */
	.canvas > #map, .canvas > .graph-box { position: absolute; inset: 0; }
	#graph { width: 100%; height: 100%; }
	.map-layers {
		position: absolute;
		left: 14px;
		top: 14px;
		z-index: 900;
		width: 300px;
		max-height: calc(100% - 28px);
		overflow-y: auto;
		padding: 10px;
		scrollbar-width: thin;
	}
	.map-search { position: relative; }
	.map-search .searchbar-field > .input { height: 36px; padding-left: 36px; font-size: var(--fs-m); }
	.map-search .searchbar-field > .icon { left: 11px; width: 16px; height: 16px; }
	.map-results:empty { display: none; }
	.map-results { margin-top: 6px; max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-s); }
	.map-result { display: block; padding: 6px 10px; font-size: var(--fs-s); color: var(--text); border-bottom: 1px solid var(--border); }
	.map-result:last-child { border-bottom: 0; }
	a.map-result:hover, .map-result.is-active { background: var(--accent-soft); text-decoration: none; color: var(--text); }
	.map-result.is-note { color: var(--text-2); }
	.map-layer-list > summary { list-style: none; display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 4px 2px; font-weight: 600; cursor: pointer; }
	.map-layer-list > summary::-webkit-details-marker { display: none; }
	.map-layer-list > summary .is-s { margin-left: auto; color: var(--text-2); transition: transform .15s; }
	.map-layer-list:not([open]) > summary .is-s { transform: rotate(-90deg); }
	.layer-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
	.layer-group-title { margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
	.layer-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 4px; border-radius: var(--radius-s); font-size: var(--fs-s); cursor: pointer; }
	.layer-row:hover { background: var(--surface-2); }
	.layer-row input { margin: 0; accent-color: var(--accent); }
	.swatch.is-ring { background: none; box-shadow: inset 0 0 0 2px var(--sw); border-radius: 50%; }
	.map-status:not(:empty) { margin-top: 8px; font-size: var(--fs-xs); color: var(--text-2); }
	.inspector-body { padding: 16px; }
	.inspector-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: var(--fs-l); font-weight: 600; }
	.inspector-subtitle { margin: 18px 0 6px; font-size: var(--fs-s); font-weight: 600; }
	.inspector-meta { margin-bottom: 12px; font-size: var(--fs-s); color: var(--text-2); }
	.inspector-body .dt { margin: 0 -16px; width: calc(100% + 32px); font-size: var(--fs-s); }
	.inspector-body .dt td:first-child { padding-left: 16px; }
	.inspector-body .dt td:last-child { padding-right: 16px; }
	.map-nodes { border-top: 1px solid var(--border); margin-top: 8px; }
	.map-node { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-s); }
	.map-node .swatch { margin-top: 4px; }
	.map-node .sub { display: block; color: var(--text-2); font-size: var(--fs-xs); }
	.leaflet-container { font-family: var(--font-sans); background: var(--surface-2); }
	:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.78) contrast(1.08) saturate(.85); }
	.leaflet-bar a { color: var(--text); }
	.map-legend { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-s); background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--text); font-size: 12px; line-height: 1.6; box-shadow: var(--shadow-pop); max-width: 280px; }
	.map-legend i { display: inline-block; width: 14px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; border: 1px solid rgb(0 0 0 / .12); }
	.map-legend .swatch { vertical-align: -1px; margin-right: 4px; }
	.map-cluster { display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1.5px solid rgb(255 255 255 / .85); color: #fff; font-size: 11px; font-weight: 600; box-shadow: 0 1px 3px rgb(15 26 36 / .35); font-variant-numeric: tabular-nums; }
	.map-cluster span { padding: 0 4px; }
	@media (max-width: 1023px) {
		.canvas { min-height: 70vh; }
		.map-layers { position: static; width: auto; max-height: none; border-radius: 0; box-shadow: none; border-width: 0 0 1px; }
		.canvas { display: flex; flex-direction: column; }
		.canvas > #map { position: relative; inset: auto; height: 60vh; order: 2; }
	}

	/* the graph */
	.graph-loading { position: absolute; inset: 0; z-index: 950; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: color-mix(in srgb, var(--surface) 75%, transparent); }
	.graph-loading.show { display: flex; }
	.graph-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
	.graph-empty .empty { max-width: 420px; }
	.graph-legend { position: absolute; left: 14px; bottom: 14px; z-index: 900; padding: 8px 10px; max-width: 300px; }
	.swatch.is-diamond { transform: rotate(45deg) scale(.82); border-radius: 2px; }
	#graph { background: var(--surface); }

	/* error pages */
	.error-page { max-width: 560px; margin: 0 auto; padding: 12vh 24px 48px; }
	.error-page .brand { padding: 0; height: auto; margin-bottom: 40px; }
	.error-code { font-family: var(--font-mono); font-size: 64px; font-weight: 500; line-height: 1; color: var(--text-3); letter-spacing: -.04em; margin-bottom: 12px; }
	.error-page h1 { margin-bottom: 8px; }

	/* the login page */
	.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--surface); }
	.auth-aside {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 40px;
		padding: 48px 56px;
		background: #0f1a24;
		color: #dfe6ee;
		overflow: hidden;
	}
	.auth-aside a { color: #fff; }
	.auth-aside .brand { color: #fff; padding: 0; height: auto; font-size: 20px; }
	.auth-aside .brand-sub { color: #9fb0c2; }
	.auth-aside h1 { color: #fff; font-size: 34px; letter-spacing: -.02em; max-width: 560px; }
	.auth-aside p { color: #b4c2d0; font-size: var(--fs-l); max-width: 540px; margin-top: 14px; }
	.auth-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; max-width: 560px; margin-top: 28px; }
	.auth-figure b { display: block; font-size: 26px; font-weight: 600; color: #fff; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
	.auth-figure span { color: #9fb0c2; font-size: var(--fs-s); }
	.auth-sources { font-size: var(--fs-xs); color: #8293a5; }
	.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
	.auth-form { width: 100%; max-width: 380px; }
	.auth-form h2 { font-size: var(--fs-2xl); margin-bottom: 4px; }
	.auth-art { position: absolute; right: -120px; bottom: -120px; width: 520px; height: 520px; opacity: .18; pointer-events: none; }
	@media (max-width: 899px) {
		.auth { grid-template-columns: minmax(0, 1fr); }
		.auth-aside { padding: 28px 24px; gap: 20px; }
		.auth-aside h1 { font-size: 24px; }
		.auth-figures, .auth-art { display: none; }
	}
}

/* ---------------------------------------------------------------- utilities */
@layer utilities {
	.muted { color: var(--text-2) !important; }
	.faint { color: var(--text-3) !important; }
	.small { font-size: var(--fs-s) !important; }
	.xsmall { font-size: var(--fs-xs) !important; }
	.mono { font-family: var(--font-mono); font-size: .93em; }
	.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
	.tabular { font-variant-numeric: tabular-nums; }
	.nowrap { white-space: nowrap; }
	.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.strong { font-weight: 600; }
	.risk-text { color: var(--risk); }
	.ok-text { color: var(--ok); }
	.warn-text { color: var(--warn); }
	.money-text { color: var(--money); }
	.center { text-align: center; }
	.end { margin-left: auto; }
	.flush { margin: 0 !important; }
	.gap-top { margin-top: 16px; }
	.gap-top-s { margin-top: 8px; }
	.gap-top-l { margin-top: 24px; }
	.full { width: 100%; }
	.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	@media (max-width: 1023px) { .hide-narrow { display: none !important; } }
	@media (min-width: 1024px) { .only-narrow { display: none !important; } }
	@media print {
		.sidebar, .topbar, .section-nav, .page-actions, .toasts, .no-print { display: none !important; }
		.app { display: block; }
		body { background: #fff; }
		.panel { box-shadow: none; break-inside: avoid; }
	}
}