/* Design tokens and component classes for the sociogram layouts.
 * Token values come from the quorum-exploration design handoff
 * (code/proton-switch/public/new/quorum-exploration/README.md,
 * "Design Tokens"): ink/violet, Archivo + IBM Plex Mono, sharp
 * corners. Every color below is a token, so the light set
 * ([data-theme="light"], chosen with the top bar's switch) and a
 * composing binary's own theme re-point the tokens and nothing else. IBM Plex Mono is vendored in static/fonts/; Archivo is
 * not yet — a system grotesque stack stands in until the woff2
 * files land (see docs/tasks/live-rollout.md). */

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}

:root {
	/* the default theme ThemeInit applies when the viewer chose none;
	   an app's sheet re-points it (light, or dark by media query) */
	--theme: dark;

	/* handoff token table */
	--bg: #0b0b0b;                        /* ink-bg */
	--bg-raised: #141414;                 /* ink-bg-raised */
	--bg-selected: #2a1f33;               /* ink-bg-selected */
	--bg-input: #111;
	--hov: #1a1a1a;                       /* ink-bg-hover */
	--ink: #f4f4f1;
	--ink-hi: #fff;                       /* hovered links */
	--ink-72: rgba(244, 244, 241, 0.72);  /* body copy */
	--ink-60: rgba(244, 244, 241, 0.6);   /* secondary copy */
	--ink-45: rgba(244, 244, 241, 0.45);  /* mono labels, meta */
	--ink-32: rgba(244, 244, 241, 0.32);  /* placeholder, disabled */
	--ghost: rgba(244, 244, 241, 0.16);   /* ghost index numerals */
	--rule: rgba(244, 244, 241, 0.18);    /* primary hairlines */
	--rule-soft: rgba(244, 244, 241, 0.14);
	--rule-dotted: rgba(244, 244, 241, 0.28);
	--accent: #c77dff;                    /* the Quorum violet */
	--accent-soft: rgba(199, 125, 255, 0.45);
	--accent-wash: rgba(199, 125, 255, 0.12);
	--accent-light: #e0a3ff;
	--danger: #ff6a5f;                    /* reasoned no / held */
	--danger-text: #ff8b82;
	--danger-wash: rgba(255, 106, 95, 0.1);

	/* aliases kept for the existing component classes */
	--card: var(--bg);
	--panel: var(--bg-raised);
	--mut: var(--ink-45);
	--line: var(--rule);
	--line2: var(--rule-dotted);
	--ok: var(--accent);
	--err: var(--danger);

	--font-sans: Archivo, "Archivo Variable", system-ui, "Helvetica Neue", sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--header-h: 56px;
}

/* The light set: the same ink and violet, on paper. */
[data-theme="light"] {
	--bg: #f4f4f1;
	--bg-raised: #fff;
	--bg-selected: #eadcf7;
	--bg-input: #fff;
	--hov: #e9e9e4;
	--ink: #0b0b0b;
	--ink-hi: #000;
	--ink-72: rgba(11, 11, 11, 0.78);
	--ink-60: rgba(11, 11, 11, 0.66);
	--ink-45: rgba(11, 11, 11, 0.56);
	--ink-32: rgba(11, 11, 11, 0.38);
	--ghost: rgba(11, 11, 11, 0.16);
	--rule: rgba(11, 11, 11, 0.22);
	--rule-soft: rgba(11, 11, 11, 0.14);
	--rule-dotted: rgba(11, 11, 11, 0.32);
	--accent: #7b2cbf;
	--accent-soft: rgba(123, 44, 191, 0.45);
	--accent-wash: rgba(123, 44, 191, 0.1);
	--accent-light: #9d4edd;
	--danger: #c8372d;
	--danger-text: #b02a21;
	--danger-wash: rgba(200, 55, 45, 0.08);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
	background: var(--bg);
	color: var(--ink);
	font: 400 14px/1.55 var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

/* Links per the handoff's global rules. */
a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
}

a:hover { color: var(--ink-hi); text-decoration-color: var(--accent-light); }

a:visited { color: var(--ink-72); text-decoration-color: var(--accent-soft); }

a:visited:hover { color: var(--ink); text-decoration-color: var(--accent); }

a:active { background: var(--accent-wash); }

input, select, textarea, button { font: inherit; color: inherit; }

textarea::placeholder, input::placeholder { color: var(--ink-45); }

::selection { background: var(--accent); color: var(--bg); }

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

/* page frame: one centered column; the top bar and the content share
   its edges */

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.main { width: 100%; padding-top: 32px; padding-bottom: 80px; }

/* top bar: brand, circle switcher, search or nav, theme switch,
   member — and, inside a circle scope, the tab row beneath */

.topbar { background: var(--bg-raised); border-bottom: 2px solid var(--accent); }

.topbar-row { display: flex; align-items: center; gap: 18px; height: var(--header-h); }

.topbar-tabs .topbar-row { border-bottom: 1px solid var(--rule); }

.brand {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	text-decoration: none;
	font: 800 14px var(--font-sans);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ink);
}

