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

	--page: #ffffff;
	--page-tint: #f6f5f4;       /* warm white — section alternation */
	--surface: #ffffff;          /* cards */
	--text: rgba(0, 0, 0, .95);  /* softened black, not #000 */
	--text-2: #615d59;           /* warm gray 500 */
	--text-3: #a39e98;           /* warm gray 300 — placeholders, disabled */
	--line: rgba(0, 0, 0, .1);   /* whisper border */
	--field-line: #dddddd;

	--accent: #0075de;
	--accent-active: #005bab;
	--focus: #097fe8;
	--badge-bg: #f2f9ff;
	--badge-text: #097fe8;
	--danger: #dd5b00;
	--done: #1aae39;

	--card-shadow:
		rgba(0,0,0,.04) 0 4px 18px,
		rgba(0,0,0,.027) 0 2.025px 7.84688px,
		rgba(0,0,0,.02) 0 .8px 2.925px,
		rgba(0,0,0,.01) 0 .175px 1.04062px;

	--r-control: 4px;
	--r-small: 8px;
	--r-card: 12px;
	--r-pill: 9999px;
}

/*
 * Three states, in this order:
 *   1. no choice        -> follow the system  (the media query below)
 *   2. chose light      -> the media query must NOT win  (:not([data-theme="light"]))
 *   3. chose dark       -> win even on a light system    ([data-theme="dark"])
 *
 * Every dark token is therefore declared twice. Light lives on the bare
 * :root above, so a colour is never defined only inside a conditional block.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { 		--page: #1f1e1c;
		--page-tint: #262523;
		--surface: #31302e;        /* the contract's warm dark */
		--text: rgba(255, 255, 255, .95);
		--text-2: #b3ada6;
		--text-3: #8a847d;
		--line: rgba(255, 255, 255, .12);
		--field-line: rgba(255, 255, 255, .18);

		--accent: #62aef0;         /* its link colour for dark surfaces */
		--accent-active: #97cbf7;
		--badge-bg: rgba(98, 174, 240, .14);
		--badge-text: #97cbf7;

		--card-shadow: rgba(0,0,0,.35) 0 4px 18px, rgba(0,0,0,.22) 0 2px 8px;
	 }
}
:root[data-theme="dark"] { 		--page: #1f1e1c;
		--page-tint: #262523;
		--surface: #31302e;        /* the contract's warm dark */
		--text: rgba(255, 255, 255, .95);
		--text-2: #b3ada6;
		--text-3: #8a847d;
		--line: rgba(255, 255, 255, .12);
		--field-line: rgba(255, 255, 255, .18);

		--accent: #62aef0;         /* its link colour for dark surfaces */
		--accent-active: #97cbf7;
		--badge-bg: rgba(98, 174, 240, .14);
		--badge-text: #97cbf7;

		--card-shadow: rgba(0,0,0,.35) 0 4px 18px, rgba(0,0,0,.22) 0 2px 8px;
	 }

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

body {
	margin: 0;
	/* No 300ms double-tap delay, and no grey flash on tap. */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	background: var(--page-tint);
	color: var(--text);
	font-family: Inter, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	font-feature-settings: "lnum", "locl";
	-webkit-font-smoothing: antialiased;
	padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.04; letter-spacing: -.05em; }
h2 { font-size: 1.375rem; line-height: 1.27; letter-spacing: -.0125em; }
h3 { font-size: 1.125rem; line-height: 1.3; }
p { margin: 0 0 1rem; text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-control); }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border-radius: var(--r-control); }

@media (prefers-reduced-motion: no-preference) {
	button, a, .task { transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s; }
	button:active { transform: scale(.97); }
}

/* Visible only once focused — the first stop for a keyboard, invisible to everyone else. */
.skip {
	position: absolute; left: .5rem; top: -4rem; z-index: 3;
	background: var(--accent); color: #fff;
	padding: .5rem .875rem; font-weight: 600; border-radius: var(--r-control);
}
.skip:focus { top: .5rem; text-decoration: none; }

/* ---------- Shell ---------- */
.bar {
	display: flex; align-items: center; gap: .5rem;
	padding: .625rem 1rem;
	background: var(--page);
	border-bottom: 1px solid var(--line);
	position: sticky; top: 0; z-index: 2;
}
.wordmark { margin: 0; font-weight: 700; font-size: 1.25rem; letter-spacing: -.03em; color: var(--text); text-decoration: none; }
.wordmark.big { font-size: 2.5rem; letter-spacing: -.05em; display: block; margin-bottom: 1.5rem; }
/* Every control in the header is the same 34px box on the same baseline —
   otherwise a link, a button and the theme pill each pick their own height and
   the row visibly shifts between pages. */
