/*
 * Consent's design system.
 *
 * tokens      the only place colors, sizes, and spacing are chosen
 * base        elements as they appear without a class
 * layout      the shell every page sits in, and the two page widths
 * components  the parts pages are built from; see templates/ui.html
 *
 * The brand accent arrives as --accent and --on-accent on <html>. Every
 * other brand color is mixed from it, so one configured color tints the
 * whole interface.
 */
@layer tokens, base, layout, components;

@layer tokens {
	:root {
		color-scheme: light dark;

		--accent: #7521b0;
		--on-accent: #ffffff;

		--canvas: color-mix(in oklab, var(--accent) 4%, #fbfafc);
		--surface: #ffffff;
		--surface-sunken: color-mix(in oklab, var(--accent) 5%, #f6f5f8);
		--ink: color-mix(in oklab, var(--accent) 14%, #17141b);
		--ink-muted: color-mix(in oklab, var(--accent) 16%, #625c69);
		--ink-faint: color-mix(in oklab, var(--accent) 12%, #8f8996);
		--line: color-mix(in oklab, var(--accent) 10%, #e4e1e8);
		--line-strong: color-mix(in oklab, var(--accent) 14%, #cdc8d3);

		--accent-ink: color-mix(in oklab, var(--accent) 88%, var(--ink));
		--accent-hover: color-mix(in oklab, var(--accent) 86%, black);
		--accent-soft: color-mix(in oklab, var(--accent) 10%, var(--surface));
		--accent-line: color-mix(in oklab, var(--accent) 30%, var(--line));
		--focus: color-mix(in oklab, var(--accent) 55%, transparent);

		--success: #1d7a4a;
		--warning: #9a5b00;
		--danger: #b4233a;
		--success-soft: color-mix(in oklab, var(--success) 10%, var(--surface));
		--warning-soft: color-mix(in oklab, var(--warning) 11%, var(--surface));
		--danger-soft: color-mix(in oklab, var(--danger) 9%, var(--surface));

		--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		--font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

		--text-xs: 0.78rem;
		--text-sm: 0.875rem;
		--text-md: 1rem;
		--text-lg: 1.125rem;
		--text-xl: 1.6rem;

		--space-1: 0.25rem;
		--space-2: 0.5rem;
		--space-3: 0.75rem;
		--space-4: 1rem;
		--space-5: 1.5rem;
		--space-6: 2rem;
		--space-7: 3rem;

		--radius-control: 0.5rem;
		--radius-box: 0.85rem;
		--radius-pill: 999px;

		--shadow: 0 1px 2px rgb(20 10 30 / 0.05), 0 6px 24px rgb(20 10 30 / 0.06);

		--width-page: 68rem;
		--width-focus: 30rem;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--canvas: color-mix(in oklab, var(--accent) 6%, #121015);
			--surface: color-mix(in oklab, var(--accent) 5%, #1b1920);
			--surface-sunken: color-mix(in oklab, var(--accent) 6%, #16141a);
			--ink: #eeebf2;
			--ink-muted: color-mix(in oklab, var(--accent) 12%, #aaa3b3);
			--ink-faint: color-mix(in oklab, var(--accent) 10%, #7b7484);
			--line: color-mix(in oklab, var(--accent) 10%, #2d2a33);
			--line-strong: color-mix(in oklab, var(--accent) 14%, #403c47);
			--accent-ink: color-mix(in oklab, var(--accent) 55%, white);
			--accent-hover: color-mix(in oklab, var(--accent) 85%, white);
			--accent-soft: color-mix(in oklab, var(--accent) 18%, var(--surface));
			--success: #5cc98d;
			--warning: #e3a13b;
			--danger: #f07085;
			--success-soft: color-mix(in oklab, var(--success) 13%, var(--surface));
			--warning-soft: color-mix(in oklab, var(--warning) 13%, var(--surface));
			--danger-soft: color-mix(in oklab, var(--danger) 13%, var(--surface));
			--shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 28px rgb(0 0 0 / 0.25);
		}
	}
}

@layer base {
	*, *::before, *::after { box-sizing: border-box; }

	html {
		font-family: var(--font-sans);
		font-size: 100%;
		line-height: 1.5;
		color: var(--ink);
		background: var(--canvas);
		accent-color: var(--accent);
		-webkit-text-size-adjust: 100%;
	}

	body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }

	h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 650; }
	h1 { font-size: var(--text-xl); letter-spacing: -0.015em; }
	h2 { font-size: var(--text-lg); }
	h3 { font-size: var(--text-md); }
	p { margin: 0; }
	ul, ol { margin: 0; padding: 0; list-style: none; }
	dl, dd { margin: 0; }

	a { color: var(--accent-ink); text-underline-offset: 0.2em; }
	a:hover { text-decoration-thickness: 2px; }

	code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

	:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

	img { max-width: 100%; }

	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@layer layout {
	/* the bar across the top of every page */
	.topbar {
		position: sticky;
		top: 0;
		z-index: 10;
		background: color-mix(in oklab, var(--surface) 92%, transparent);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--line);
	}
	.topbar-inner {
		display: flex;
		align-items: center;
		gap: var(--space-5);
		max-width: var(--width-page);
		margin: 0 auto;
		padding: var(--space-3) var(--space-4);
	}
	.brand {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		color: var(--ink);
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	}
	.brand-mark {
		display: grid;
		place-items: center;
		width: 1.9rem;
		height: 1.9rem;
		border-radius: var(--radius-control);
		background: var(--accent);
		color: var(--on-accent);
		font-size: var(--text-sm);
		overflow: hidden;
	}
	.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
	.brand-mark:has(img) { background: none; }

	/*
	 * menu: the sections and account. Wide screens lay its contents into the
	 * top bar; narrow screens open it as a panel from the menu toggle.
	 */
	.menu { display: contents; }
	.menu-toggle, .menu-head { display: none; }
	.menu-icon {
		position: relative;
		flex: none;
		width: 1.85rem;
		height: 1.85rem;
		border-radius: 50%;
		background: var(--accent);
		color: var(--on-accent);
	}
	.menu-icon::before, .menu-icon::after {
		content: "";
		position: absolute;
		left: 50%;
		height: 2px;
		border-radius: 1px;
		background: currentColor;
		transform: translateX(-50%);
	}
	.menu-icon::before { top: calc(50% - 4px); width: 0.85rem; }
	.menu-icon::after { top: calc(50% + 2px); width: 0.85rem; }
	.menu-label { overflow: hidden; text-overflow: ellipsis; }

	/* nav: the sections, each with its pages; subnav: the current section's pages */
	.nav { min-width: 0; }
	.nav > ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
	.nav-pages { display: none; }
	.nav a, .subnav a {
		display: block;
		padding: var(--space-1) var(--space-3);
		border-radius: var(--radius-control);
		color: var(--ink-muted);
		font-size: var(--text-sm);
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;
	}
	.nav a:hover, .subnav a:hover { color: var(--ink); background: var(--surface-sunken); }
	.nav a[aria-current], .subnav a[aria-current] { color: var(--accent-ink); background: var(--accent-soft); }
	.subnav { border-top: 1px solid var(--line); }
	.subnav-inner {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1);
		max-width: var(--width-page);
		margin: 0 auto;
		padding: var(--space-2) var(--space-4);
	}

	.account { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
	.account-name { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: inherit; text-decoration: none; }
	.account-name:hover span:last-child, .account-name[aria-current] span:last-child { text-decoration: underline; }

	.shell {
		flex: 1;
		width: 100%;
		max-width: var(--width-page);
		margin: 0 auto;
		padding: var(--space-6) var(--space-4) var(--space-7);
		display: grid;
		align-content: start;
		gap: var(--space-5);
	}
	.shell.focus { max-width: var(--width-focus); padding-top: var(--space-7); }

	.footer { padding: var(--space-5) var(--space-4); text-align: center; color: var(--ink-faint); font-size: var(--text-xs); }

	@media (max-width: 40rem) {
		.topbar-inner { gap: var(--space-3); }
		.subnav { display: none; }

		.menu-toggle {
			display: inline-flex;
			align-items: center;
			gap: 0.6rem;
			min-width: 0;
			margin-left: auto;
			padding: 0.2rem 0.2rem 0.2rem 0.95rem;
			border: 0;
			border-radius: var(--radius-pill);
			background: var(--accent-soft);
			color: var(--accent-ink);
			font: inherit;
			font-size: var(--text-sm);
			font-weight: 650;
			white-space: nowrap;
			cursor: pointer;
			transition: background-color 120ms ease;
		}
		.menu-toggle:hover { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); }

		.menu { display: none; }
		.menu:popover-open {
			display: flex;
			flex-direction: column;
			gap: var(--space-4);
			inset: 0 0 0 auto;
			width: min(20rem, 85vw);
			height: 100dvh;
			max-height: none;
			margin: 0;
			padding: var(--space-3) var(--space-4) var(--space-5);
			border: 0;
			border-left: 1px solid var(--line);
			background: var(--surface);
			color: var(--ink);
			box-shadow: var(--shadow);
			overflow-y: auto;
		}
		.menu::backdrop { background: rgb(20 10 30 / 0.35); }
		.menu-head { display: flex; align-items: center; justify-content: space-between; font-weight: 650; }

		.nav > ul { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-2); }
		.nav a { padding: var(--space-2) var(--space-3); font-size: var(--text-md); }
		.nav-parent > a, .nav-parent > a[aria-current] {
			padding-block: var(--space-1);
			background: none;
			color: var(--ink-faint);
			font-size: var(--text-xs);
			font-weight: 650;
			text-transform: uppercase;
			letter-spacing: 0.06em;
		}
		.nav-pages { display: grid; gap: var(--space-1); padding-left: var(--space-2); }

		.account { margin: auto 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line); justify-content: space-between; }
		.shell { padding-top: var(--space-5); }
		.shell.focus { padding-top: var(--space-5); }
	}
}

@layer components {
	/* crumbs: the path from a section to the current page */
	.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-faint); }
	.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line-strong); }
	.crumbs a { color: var(--ink-muted); text-decoration: none; }
	.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }

	/* head: the top of a page */
	.head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
	.head-text { flex: 1; min-width: 14rem; display: grid; gap: var(--space-1); }
	.head-title { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
	.head-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
	.head .media { --size: 3.25rem; font-size: var(--text-lg); }

	/* help: what a page is for, opened from the button beside its title */
	.help-toggle {
		display: grid;
		place-items: center;
		flex: none;
		align-self: center;
		width: 1.6rem;
		height: 1.6rem;
		margin-left: auto;
		padding: 0;
		border: 1px solid var(--line-strong);
		border-radius: var(--radius-pill);
		background: var(--surface);
		color: var(--ink-muted);
		font: inherit;
		font-size: var(--text-sm);
		font-weight: 700;
		line-height: 1;
		cursor: pointer;
	}
	.help-toggle:hover { background: var(--surface-sunken); color: var(--ink); }
	.help p { color: var(--ink-muted); }

	/* modal: a card over the page, opened from a button with popovertarget */
	.modal:popover-open {
		display: grid;
		gap: var(--space-3);
		inset: 5rem var(--space-4) auto;
		width: auto;
		max-width: 28rem;
		margin: 0 auto;
		padding: var(--space-4) var(--space-5) var(--space-5);
		border: 1px solid var(--line);
		border-radius: var(--radius-box);
		background: var(--surface);
		color: var(--ink);
		box-shadow: var(--shadow);
	}
	.modal::backdrop { background: rgb(20 10 30 / 0.2); }
	.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 2rem; }
	.modal-head h2 { font-size: var(--text-md); }

	/* section: a titled panel of related content */
	.section {
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius-box);
		box-shadow: var(--shadow);
		overflow: hidden;
	}
	.section-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		flex-wrap: wrap;
		padding: var(--space-4) var(--space-5);
	}
	.section-head > div { display: grid; gap: 0.15rem; }
	.section-head p { color: var(--ink-muted); font-size: var(--text-sm); }
	.section-body { padding: 0 var(--space-5) var(--space-5); display: grid; gap: var(--space-4); }
	.section > .section-body:first-child { padding-top: var(--space-5); }
	.section-head > .media + div { flex: 1; }
	.section-head.divided { border-top: 1px solid var(--line); }
	.section-foot {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
		flex-wrap: wrap;
		padding: var(--space-4) var(--space-5);
		background: var(--surface-sunken);
		border-top: 1px solid var(--line);
	}
	.section-foot p { color: var(--ink-muted); font-size: var(--text-sm); }

	/* table: rows, with a toolbar above that grows the list and a footer below that sums it up */
	.table-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2) var(--space-3);
		flex-wrap: wrap;
		min-height: 3.25rem;
		padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);
		border-bottom: 1px solid var(--line);
	}
	.table-head h2 { font-size: var(--text-md); }
	.table-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }
	.table-notice { margin: var(--space-3) var(--space-5) 0; }
	.table-foot {
		display: flex;
		justify-content: space-between;
		gap: var(--space-1) var(--space-3);
		flex-wrap: wrap;
		padding: var(--space-2) var(--space-5);
		border-top: 1px solid var(--line);
		background: var(--surface-sunken);
		color: var(--ink-faint);
		font-size: var(--text-xs);
	}
	@media (max-width: 40rem) {
		.table-head { padding-left: var(--space-4); }
		.table-notice { margin-inline: var(--space-4); }
		.table-foot { padding-inline: var(--space-4); }
	}

	.columns { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }

	/* card: the single box of a focus page */
	.card {
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius-box);
		box-shadow: var(--shadow);
		padding: var(--space-6);
		display: grid;
		gap: var(--space-5);
	}
	.card-head { display: grid; gap: var(--space-2); justify-items: start; }
	.card-head p { color: var(--ink-muted); }
	@media (max-width: 40rem) { .card { padding: var(--space-5); } }

	/* media: a logo, or a monogram when there is none */
	.media {
		--size: 2.25rem;
		flex: none;
		display: grid;
		place-items: center;
		width: var(--size);
		height: var(--size);
		border-radius: var(--radius-control);
		background: var(--accent-soft);
		color: var(--accent-ink);
		font-weight: 700;
		font-size: var(--text-sm);
		overflow: hidden;
		border: 1px solid var(--line);
	}
	.media.round { border-radius: 50%; }
	.media img { width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
	.media.small { --size: 1.6rem; font-size: var(--text-xs); }
	.media.large { --size: 3.5rem; font-size: var(--text-xl); }

	/* rows: a list of things, each leading to its own page */
	.rows > li { border-bottom: 1px solid var(--line); }
	.rows > li:last-child { border-bottom: 0; }
	.row {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--space-3) var(--space-4);
		padding: var(--space-3) var(--space-5);
		color: inherit;
		text-decoration: none;
		min-height: 3.75rem;
	}
	/* a linked row is one big link: its title's link covers the row, and any
	   buttons in it sit above */
	.row-link { color: inherit; text-decoration: none; }
	.row-link::after { content: ""; position: absolute; inset: 0; }
	.row-link:focus-visible { outline: none; }
	.row-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
	.row.linked:hover { background: var(--surface-sunken); }
	.row.linked:hover .row-link { color: var(--accent-ink); }
	.row-danger, .row a.tag { position: relative; z-index: 1; }
	/* a row's danger opens its confirmation below the row */
	.row-danger { flex: none; }
	.row-danger > summary { list-style: none; }
	.row-danger > summary::-webkit-details-marker { display: none; }
	.row-danger[open] > summary { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 30%, transparent); }
	.row-confirm {
		display: none;
		padding: var(--space-3) var(--space-5);
		border-top: 1px solid color-mix(in oklab, var(--danger) 20%, var(--line));
		background: var(--danger-soft);
	}
	li:has(> .row .row-danger[open]) > .row-confirm { display: block; }
	.row-main { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
	.row-main .tag-set { margin-top: var(--space-1); }
	.row-title { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; font-weight: 600; }
	.row-subtitle { color: var(--ink-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
	.row-meta { color: var(--ink-faint); font-size: var(--text-sm); white-space: nowrap; }
	.row-trail { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: end; }
	.row-chevron { color: var(--ink-faint); font-size: var(--text-lg); line-height: 1; }
	.rows-empty { padding: var(--space-5); color: var(--ink-muted); text-align: center; font-size: var(--text-sm); }
	@media (max-width: 40rem) {
		.row { flex-wrap: wrap; padding-inline: var(--space-4); }
		/* the trail wraps below; any action stays at the end of the first line */
		.row-trail { order: 1; width: 100%; justify-content: start; padding-left: calc(2.25rem + var(--space-3)); }
		.row-chevron { display: none; }
	}

	/* icon: a line icon sized to its text; icon-button: a button that is only an icon */
	.icon { display: block; width: 1.15rem; height: 1.15rem; flex: none; }
	.icon-button {
		display: grid;
		place-items: center;
		width: 2.1rem;
		height: 2.1rem;
		padding: 0;
		border: 1px solid transparent;
		border-radius: var(--radius-pill);
		background: none;
		color: var(--ink-faint);
		cursor: pointer;
		transition: background-color 120ms ease, color 120ms ease;
	}
	.icon-button:hover { background: var(--surface-sunken); color: var(--ink); }
	.icon-button.danger { color: var(--danger); }
	.icon-button.danger:hover { background: var(--danger-soft); color: var(--danger); }

	/*
	 * badge and tag are the two kinds of label.
	 *
	 * badge  Consent's verdict on the thing it sits beside: "Unused", "New".
	 *        A pill in a tone, set in small capitals so it reads as a stamp.
	 * tag    the name of another thing: a group, a capability, a shared
	 *        detail. Plain ink on a quiet chip, the same for every kind. A tag
	 *        that leads somewhere is a link, set in accent ink like any link.
	 */
	.badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
	.badge {
		display: inline-flex;
		align-items: center;
		padding: 0.12rem 0.55rem;
		border-radius: var(--radius-pill);
		border: 1px solid var(--line);
		background: var(--surface-sunken);
		color: var(--ink-muted);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.badge.accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
	.badge.success { background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 30%, transparent); color: var(--success); }
	.badge.warning { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 30%, transparent); color: var(--warning); }
	.badge.danger { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 30%, transparent); color: var(--danger); }

	.tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
	.tag {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		padding: 0.15rem 0.5rem;
		border-radius: 0.35rem;
		border: 1px solid var(--line);
		background: var(--surface);
		color: var(--ink);
		font-size: var(--text-sm);
		font-weight: 500;
		line-height: 1.35;
		white-space: nowrap;
		text-decoration: none;
	}
	a.tag { color: var(--accent-ink); }
	a.tag:hover { border-color: var(--accent-line); background: var(--accent-soft); }
	a.tag[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
	.tag-count { color: var(--ink-faint); font-size: var(--text-xs); font-weight: 600; }
	a.tag[aria-current] .tag-count { color: inherit; opacity: 0.8; }
	.tag-set { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
	.tag-set-label { color: var(--ink-faint); font-size: var(--text-xs); font-weight: 600; }

	/* filters: tags that narrow the list below them */
	.filters { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-5); }
	.filters-label { color: var(--ink-muted); font-size: var(--text-sm); }

	/* id: a machine name, subject or digest */
	.id {
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		font-weight: 500;
		color: var(--ink-faint);
		overflow-wrap: anywhere;
	}
	.head .id { font-size: var(--text-sm); }

	/* notice: a message about the page, colored by tone */
	.notice {
		display: flex;
		gap: var(--space-3);
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius-control);
		border: 1px solid var(--line);
		border-left: 4px solid var(--ink-faint);
		background: var(--surface);
		font-size: var(--text-sm);
	}
	.notice.success { border-left-color: var(--success); background: var(--success-soft); }
	.notice.warning { border-left-color: var(--warning); background: var(--warning-soft); }
	.notice.danger { border-left-color: var(--danger); background: var(--danger-soft); }
	.notice.accent { border-left-color: var(--accent); background: var(--accent-soft); }

	/* button: anything that does something */
	.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		padding: 0.62rem 1rem;
		border: 1px solid var(--line-strong);
		border-radius: var(--radius-control);
		background: var(--surface);
		color: var(--ink);
		font: inherit;
		font-size: var(--text-sm);
		font-weight: 600;
		line-height: 1.3;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
	}
	.button:hover { background: var(--surface-sunken); text-decoration: none; }
	.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
	.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
	.button.danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 35%, var(--line)); }
	.button.danger:hover { background: var(--danger-soft); }
	.button.danger.solid { background: var(--danger); border-color: var(--danger); color: white; }
	.button.ghost { border-color: transparent; background: none; color: var(--ink-muted); }
	.button.ghost:hover { background: var(--surface-sunken); color: var(--ink); }
	.button.ghost.danger:hover { color: var(--danger); background: var(--danger-soft); }
	.button.small { padding: 0.3rem 0.65rem; font-size: var(--text-xs); }
	.button.wide { width: 100%; padding-block: 0.7rem; font-size: var(--text-md); }
	.inline-form { display: inline-flex; margin: 0; }

	/* form */
	.form { display: grid; gap: var(--space-4); }
	.field { display: grid; gap: var(--space-1); min-width: 0; }
	.grow { flex: 1; min-width: 12rem; }
	.field label, .legend { font-size: var(--text-sm); font-weight: 600; }
	.field-hint { color: var(--ink-muted); font-size: var(--text-xs); }
	.field-error { color: var(--danger); font-size: var(--text-xs); font-weight: 600; }
	.input {
		width: 100%;
		padding: 0.45rem 0.7rem;
		border: 1px solid var(--line-strong);
		border-radius: var(--radius-control);
		background: var(--surface);
		color: inherit;
		font: inherit;
		font-size: var(--text-md);
	}
	.input:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--accent); }
	.input[aria-invalid="true"] { border-color: var(--danger); }
	.input[readonly] { background: var(--surface-sunken); color: var(--ink-muted); }
	.input.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
	textarea.input { min-height: 6rem; resize: vertical; }
	textarea.input.code { min-height: 14rem; font-family: var(--font-mono); font-size: var(--text-sm); }
	.form-bar { display: flex; align-items: center; justify-content: end; gap: var(--space-2); flex-wrap: wrap; }
	/* narrow screens stack the buttons full width, the primary one on top */
	@media (max-width: 40rem) {
		.form-bar { flex-direction: column-reverse; align-items: stretch; }
		.form-bar .button { width: 100%; }
	}
	.form-row { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
	/* a button beside a field lines up with its input, below the label */
	.form-row > .button,
	.section-foot > .button { margin-top: calc(var(--text-sm) * 1.5 + var(--space-1)); }

	/* choices: checkboxes, each described */
	.choices { display: grid; gap: var(--space-2); }
	.choice {
		display: flex;
		gap: var(--space-3);
		align-items: flex-start;
		padding: var(--space-3) var(--space-4);
		border: 1px solid var(--line);
		border-radius: var(--radius-control);
		cursor: pointer;
	}
	.choice:hover { border-color: var(--line-strong); }
	.choice:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
	.choice input { margin-top: 0.3rem; width: 1rem; height: 1rem; flex: none; }
	.choice-text { display: grid; gap: 0.1rem; }
	.choice-label { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; font-weight: 600; }
	.choice-description { color: var(--ink-muted); font-size: var(--text-sm); }
	.choices-empty { color: var(--ink-muted); font-size: var(--text-sm); }

	/* facts: labeled values about one thing */
	.facts { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--space-3) var(--space-5); }
	.facts dt { color: var(--ink-muted); font-size: var(--text-sm); }
	.facts dd { min-width: 0; overflow-wrap: anywhere; }
	.facts dd.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
	.facts .empty { color: var(--ink-faint); }
	@media (max-width: 40rem) {
		.facts { grid-template-columns: 1fr; gap: 0; }
		.facts dd { margin-bottom: var(--space-3); }
	}

	/* disclosure: a secondary path, hidden until asked for */
	.disclosure > summary {
		cursor: pointer;
		color: var(--accent-ink);
		font-size: var(--text-sm);
		font-weight: 600;
		list-style: none;
	}
	.disclosure > summary::-webkit-details-marker { display: none; }
	.disclosure > summary::before { content: "▸"; display: inline-block; width: 1.1em; transition: transform 120ms ease; }
	.disclosure[open] > summary::before { transform: rotate(90deg); }
	.disclosure[open] > summary { margin-bottom: var(--space-4); }

	/* danger zone: actions that cannot be undone */
	.danger-zone {
		border: 1px solid color-mix(in oklab, var(--danger) 30%, var(--line));
		border-radius: var(--radius-box);
		background: var(--surface);
	}
	.danger-zone > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding: var(--space-4) var(--space-5);
		cursor: pointer;
		list-style: none;
		color: var(--danger);
		font-weight: 650;
	}
	.danger-zone > summary::-webkit-details-marker { display: none; }
	.danger-zone > summary::after { content: "Show"; color: var(--ink-faint); font-size: var(--text-sm); font-weight: 500; }
	.danger-zone[open] > summary::after { content: "Hide"; }
	.danger-body { padding: 0 var(--space-5) var(--space-5); }

	/* confirm: what a danger will do, beside the button that does it */
	.confirm { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); flex-wrap: wrap; }
	.confirm p { flex: 1; min-width: 14rem; color: var(--ink-muted); font-size: var(--text-sm); }
	/* narrow screens give the button the full width, as form bars do */
	@media (max-width: 40rem) {
		.confirm form, .confirm .button { width: 100%; }
		.row-confirm { padding-inline: var(--space-4); }
	}

	/* stats: counts that lead to their lists */
	.stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
	.stat {
		display: grid;
		gap: var(--space-1);
		padding: var(--space-4) var(--space-5);
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius-box);
		box-shadow: var(--shadow);
		color: inherit;
		text-decoration: none;
	}
	.stat:hover { border-color: var(--accent-line); }
	.stat-value { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
	.stat-label { color: var(--ink-muted); font-size: var(--text-sm); font-weight: 600; }

	/* app: one app a person can use */
	.apps { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
	.app {
		display: grid;
		gap: var(--space-4);
		align-content: start;
		padding: var(--space-5);
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius-box);
		box-shadow: var(--shadow);
	}
	.app-head { display: flex; align-items: center; gap: var(--space-3); }
	.app-head .media { --size: 2.75rem; }
	.app-name { flex: 1; min-width: 0; display: grid; }
	.app-name strong { font-size: var(--text-lg); overflow-wrap: anywhere; }
	.app-name span { color: var(--ink-muted); font-size: var(--text-sm); }
	.app-facts { display: grid; gap: var(--space-3); }
	.app-fact { display: grid; gap: var(--space-1); }
	.app-fact h3 { color: var(--ink-faint); font-size: var(--text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; }
	.app-fact p { color: var(--ink-muted); font-size: var(--text-sm); }

	/* empty: a place with nothing in it yet */
	.empty {
		display: grid;
		justify-items: center;
		gap: var(--space-2);
		padding: var(--space-7) var(--space-5);
		text-align: center;
		border: 1px dashed var(--line-strong);
		border-radius: var(--radius-box);
	}
	.empty p { color: var(--ink-muted); max-width: 32rem; }

	/* permissions: what an authorization request asks for */
	.permissions { display: grid; gap: var(--space-3); }
	.permission { display: flex; gap: var(--space-3); align-items: flex-start; }
	.permission::before {
		content: "✓";
		flex: none;
		display: grid;
		place-items: center;
		width: 1.4rem;
		height: 1.4rem;
		margin-top: 0.1rem;
		border-radius: 50%;
		background: var(--accent-soft);
		color: var(--accent-ink);
		font-size: var(--text-xs);
		font-weight: 700;
	}
	.permission.granted { opacity: 0.7; }
	.permission.granted::before { background: var(--surface-sunken); color: var(--ink-faint); }
	.permission div { display: grid; }
	.permission span { color: var(--ink-muted); font-size: var(--text-sm); }

	.connection { display: flex; align-items: center; gap: var(--space-3); }
	.connection-line { width: 2.5rem; border-top: 2px dotted var(--line-strong); }

	.subtle { color: var(--ink-muted); font-size: var(--text-sm); }
	.subtle form { display: inline; }
	.link-button {
		padding: 0;
		border: 0;
		background: none;
		color: var(--accent-ink);
		font: inherit;
		text-decoration: underline;
		text-underline-offset: 0.2em;
		cursor: pointer;
	}

	/* change: one difference a manifest would make */
	.changes > li { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); }
	.change-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
	.change-detail { color: var(--ink-muted); font-size: var(--text-sm); white-space: pre-wrap; }
	.diff { display: grid; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-sm); }
	.diff del, .diff ins { display: block; padding: 0.15rem 0.5rem; border-radius: 0.3rem; text-decoration: none; overflow-wrap: anywhere; }
	.diff del { background: var(--danger-soft); color: var(--danger); }
	.diff del::before { content: "− "; }
	.diff ins { background: var(--success-soft); color: var(--success); }
	.diff ins::before { content: "+ "; }
	.diff .none { font-style: italic; }
}