.brand:visited { color: var(--ink); }

.crumb-sep { flex: none; color: var(--ink-45); }

/* the circle switcher: the crumb that names the active scope, opening
   the community's scopes beneath it */

.switcher { position: relative; flex: none; min-width: 0; max-width: 40%; }

.switcher > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: -8px;
	padding: 6px 8px;
	list-style: none;
	cursor: pointer;
	font: 800 14px var(--font-sans);
	color: var(--ink);
}

.switcher > summary::-webkit-details-marker { display: none; }

.switcher > summary:hover, .switcher[open] > summary { background: var(--hov); }

.switcher-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.switcher-caret { flex: none; font-size: 10px; color: var(--ink-45); }

.switcher-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: -8px;
	z-index: 40;
	width: 300px;
	max-width: calc(100vw - 32px);
	max-height: 70vh;
	overflow-y: auto;
	padding: 6px 0;
	background: var(--bg-raised);
	border: 1px solid var(--rule);
}

.switcher-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-left: 3px solid transparent;
	text-decoration: none;
	color: var(--ink);
}

.switcher-row:visited { color: var(--ink); }

.switcher-row:hover { background: var(--hov); color: var(--ink); }

.switcher-row.active { border-left-color: var(--accent); background: var(--accent-wash); }

.switcher-code { flex: none; width: 46px; font: 400 9px var(--font-mono); color: var(--accent); }

.switcher-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 800 14px var(--font-sans);
}

.switcher-count { flex: none; font: 400 9.5px var(--font-mono); color: var(--ink-45); }

.topbar-fill { flex: 1; }

.search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	align-self: stretch;
	min-width: 0;
	padding: 0 14px;
	border-left: 1px solid var(--rule);
	border-right: 1px solid var(--rule);
}

.search:focus-within { background: var(--bg); }

.search svg { flex: none; stroke: var(--ink-45); }

.search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	background: transparent;
	border: 0;
	outline: none;
	padding: 0;
	color: var(--ink);
	font: 400 10px var(--font-mono);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.topbar-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.topbar-nav a {
	text-decoration: none;
	padding: 8px 12px;
	font: 500 11px var(--font-mono);
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ink-60);
}

.topbar-nav a:hover { background: var(--hov); color: var(--ink); }

.theme-btn {
	flex: none;
	background: transparent;
	border: 1px solid var(--rule-dotted);
	padding: 6px 8px;
	font: 500 10px var(--font-mono);
	letter-spacing: 1.4px;
	color: var(--ink-60);
	cursor: pointer;
}

.theme-btn:hover { color: var(--ink); }

.theme-btn .when-light { display: none; }

[data-theme="light"] .theme-btn .when-dark { display: none; }

[data-theme="light"] .theme-btn .when-light { display: inline; }

.avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border: 1px solid var(--rule-dotted);
	text-decoration: none;
	font: 400 11px var(--font-mono);
	color: var(--accent);
}

.avatar:visited { color: var(--accent); }

.avatar:hover { background: var(--hov); color: var(--accent); }

.tabs { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; }

.tab {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 12px 14px;
	text-decoration: none;
	font: 600 11px var(--font-mono);
	letter-spacing: 1.6px;
	color: var(--ink-60);
}

.tab:visited { color: var(--ink-60); }

.tab:hover { background: var(--hov); color: var(--ink); }

.tab.active { background: var(--bg-selected); color: var(--ink); }

.tab-count { font: 400 9.5px var(--font-mono); color: var(--ink-45); }

.page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; }

.page h1 {
	margin: 0 0 18px;
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -1px;
	text-transform: uppercase;
}

/* components */

.card {
	background: var(--card);
	border: 1px solid var(--rule);
	padding: 22px 24px;
	margin: 0 0 20px;
}

.card h2 {
	margin: 0 0 14px;
	font: 500 10.5px var(--font-mono);
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ink-72);
}

.label {
	display: block;
	font: 500 9px var(--font-mono);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ink-45);
	margin-bottom: 6px;
}

.input {
	width: 100%;
	background: var(--bg-input);
	border: 1px solid var(--rule-dotted);
	padding: 9px 12px;
	font-size: 14px;
	color: var(--ink);
	outline: none;
}

.input:focus { border-color: var(--accent-soft); }

.btn {
	background: transparent;
	color: var(--ink-60);
	border: 1px solid var(--rule-dotted);
	padding: 7px 13px;
	font: 500 10px var(--font-mono);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	cursor: pointer;
}

.btn:hover { background: var(--hov); color: var(--ink); }

.btn-primary {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
}

.btn-primary:hover { background: var(--accent-wash); color: var(--accent); }

.row-list { list-style: none; margin: 0; padding: 0; }

.row-list > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--rule-soft);
}

.row-list > li:first-child { border-top: 0; }

.muted { color: var(--ink-45); }

.mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-45); }

/* pattern vocabulary (handoff "Recurring pattern vocabulary") */

.code { font: 400 9.5px var(--font-mono); color: var(--accent); }