.bar .nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.bar .nav form { display: flex; }
.nav-btn {
	width: 34px; height: 34px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 1px solid transparent; border-radius: var(--r-control);
	color: var(--text-2); text-decoration: none;
}
.nav-btn:hover { background: var(--page-tint); border-color: var(--line); color: var(--text); text-decoration: none; }
.nav-btn svg { width: 18px; height: 18px; }
.bar .wordmark { line-height: 1; }
.link {
	background: none; border: 0; padding: .5rem .75rem;
	font-size: .9375rem; font-weight: 500; color: var(--text-2);
	border-radius: var(--r-control);
}
.link:hover { color: var(--text); background: var(--page-tint); }

main { padding: 1.5rem 1rem 4rem; max-width: 1200px; margin: 0 auto; }
/* The skip link lands here, and the header is sticky — without this the
   first task sits underneath it. */
#board { scroll-margin-top: 5rem; }

/* A request in flight, said rather than left to guesswork. htmx puts
   .htmx-request on the indicator for the life of the call. */
#board.htmx-request { opacity: .6; }
#board.htmx-request button { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
	#board { transition: opacity .1s; }
}
@media (min-width: 768px) { main { padding: 2.5rem 2rem 6rem; } }

/* ---------- Board ---------- */
.horizon { margin-bottom: 2rem; }
.horizon h2 {
	font-size: .875rem; font-weight: 600; letter-spacing: normal;
	color: var(--text-2); margin-bottom: .75rem;
	display: flex; align-items: center; gap: .5rem;
}
.horizon h2 .count {
	font-size: .75rem; font-weight: 600; letter-spacing: .0125em;
	color: var(--badge-text); background: var(--badge-bg);
	border-radius: var(--r-pill); padding: .125rem .5rem;
	font-variant-numeric: tabular-nums;
}
.horizon ul, .done-block ul { list-style: none; margin: 0 0 .75rem; padding: 0; }

.task {
	/* A long list stops costing layout for rows nobody has scrolled to.
	   The intrinsic size keeps the scrollbar from jumping as they render. */
	content-visibility: auto;
	contain-intrinsic-size: auto 56px;
	display: flex; align-items: flex-start; gap: .75rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: var(--card-shadow);
	padding: .75rem;
	margin-bottom: .5rem;
}
.task:hover { border-color: rgba(0, 117, 222, .35); }
.task .text { flex: 1; min-width: 0; overflow-wrap: anywhere; padding-top: .125rem; }
.task form { display: contents; }

.tick {
	flex: none; width: 20px; height: 20px; margin-top: .1875rem;
	background: none; border: 1.5px solid var(--text-3); border-radius: var(--r-control);
	display: grid; place-items: center; padding: 0; position: relative;
}
.tick::after {
	content: ""; width: 10px; height: 10px; border-radius: 1px;
	background: var(--accent); opacity: 0; transform: scale(.6);
}
.tick:hover { border-color: var(--accent); }
.tick:hover::after { opacity: .35; transform: scale(1); }
/* A comfortable tap target without a 44px box breaking the row rhythm. */
.tick::before { content: ""; position: absolute; inset: -12px; }
.tick.static { border-color: var(--done); cursor: default; }
.tick.static::after { background: var(--done); opacity: 1; transform: scale(1); }

.moves { display: flex; gap: .25rem; flex: none; }
.move {
	background: none; border: 1px solid transparent; border-radius: var(--r-control);
	padding: .25rem .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .0125em;
	color: var(--text-2);
}
.move:hover { background: var(--page-tint); border-color: var(--line); color: var(--text); }
.nudge {
	background: none; border: 1px solid transparent; border-radius: var(--r-control);
	padding: .25rem .375rem; font-size: .8125rem; line-height: 1; color: var(--text-3);
}
.nudge:hover { background: var(--page-tint); border-color: var(--line); color: var(--text); }

.task.done { box-shadow: none; background: transparent; }
.task.done .text { color: var(--text-2); text-decoration: line-through; }
.empty { color: var(--text-3); font-size: .875rem; margin: 0 0 .75rem; }