.tag {
	display: inline-block;
	font: 400 8.5px var(--font-mono);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--accent);
	border: 1px solid var(--accent-soft);
	padding: 3px 7px;
}

.tag-muted { color: var(--ink-60); border-color: var(--rule-dotted); }

.tag-danger { color: var(--danger-text); border-color: var(--danger); }

.eyebrow {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
	font: 500 10.5px var(--font-mono);
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--accent);
}

.eyebrow .code { color: var(--ink-45); }

/* /about: a topic and a sentence each */

.about-lines dt {
	margin-top: 18px;
	font: 500 10.5px var(--font-mono);
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ink-45);
}

.about-lines dd { margin: 6px 0 0; max-width: 64ch; }

.flash {
	border: 1px solid var(--rule);
	background: var(--panel);
	padding: 11px 13px;
	font-size: 13px;
	margin: 0 0 20px;
}

.flash-ok { border-color: var(--accent-soft); }

.flash-err { border-color: var(--danger); color: var(--danger-text); }

.flash-empty { display: none; }

.indicator {
	opacity: 0;
	font: 400 11px var(--font-mono);
	color: var(--ink-45);
	transition: opacity 0.15s;
}

.indicator.on { opacity: 1; }

/* the community shell: the footer rides the bottom of short pages */

.shell-body { display: flex; flex-direction: column; min-height: 100vh; }

.shell-body .main { flex: 1; }

.shell-footer { border-top: 1px solid var(--rule); }

.shell-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-top: 12px;
	padding-bottom: 12px;
	font: 400 9px var(--font-mono);
	letter-spacing: 1.4px;
	color: var(--ink-45);
}

.shell-footer a { color: var(--ink-60); text-decoration: none; }

.shell-footer a:visited { color: var(--ink-60); }

.shell-footer a:hover { color: var(--ink); }

/* the ledger: a main column and a 300px column of facts */

.ledger {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
}

.ledger-head {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--rule);
}

.ledger-head h1.display { margin-bottom: 0; }

.ledger-head .intro { margin: 10px 0 0; }

.ledger-head .domain-line { margin: 10px 0 0; }

.ledger-side { display: flex; flex-direction: column; gap: 24px; }

.ledger-side .empty-note { margin: 0; }

.stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--rule);
}

.stat { padding: 12px; border-top: 1px solid var(--rule-soft); }

.stat:nth-child(-n+2) { border-top: 0; }

.stat:nth-child(even) { border-left: 1px solid var(--rule-soft); }

.stat-value { font: 800 24px/1 var(--font-sans); letter-spacing: -0.8px; }

.stat-key {
	margin-top: 8px;
	font: 400 9.5px var(--font-mono);
	letter-spacing: 1.6px;
	color: var(--ink-45);
}

.stat-key.accent { color: var(--accent); }

.stat-sub {
	margin-top: 4px;
	font: 400 9px/1.5 var(--font-mono);
	letter-spacing: 0.6px;
	color: var(--ink-45);
}

/* panels: a bordered box of rows */

.panel { border: 1px solid var(--rule); background: var(--card); }

.row {
	display: grid;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--rule-soft);
}

.panel > .row:last-child { border-bottom: 0; }

.panel > .row.empty-note { margin: 0; }

.row-head {
	padding: 8px 14px;
	font: 500 9.5px var(--font-mono);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ink-45);
}

.right { text-align: right; }

.member-row { grid-template-columns: minmax(0, 1fr) 110px 120px; }

.member-who { display: flex; align-items: center; gap: 12px; min-width: 0; }

.role {
	font: 500 9.5px var(--font-mono);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ink-45);
}

.role-staff { color: var(--accent); }

/* shell content patterns */

h1.display {
	margin: 0 0 10px;
	font: 900 40px/1.05 var(--font-sans);
	letter-spacing: -1.8px;
	text-transform: uppercase;
}

.intro {
	margin: 0 0 24px;
	max-width: 640px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink-72);
}

.split { display: flex; gap: 26px; align-items: flex-start; }

.split > div { flex: 1; min-width: 0; }

.rail { flex: none; width: 320px; }

.index-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); }

.index-list > li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--rule-soft);
}

.index-list > li:last-child { border-bottom: 0; }

.index-list > li.empty-note { margin: 0; }

.index-list:not(:has(> li)) { display: none; }

.ghost-num {
	flex: none;
	width: 44px;
	font: 900 30px var(--font-sans);
	letter-spacing: -1px;
	color: var(--ghost);
}

.index-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.index-aim { font-size: 12.5px; color: var(--ink-60); }

.domain-line {
	margin: 0 0 24px;
	font: 400 9.5px var(--font-mono);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--accent);
}

.index-name {
	flex: 1;
	min-width: 0;
	font: 800 16px var(--font-sans);
	color: var(--ink);
	text-decoration: none;
}

a.index-name:hover { color: var(--accent-light); }

a.index-name:visited { color: var(--ink); }

.index-meta {
	flex: none;
	font: 400 9.5px var(--font-mono);
	letter-spacing: 1px;
	color: var(--ink-45);
}

.member-avatar { flex: none; width: 26px; height: 26px; }

.member-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 13.5px var(--font-sans); }

.empty-note {
	margin: 14px 0 0;
	font: 400 9.5px var(--font-mono);
	letter-spacing: 1px;
	line-height: 1.8;
	color: var(--ink-45);
}

/* chooser */

.chooser .chooser-name {
	font: 800 16px var(--font-sans);
	text-decoration: none;
	color: var(--ink);
}

.chooser .chooser-name:hover { color: var(--accent-light); }

.chooser .chooser-name:visited { color: var(--ink); }

.chooser-meta { display: flex; align-items: center; gap: 10px; }

/* toasts */

.toasts {
	position: fixed;
	right: 18px;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 50;
	pointer-events: none;
}

.toast {
	background: var(--bg-raised);
	border: 1px solid var(--accent-soft);
	border-left: 3px solid var(--accent);
	padding: 10px 14px;
	max-width: 320px;
	font-size: 12.5px;
	color: var(--ink-72);
	animation: toast-life 6s forwards;
}

.toast b { color: var(--ink); font-weight: 600; }

@keyframes toast-life {
	0% { opacity: 0; transform: translateY(6px); }
	5% { opacity: 1; transform: none; }
	85% { opacity: 1; }
	100% { opacity: 0; visibility: hidden; }
}

/* small screens: the top bar wraps, the ledger and the split stack,
   hit targets grow to 38px+ */

@media (max-width: 880px) {
	.container { padding: 0 16px; }

	.main { padding-top: 20px; padding-bottom: 48px; }

	.page { padding: 20px 16px 48px; }

	.topbar-row { flex-wrap: wrap; gap: 12px; height: auto; min-height: var(--header-h); }

	/* the mark alone is the way home, leaving the line to the circle
	   switcher; basis 0 so a long name truncates instead of pushing the
	   theme switch and the avatar onto a second line */
	.shell-body .brand-name { display: none; }

	.switcher { flex: 1 1 0; max-width: none; }

	.switcher > summary { width: fit-content; max-width: 100%; }

	.switcher-row { min-height: 44px; }

	.search { order: 5; flex: 1 0 100%; min-height: 44px; border-left: 0; border-right: 0; border-top: 1px solid var(--rule); padding: 0; }

	.tab { min-height: 44px; }

	.ledger { grid-template-columns: minmax(0, 1fr); gap: 28px; }

	h1.display { font-size: 28px; }

	.split { flex-direction: column; }

	.rail { width: 100%; }

	.member-row { grid-template-columns: minmax(0, 1fr) 90px; }

	.member-row > :nth-child(3) { display: none; }

	.profile-head { flex-wrap: wrap; }

	.row-list > li { flex-wrap: wrap; }

	.btn { min-height: 38px; }

	.index-meta { display: none; }

	.shell-footer-row { flex-wrap: wrap; gap: 6px; }
}

/* circle map */

.map-card { border: 1px solid var(--rule); padding: 14px; margin: 0 0 26px; }

.circle-map { display: block; width: 100%; height: auto; }

.map-boundary {
	fill: none;
	stroke: var(--rule-dotted);
	stroke-dasharray: 5 7;
}

.map-caption {
	font: 400 10.5px var(--font-mono);
	letter-spacing: 0.16em;
	fill: var(--ink-45);
	text-anchor: middle;
}

.map-spoke { stroke: var(--rule); stroke-width: 1; }

.map-root { fill: var(--bg-raised); stroke: var(--ink); stroke-width: 1.3; }

.map-sub { fill: var(--bg); stroke: var(--ink); stroke-width: 1.2; }

.map-node:hover .map-root,
.map-node:hover .map-sub { stroke: var(--accent); }

.map-name {
	font: 800 13px var(--font-sans);
	letter-spacing: 0.4px;
	text-transform: uppercase;
	fill: var(--ink);
	text-anchor: middle;
}

.map-dot.tends { fill: var(--accent); }

.map-dot.uses { fill: none; stroke: var(--ink-45); stroke-width: 1; }

.map-kid { fill: var(--bg-raised); stroke: var(--ink-60); stroke-width: 1; }

.map-kid-count {
	font: 400 9px var(--font-mono);
	fill: var(--ink-72);
	text-anchor: middle;
}

.map-kid-name {
	font: 400 8.5px var(--font-mono);
	letter-spacing: 0.6px;
	text-transform: uppercase;
	fill: var(--ink-45);
	text-anchor: middle;
}

.map-legend {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 12px;
	font: 400 9px var(--font-mono);
	letter-spacing: 1.2px;
	color: var(--ink-45);
}

.map-dot-key {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	vertical-align: -1px;
}

.map-dot-key.tends { background: var(--accent); }

.map-dot-key.uses { border: 1px solid var(--ink-45); }

.map-hint { margin-left: auto; }

/* profile */

.profile-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 26px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--rule);
}

.profile-avatar {
	width: 46px;
	height: 46px;
	border: 1px solid var(--rule-dotted);
}

.profile-idblock { flex: 1; min-width: 0; }