.add { display: flex; gap: .5rem; }
.add input[type=text] {
	flex: 1; min-width: 0; padding: .5rem .625rem;
	background: var(--surface); color: var(--text);
	border: 1px solid var(--field-line); border-radius: var(--r-control);
}
.add input::placeholder { color: var(--text-3); }
.add input:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
.add button {
	background: none; border: 1px solid var(--field-line);
	padding: .5rem .875rem; font-size: .875rem; font-weight: 600; color: var(--text-2);
}
.add button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.done-block { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.done-block summary {
	cursor: pointer; color: var(--text-2); font-size: .875rem; font-weight: 500;
	padding: .375rem 0; list-style-position: inside;
}
.done-block summary:hover { color: var(--text); }

/* ---------- A request that failed ---------- */
.board-error {
	margin: 0 auto; max-width: 1200px;
	padding: .75rem 1rem; color: var(--danger); font-size: .9375rem; font-weight: 500;
	background: rgba(221, 91, 0, .08); border: 1px solid var(--danger);
	border-radius: var(--r-small);
}
.board-error[hidden] { display: none; }
@media (min-width: 768px) { .board-error { margin: 0 2rem; } }

/* ---------- Install offer ---------- */
.install {
	position: fixed; z-index: 4;
	left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card); box-shadow: var(--card-shadow);
	padding: .875rem 1rem;
}
.install[hidden] { display: none; }
.install p { margin: 0; display: flex; flex-direction: column; gap: .125rem; flex: 1; min-width: 12rem; }
.install span { color: var(--text-2); font-size: .875rem; }
.install-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
@media (min-width: 560px) { .install { left: auto; max-width: 26rem; } }

/* ---------- Sign in ---------- */
.signin {
	max-width: 24rem; margin: 3rem auto; padding: 2rem;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: 16px; box-shadow: var(--card-shadow);
}
.signin label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .375rem; }
.signin input {
	width: 100%; padding: .5rem .625rem; margin-bottom: 1rem;
	background: var(--page); color: var(--text);
	border: 1px solid var(--field-line); border-radius: var(--r-control);
}
.signin input:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
.signin button {
	width: 100%; background: var(--accent); color: #fff; border: 0;
	padding: .625rem 1rem; font-size: .9375rem; font-weight: 600;
	border-radius: var(--r-control);
}
.signin button:hover { background: var(--accent-active); }
.hint { color: var(--text-2); font-size: .875rem; margin: 1.25rem 0 0; }
.error {
	color: var(--danger); font-size: .875rem; font-weight: 500;
	background: rgba(221, 91, 0, .08); border-radius: var(--r-small);
	padding: .5rem .75rem; margin: 0 0 1rem;
}

/* ---------- Theme switcher ---------- */
.theme {
	display: flex; gap: 0; align-items: center; flex: none;
	height: 34px; margin-left: .25rem;
	background: var(--page-tint); border: 1px solid var(--line);
	border-radius: var(--r-pill); padding: 2px;
}
.theme button {
	flex: none; height: 28px; min-height: 0;
	background: none; border: 0; border-radius: var(--r-pill);
	padding: 0 .5rem; line-height: 1;
	font-size: .8125rem; font-weight: 600; color: var(--text-2);
	display: grid; place-items: center;
}
.theme button:hover { color: var(--text); }
.theme button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--card-shadow); }
.theme svg { width: 15px; height: 15px; flex: none; display: block; }

@media (min-width: 768px) {
	#board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
	.done-block { grid-column: 1 / -1; }
	.horizon { margin-bottom: 0; }
}

.tabs { display: flex; gap: 1.25rem; align-items: center; }
.tabs a { font-size: .9375rem; font-weight: 500; color: var(--text-2); }
.tabs a.on, .tabs a:hover { color: var(--text); text-decoration: none; }

.admin h1 { margin-bottom: .5rem; }
.admin h2 { font-size: 1.125rem; margin: 2.5rem 0 .75rem; }
.admin .lede { color: var(--text-2); max-width: 60ch; margin: 0 0 1.5rem; }