.profile-name {
	margin: 0;
	font: 900 27px var(--font-sans);
	letter-spacing: -1.2px;
	text-transform: uppercase;
}

.profile-subline {
	margin: 4px 0 0;
	font: 400 9.5px var(--font-mono);
	letter-spacing: 1.2px;
	color: var(--ink-45);
}

.profile-main { flex: 1; min-width: 0; }

.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.row-title { font: 500 13.5px var(--font-sans); }

.row-sub { font-size: 11.5px; color: var(--ink-45); }

.row-sub.mono { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.6px; }

.row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.inline-form { display: inline; }

.card-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

.card-form .btn { align-self: flex-start; }

.card-form-row { display: flex; gap: 10px; margin-top: 14px; }

.card-form-row .input { flex: 1; }

.card-action { margin-top: 14px; }

.btn-danger {
	color: var(--danger-text);
	border-color: var(--danger);
}

.btn-danger:hover { background: var(--danger-wash); color: var(--danger-text); }

.kv {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 9px 12px;
	margin: 14px 0 0;
	font-size: 12.5px;
}

.kv dt {
	font: 400 9.5px var(--font-mono);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ink-45);
	padding-top: 2px;
}

.kv dd { margin: 0; color: var(--ink-72); overflow-wrap: anywhere; }

.kv dd.mono { font-family: var(--font-mono); font-size: 11px; }

.kv-chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* invites */

.invite-header { margin-top: 30px; }

.invite-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 480px;
	margin-top: 14px;
}

.invite-form .btn { align-self: flex-start; }

.join-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }

.join-attach { margin: 0; font-size: 13px; color: var(--ink-72); }

.join-attach b { color: var(--ink); }

.join-signin { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-60); }

/* audit log */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }

.chip {
	padding: 6px 12px;
	border: 1px solid var(--rule-dotted);
	font: 400 9.5px var(--font-mono);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ink-60);
	text-decoration: none;
}

.chip:visited { color: var(--ink-60); }

.chip:hover { background: var(--hov); color: var(--ink); }

.chip.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.chip.active:visited { color: var(--bg); }

.audit-list { list-style: none; margin: 0; padding: 0; }

.audit-list > li {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px dotted var(--rule-dotted);
}

.audit-when { flex: none; width: 96px; font: 400 10px var(--font-mono); color: var(--ink-45); }

.audit-key { flex: none; width: 122px; font: 400 9.5px var(--font-mono); color: var(--ink-45); }

.audit-entry { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-72); }

.audit-entry b { font-weight: 600; color: var(--ink); }

.audit-circle { flex: none; font: 400 9.5px var(--font-mono); letter-spacing: 0.8px; color: var(--ink-45); }

.audit-rail { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.audit-rail > li { padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }

.audit-text { margin: 0; font-size: 12.5px; color: var(--ink-72); }

.audit-text b { font-weight: 600; color: var(--ink); }

.audit-meta { margin: 4px 0 0; font: 400 9px var(--font-mono); letter-spacing: 0.8px; color: var(--ink-45); }

.audit-more {
	display: block;
	padding: 10px 0;
	font: 400 9.5px var(--font-mono);
	letter-spacing: 1.4px;
	color: var(--accent);
	text-decoration: none;
}

.audit-more:visited { color: var(--accent); }

.audit-more:hover { color: var(--accent-light); }

/* auth screens (consent, later sign-in) */

.auth-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 26px;
}

.auth-card {
	width: 100%;
	max-width: 404px;
	background: var(--bg-raised);
	border: 1px solid var(--rule);
	padding: 24px;
}

.auth-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.auth-member { font: 400 11px var(--font-mono); color: var(--ink-45); }

.auth-title {
	margin: 0 0 6px;
	font: 500 18px var(--font-sans);
	letter-spacing: -0.2px;
}

.auth-title b { font-weight: 800; }

.scope-rows { list-style: none; margin: 16px 0 0; padding: 0; }

.scope-rows > li {
	padding: 11px 0;
	border-top: 1px solid var(--rule-soft);
}

.scope-name {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 500 13.5px var(--font-sans);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.scope-desc {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--ink-60);
}

.auth-note {
	margin: 16px 0 0;
	padding: 12px;
	background: var(--bg);
	border: 1px solid var(--rule-soft);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ink-60);
}

.auth-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}

.auth-foot {
	margin-top: 14px;
	font: 400 9.5px var(--font-mono);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ink-45);
}

.auth-flash { width: 100%; max-width: 404px; margin-bottom: 14px; }

.auth-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0;
	font: 400 9px var(--font-mono);
	letter-spacing: 1.6px;
	color: var(--ink-45);
}

.auth-divider::before,
.auth-divider::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--rule-soft);
}

.btn-block { display: flex; width: 100%; justify-content: center; }

.input-compact { width: auto; padding: 6px 10px; font-size: 12px; }

.crumb { color: var(--ink-45); text-decoration: none; }

.crumb:visited { color: var(--ink-45); }

.crumb:hover { color: var(--ink); }