.scroll-x {
	overflow-x: auto; background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--r-card);
	box-shadow: var(--card-shadow);
}
.grid { width: 100%; border-collapse: collapse; font-size: .875rem; }
.grid th {
	text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .0125em;
	color: var(--text-2); padding: .75rem 1rem;
	border-bottom: 1px solid var(--line); white-space: nowrap;
}
.grid td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.grid tr:last-child td { border-bottom: 0; }
.grid .muted { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid code {
	font-family: ui-monospace, SFMono-Regular, monospace; font-size: .8125rem;
	background: var(--page-tint); border-radius: var(--r-control); padding: .125rem .375rem;
}

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

.token-card {
	background: var(--surface); border: 1px solid var(--accent);
	border-radius: var(--r-card); box-shadow: var(--card-shadow);
	padding: 1.25rem; margin-bottom: 1.5rem;
}
.token-card p { margin: 0 0 .75rem; max-width: 60ch; }
.token {
	display: block; overflow-wrap: anywhere;
	font-family: ui-monospace, SFMono-Regular, monospace; font-size: .875rem;
	background: var(--page-tint); border-radius: var(--r-small);
	padding: .75rem; margin-bottom: .75rem;
}
.copy {
	background: var(--accent); color: #fff; border: 0;
	padding: .5rem 1rem; font-size: .875rem; font-weight: 600;
}
.copy:hover { background: var(--accent-active); }
.warn { color: var(--danger); font-size: .875rem; font-weight: 500; margin: .75rem 0 0; }

.add-user { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.add-user input[type=text] {
	flex: 1; min-width: 12rem; padding: .5rem .625rem;
	background: var(--surface); color: var(--text);
	border: 1px solid var(--field-line); border-radius: var(--r-control);
}
.add-user input[type=text]:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
.add-user button {
	background: var(--accent); color: #fff; border: 0;
	padding: .5rem 1rem; font-size: .875rem; font-weight: 600;
}
.add-user button:hover { background: var(--accent-active); }
.check { display: flex; align-items: center; gap: .375rem; color: var(--text-2); font-size: .875rem; }

.connect { max-width: 52rem; }
.connect h1 { margin-bottom: .75rem; }
.connect .lede { color: var(--text-2); font-size: 1.125rem; max-width: 60ch; margin: 0 0 2.5rem; }
.section-label { font-size: 1.125rem; font-weight: 700; margin: 2.5rem 0 1rem; }
.connect ol { margin: 0; padding-left: 1.25rem; max-width: 60ch; }
.connect li { margin-bottom: .5rem; }
.connect li::marker { color: var(--text-3); font-variant-numeric: tabular-nums; }
.connect .prep { margin-bottom: 1rem; }
.connect .note { color: var(--text-2); max-width: 60ch; margin-top: 1rem; }

/* CSS-only switcher: it works before any script loads. Positioned, so the
   hidden radios stay inside it — absolute with no positioned ancestor
   anchors them to the page origin and focusing one scrolls the page. */
.switcher { display: flex; flex-wrap: wrap; gap: .375rem; position: relative; }
.tab-input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tab {
	padding: .5rem .875rem; font-size: .875rem; font-weight: 600;
	color: var(--text-2); cursor: pointer;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-pill);
}
.tab:hover { color: var(--text); border-color: var(--field-line); }
.tab-input:checked + .tab { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab-input:focus-visible + .tab { outline: 2px solid var(--focus); outline-offset: 2px; }
.panels {
	width: 100%; margin-top: 1.25rem; padding: 1.25rem;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card); box-shadow: var(--card-shadow);
}
.guide { display: none; }
#tab-claude:checked ~ .panels #guide-claude { display: block; }
#tab-chatgpt:checked ~ .panels #guide-chatgpt { display: block; }
#tab-antigravity:checked ~ .panels #guide-antigravity { display: block; }
#tab-claude-code:checked ~ .panels #guide-claude-code { display: block; }
#tab-browser:checked ~ .panels #guide-browser { display: block; }
.code {
	font-family: ui-monospace, SFMono-Regular, monospace; font-size: .8125rem; line-height: 1.6;
	background: var(--page-tint); border: 1px solid var(--line); border-radius: var(--r-small);
	padding: .875rem; overflow-x: auto; margin: 1rem 0 0; max-width: 100%;
}

.copy-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0 0 1rem; }
.copy-row .note { margin: 0; }
.paused {
	font-size: .75rem; font-weight: 600; letter-spacing: .0125em;
	color: var(--text-2); background: var(--page-tint);
	border-radius: var(--r-pill); padding: .125rem .5rem; margin-left: .5rem;
}
.row-actions { display: flex; gap: .375rem; }
.add-user select {
	padding: .5rem .625rem; background: var(--surface); color: var(--text);
	border: 1px solid var(--field-line); border-radius: var(--r-control);
}

/* The connect diagram, generated with archify and re-tokenised.
   archify paints its own surfaces; on this page the card already is the
   surface, so the lanes are left transparent and only their labels and rules
   remain. The viewBox is cropped to the drawing — the renderer sizes for a
   toolbar and legend room that this page does not use, which read as lopsided
   padding once embedded. */
.figure { width: 100%; height: auto; display: block; font-family: Inter, system-ui, sans-serif; }
.figure-wrap { margin: 0 0 2.5rem; overflow-x: auto; }
.figure { --mask: var(--surface); --bg: transparent; --panel: transparent; --panel-border: var(--line);
	--text: var(--text); --text-muted: var(--text-2); --text-dim: var(--text-3); --text-faint: var(--text-3);
	--grid: transparent; --lane-fill: transparent; --lane-stroke: var(--line);
	--arrow: var(--text-3); --arrow-emphasis: var(--accent);
	--frontend-fill: rgba(0,117,222,.08); --frontend-stroke: var(--accent);
	--backend-fill: rgba(0,117,222,.06); --backend-stroke: var(--accent);
	--database-fill: rgba(26,174,57,.10); --database-stroke: var(--done);
	--messagebus-fill: rgba(42,157,153,.12); --messagebus-stroke: #2a9d99;
	--security-fill: rgba(221,91,0,.10); --security-stroke: var(--danger);
	--cloud-fill: rgba(0,117,222,.06); --cloud-stroke: var(--accent);
	--external-fill: var(--page-tint); --external-stroke: var(--line);
}
.figure .c-grid{stroke: var(--grid); fill: none;}
.figure .c-mask{fill: var(--mask); stroke: none;}
.figure .c-frontend{fill: var(--frontend-fill);   stroke: var(--frontend-stroke);}
.figure .c-backend{fill: var(--backend-fill);    stroke: var(--backend-stroke);}
.figure .c-database{fill: var(--database-fill);   stroke: var(--database-stroke);}
.figure .c-security{fill: var(--security-fill);   stroke: var(--security-stroke);}
.figure .c-messagebus{fill: var(--messagebus-fill); stroke: var(--messagebus-stroke);}
.figure .t-primary{fill: var(--text);}
.figure .t-muted{fill: var(--text-muted);}
.figure .t-dim{fill: var(--text-dim);}
.figure .t-backend{fill: var(--backend-stroke);}
.figure .t-database{fill: var(--database-stroke);}
.figure .t-security{fill: var(--security-stroke);}
.figure .a-default{stroke: var(--arrow); fill: none;}
.figure .a-emphasis{stroke: var(--arrow-emphasis); fill: none;}
.figure .a-dashed{stroke: var(--database-stroke); fill: none; stroke-dasharray: 4,4;}
.figure .m-default{fill: var(--arrow);}
.figure .m-emphasis{fill: var(--arrow-emphasis);}
.figure .m-security{fill: var(--security-stroke);}
.figure .m-dashed{fill: var(--database-stroke);}
.figure .c-lane{fill: var(--lane-fill); stroke: var(--lane-stroke); stroke-dasharray: 6,6;}
/* Dark: the light tints were nearly invisible on a warm dark card — a node
   read as an outline floating on nothing. The fills carry more of the colour
   here and the rules are lifted, which is the same trade the rest of the app
   makes between the two themes. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .figure { 		--lane-stroke: rgba(255,255,255,.16);
		--arrow: rgba(255,255,255,.45);
		--frontend-fill: rgba(98,174,240,.18); --frontend-stroke: #62aef0;
		--backend-fill: rgba(98,174,240,.14); --backend-stroke: #62aef0;
		--database-fill: rgba(60,200,95,.18); --database-stroke: #57cc74;
		--messagebus-fill: rgba(70,200,195,.18); --messagebus-stroke: #4fc9c4;
		--security-fill: rgba(240,140,70,.18); --security-stroke: #f0995e;
		--external-fill: rgba(255,255,255,.06); --external-stroke: rgba(255,255,255,.18);
	 }
}
:root[data-theme="dark"] .figure { 		--lane-stroke: rgba(255,255,255,.16);
		--arrow: rgba(255,255,255,.45);
		--frontend-fill: rgba(98,174,240,.18); --frontend-stroke: #62aef0;
		--backend-fill: rgba(98,174,240,.14); --backend-stroke: #62aef0;
		--database-fill: rgba(60,200,95,.18); --database-stroke: #57cc74;
		--messagebus-fill: rgba(70,200,195,.18); --messagebus-stroke: #4fc9c4;
		--security-fill: rgba(240,140,70,.18); --security-stroke: #f0995e;
		--external-fill: rgba(255,255,255,.06); --external-stroke: rgba(255,255,255,.18);
	 }