/* join: the password path sits behind a disclosure under the passkey button */
.join-password { margin-top: 4px; }
.join-password > summary { font-size: 13px; }
.join-password[open] { display: flex; flex-direction: column; gap: 14px; }

/* The assembly.forum theme.
 *
 * Served at /css/app.css after sociogram's own sheet, so these rules
 * win the cascade. Sociogram supplies the layout — top bar, tab row,
 * ledger, panels — and every color through tokens; this sheet re-points
 * the tokens at the site's palette and redraws the skin: 2px neutral
 * borders, surface panels, filled accent buttons, underlined tabs.
 * Dark by default; the top bar's switch sets <html data-theme="light">.
 *
 * No font files of our own: mono is the IBM Plex Mono sociogram already
 * serves from /fonts/, the rest are core web fonts. */

:root {
  --bg: #0c0c0d;
  --surface: #141416;
  --surface2: #1b1b1e;
  --border: #333333;
  --text: #ebe8e2;
  --muted: #8c8a85;
  --accent: #2fc4b2;      /* the assembly turquoise */
  --accent-ink: #06201d;  /* type on an accent block */
  --danger: #ff6a5f;
  --danger-text: #ff8b82;
  --bw: 2px;

  /* link states: rest, hover, pressed, seen — all on the accent hue */
  --link: var(--accent);
  --link-hover: #7fe6d8;
  --link-active: #1ea796;
  --link-visited: #86b7b1;

  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", "Andale Mono", "Courier New", monospace;
  --font-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;

  /* sociogram's tokens, re-pointed */
  --bg-raised: var(--surface);
  --bg-selected: var(--surface2);
  --bg-input: var(--bg);
  --hov: var(--surface2);
  --ink: var(--text);
  --ink-hi: var(--text);
  --ink-72: color-mix(in srgb, var(--text) 82%, var(--bg));
  --ink-60: color-mix(in srgb, var(--text) 66%, var(--bg));
  --ink-45: var(--muted);
  --ink-32: color-mix(in srgb, var(--muted) 55%, var(--bg));
  --ghost: var(--border);
  --rule: var(--border);
  --rule-soft: var(--border);
  --rule-dotted: var(--border);
  --accent-soft: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-wash: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-light: var(--link-hover);
  --danger-wash: color-mix(in srgb, var(--danger) 10%, transparent);
  --card: var(--surface);
  --header-h: 54px;
}
[data-theme="light"] {
  --bg: #eef1f1;
  --surface: #ffffff;
  --surface2: #f4f6f6;
  --border: #c9d1cf;
  --text: #111817;
  --muted: #5c6966;
  --accent: #0f8f82;
  --accent-ink: #ffffff;
  --danger: #c8372d;
  --danger-text: #b02a21;

  --link: #0b7d72;
  --link-hover: #065f56;
  --link-active: #04463f;
  --link-visited: #4a736e;
}

html { background: var(--bg); color: var(--text); }
body { font: 14px/1.5 var(--font-sans); }
::selection { background: var(--accent); color: var(--accent-ink); }
textarea::placeholder, input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }

/* ---- links ----
   Chrome links (brand, nav, tabs, rows) take the text color and their
   own hover below. Unclassed anchors are the links in page copy: they
   carry the four link states. */
a, a:visited { color: inherit; text-decoration: none; }
a:hover, a:visited:hover { color: var(--link-hover); }
a:active { background: none; }
a:not([class]), a:not([class]):visited {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:not([class]) { color: var(--link); text-decoration-color: var(--accent-soft); }
a:not([class]):visited { color: var(--link-visited); text-decoration-color: var(--link-visited); }
a:not([class]):hover, a:not([class]):visited:hover { color: var(--link-hover); text-decoration-color: currentColor; }
a:not([class]):active, a:not([class]):visited:active { color: var(--link-active); background: var(--accent-wash); }
:focus-visible { outline-color: var(--link-hover); }

/* ---- display type ---- */
h1.display, .page h1, .profile-head .profile-name, .auth-title,
.stat-value, .index-name, .chooser .chooser-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none; /* Impact has one weight; the fallbacks get their real bold */
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
h1.display { font-size: clamp(34px, 4.6vw, 52px); line-height: .95; }
.page h1 { margin: 0 0 20px; font-size: 40px; }
.index-name, .chooser .chooser-name { font-size: 20px; }
.intro { max-width: 620px; font-size: 15px; color: var(--muted); text-wrap: pretty; }
.domain-line { font: 500 11px var(--font-mono); letter-spacing: .1em; }
.code { font: 400 11px var(--font-mono); }
.empty-note { font: 400 12px/1.7 var(--font-mono); letter-spacing: .02em; }

/* eyebrows */
.card h2, .eyebrow {
  font: 500 11px var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.card h2 { margin: 0 0 12px; }

/* ---- top bar ---- */
.topbar { background: var(--surface); border-bottom: var(--bw) solid var(--border); }
.topbar-tabs .topbar-row { border-bottom: 0; }
.brand, .brand:visited { gap: 10px; font: 700 14px/1 var(--font-sans); letter-spacing: .14em; color: var(--text); }
.brand:hover, .brand:visited:hover { color: var(--text); }
.brand svg, .auth-head svg { flex: none; display: block; }
.brand:hover svg { filter: brightness(1.08); }
.switcher > summary { font: 500 14px var(--font-sans); color: var(--text); }
.switcher-menu { background: var(--surface); border: var(--bw) solid var(--border); }
.switcher-row, .switcher-row:visited { border-left: var(--bw) solid transparent; color: var(--text); }
.switcher-row:hover, .switcher-row:visited:hover { background: var(--surface2); color: var(--text); }
.switcher-row.active, .switcher-row.active:visited { background: var(--surface2); border-left-color: var(--accent); }
.switcher-code { width: 50px; font: 500 11px var(--font-mono); }
.switcher-row.active .switcher-code { color: var(--accent); }
.switcher-label { font: 500 14px var(--font-sans); }
.switcher-count { font: 400 11px var(--font-mono); }
.search { border-left: var(--bw) solid var(--border); border-right: var(--bw) solid var(--border); transition: background .15s; }
.search:hover, .search:focus-within { background: var(--bg); }
.topbar-tabs .search { border-bottom: var(--bw) solid var(--border); }
.search svg { stroke: var(--muted); }
.search input { font: 400 11px var(--font-mono); letter-spacing: .06em; }
.topbar-nav { gap: 4px; }
.topbar-nav a, .topbar-nav a:visited {
  padding: 6px 10px;
  font: 500 13px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.topbar-nav a:hover, .topbar-nav a:visited:hover { background: none; color: var(--text); }
.topbar-nav a[aria-current], .topbar-nav a.active { color: var(--accent); }
.theme-btn { border: var(--bw) solid var(--border); padding: 5px 8px; font: 500 11px var(--font-mono); letter-spacing: .06em; color: var(--muted); }
.theme-btn:hover { color: var(--text); }
.avatar, .avatar:visited, .avatar:hover, .avatar:visited:hover {
  width: 28px;
  height: 28px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 11px var(--font-sans);
}
.avatar:hover { filter: brightness(1.08); }

.tabs { gap: 4px; }
.tab, .tab:visited {
  padding: 10px 12px;
  margin-bottom: calc(-1 * var(--bw));
  border-bottom: var(--bw) solid transparent;
  font: 600 12px var(--font-mono);
  letter-spacing: .08em;
  color: var(--muted);
}
.tab:hover, .tab:visited:hover { background: none; color: var(--text); }
.tab.active, .tab.active:visited, .tab.active:hover { background: none; color: var(--text); border-bottom-color: var(--accent); }
.tab-count { font: 400 11px var(--font-mono); color: var(--accent); }

/* ---- buttons, tags, pills ---- */
.btn, .btn:visited {
  padding: 8px 14px;
  background: transparent;
  color: var(--text);
  border: var(--bw) solid var(--border);
  font: 600 12px/1.3 var(--font-mono);
  letter-spacing: .08em;
}
.btn:hover, .btn:visited:hover { background: transparent; color: var(--text); border-color: var(--muted); }
.btn:active { background: var(--accent-wash); }
.btn-primary, .btn-primary:visited { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover, .btn-primary:visited:hover {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  filter: brightness(1.08);
}
.btn-primary:active { background: var(--link-active); border-color: var(--link-active); filter: none; }
.btn-danger, .btn-danger:visited { color: var(--danger-text); border-color: var(--danger); }
.btn-danger:hover, .btn-danger:visited:hover {
  background: var(--danger-wash);
  color: var(--danger-text); border-color: var(--danger);
}

.tag { padding: 0 5px; font: 500 10px/1.6 var(--font-mono); letter-spacing: .06em; border-color: var(--accent); }
.tag-muted { color: var(--muted); border-color: var(--border); }
.tag-danger { color: var(--danger-text); border-color: var(--danger); }

.chips { gap: 4px; }
.chip, .chip:visited {
  padding: 5px 10px;
  border: 1px solid var(--border);
  font: 500 11px var(--font-mono);
  letter-spacing: .06em;
  color: var(--muted);
}
.chip:hover, .chip:visited:hover { background: transparent; color: var(--text); border-color: var(--muted); }
.chip.active, .chip.active:visited, .chip.active:hover {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}

/* ---- forms ---- */
.label { font: 500 11px var(--font-mono); letter-spacing: .1em; color: var(--muted); }
.input { padding: 9px 12px; border: var(--bw) solid var(--border); }
.input:focus { border-color: var(--accent); }
.input-compact { padding: 5px 8px; }

/* ---- panels and rows ---- */
.card { padding: 20px 22px; border-width: var(--bw); }
.flash { border-width: var(--bw); background: var(--surface); }
.flash-ok { border-color: var(--accent); }
.row-list > li { border-top-width: var(--bw); }
.row-title, .member-name { font: 500 14px var(--font-sans); }
.row-title:hover, .row-title:visited:hover { color: var(--link-hover); }
.row-sub { font-size: 12px; }
.row-sub.mono { font-size: 11px; letter-spacing: .02em; }
.kv { grid-template-columns: 72px 1fr; }
.kv dt { font: 400 11px var(--font-mono); letter-spacing: .08em; }
.toast { background: var(--surface); border: var(--bw) solid var(--border); border-left-color: var(--accent); }

.panel, .index-list, .audit-list { background: var(--surface); border: var(--bw) solid var(--border); }
.row, .index-list > li, .audit-list > li { border-bottom: var(--bw) solid var(--border); }
.panel > .row:last-child, .index-list > li:last-child, .audit-list > li:last-child { border-bottom: 0; }
.audit-list > li { padding: 12px 14px; }
.audit-list:not(:has(> li)) { display: none; }
.row-head { font: 500 11px var(--font-mono); letter-spacing: .1em; }
.role { font: 500 11px var(--font-mono); letter-spacing: .06em; }
.ghost-num { width: 28px; font: 500 11px var(--font-mono); letter-spacing: 0; color: var(--accent); }
.index-name, .index-name:visited, .chooser .chooser-name, .chooser .chooser-name:visited { color: var(--text); }
a.index-name:hover, .chooser .chooser-name:hover { color: var(--link-hover); }
.index-aim { font-size: 13px; color: var(--muted); }
.index-meta { font: 400 11px var(--font-mono); letter-spacing: .04em; }
.member-avatar, .profile-avatar { background: var(--surface2); border: var(--bw) solid var(--border); }
.member-avatar { width: 28px; height: 28px; }
.crumb, .crumb:visited { color: var(--muted); }
.crumb:hover, .crumb:visited:hover { color: var(--text); }

/* ---- ledger ---- */
.ledger-head { border-bottom-width: var(--bw); }
.stats { gap: var(--bw); background: var(--border); border: var(--bw) solid var(--border); }
.stat, .stat:nth-child(-n+2), .stat:nth-child(even) { border: 0; background: var(--surface); }
.stat-value { font-size: 26px; color: var(--accent); }
.stat-key { margin-top: 6px; font: 400 11px var(--font-mono); letter-spacing: .08em; }
.stat-sub { font: 400 10px/1.5 var(--font-mono); letter-spacing: .04em; }

/* ---- audit log ---- */
.audit-rail { border-top: var(--bw) solid var(--border); }
.audit-rail > li { border-bottom: var(--bw) solid var(--border); }
.audit-text { font-size: 13px; }
.audit-meta, .audit-circle { font: 400 11px var(--font-mono); letter-spacing: .02em; }
.audit-more, .audit-more:visited { font: 500 11px var(--font-mono); letter-spacing: .1em; color: var(--link); }
.audit-more:hover, .audit-more:visited:hover { color: var(--link-hover); }
.audit-when { width: 100px; font: 400 11px var(--font-mono); }
.audit-key { width: 130px; font: 400 11px var(--font-mono); }

/* ---- footer ---- */
.shell-footer { border-top: var(--bw) solid var(--border); }
.shell-footer-row { font: 400 11px var(--font-mono); letter-spacing: .06em; color: var(--muted); }
.shell-footer a, .shell-footer a:visited { color: var(--muted); }
.shell-footer a:hover, .shell-footer a:visited:hover { color: var(--text); }
.shell-footer .code { display: none; }

/* ---- circle map ---- */
.map-card { background: var(--surface); border-width: var(--bw); }
.map-root, .map-kid { fill: var(--surface2); }
.map-name { font: 700 12px var(--font-sans); letter-spacing: .06em; }
.map-caption { font-size: 11px; }
.map-kid-count, .map-kid-name { font-size: 10px; }
.map-legend { font: 400 11px var(--font-mono); letter-spacing: .06em; }

/* ---- profile ---- */
.profile-head { border-bottom-width: var(--bw); }
.profile-head .profile-name { margin: 0; font-size: 36px; }
.profile-subline { margin-top: 6px; font: 400 11px var(--font-mono); letter-spacing: .06em; }

/* ---- auth cards ---- */
.auth-card { background: var(--surface); border-width: var(--bw); }
.auth-member { font: 500 11px var(--font-mono); letter-spacing: .1em; }
.auth-title { margin: 0 0 14px; font-size: 28px; }
.auth-title b { font-weight: inherit; color: var(--accent); }
.auth-note { border-width: var(--bw); color: var(--muted); }
.auth-foot { font: 400 11px var(--font-mono); letter-spacing: .08em; }
.auth-divider { font: 500 11px var(--font-mono); letter-spacing: .12em; }
.auth-divider::before, .auth-divider::after { border-top-width: var(--bw); }
.scope-rows > li { border-top-width: var(--bw); }

/* ---- small screens: the properties above that sociogram's own
   breakpoint also sets, re-asserted so they survive this sheet ---- */
@media (max-width: 880px) {
  .search, .topbar-tabs .search { border-left: 0; border-right: 0; border-bottom: 0; border-top: var(--bw) solid var(--border); }
  h1.display { font-size: 32px; }
}