/* Hosted dashboard chrome. Linked after site.css so these rules win.
   In the dashboard, a control that navigates is a link: green text, an underline
   on hover and focus, an optional arrow, and a 44px hit area. A control that
   acts is a button. A badge only labels. Marketing pages, and the signed-out
   header Dashboard link, may use a.button as the primary call to action. */

body.shell {
	width: auto;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

body.shell main:has(.dashboard),
body.shell main:has(.agent-page),
body.shell main:has(.settings),
body.shell main:has(.setup) {
	width: min(var(--max), 100%);
	max-width: var(--max);
	margin-inline: auto;
}

body.shell .setup {
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

body.shell main p.page-sub {
	margin: -0.5rem 0 1.25rem;
	color: var(--muted);
	font-size: 1rem;
}

body.shell:has(.settings) footer {
	margin-top: 2rem;
}

.settings section {
	margin: 0 0 1.25rem;
}

body.shell .settings-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
}
body.shell main.app-frame .settings-cards > section {
	margin: 0;
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--green-dim);
	border-radius: var(--radius-control);
	background: var(--surface);
	box-sizing: border-box;
}
body.shell main.app-frame .settings-cards .account-email {
	min-width: 0;
	overflow-wrap: anywhere;
}
body.shell main.app-frame .settings-cards > section > h2,
body.shell main.app-frame .chooser > section > h2 {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font: 600 18px/1.3 var(--mono);
}
body.shell main.app-frame .chooser > section {
	margin: 0;
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--green-dim);
	border-radius: var(--radius-control);
	background: var(--surface);
	box-sizing: border-box;
}

header.app-header {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	display: block;
	margin: 0;
	padding: 0;
	height: var(--header-height);
	background: var(--header-bar);
	backdrop-filter: blur(10px);
	position: sticky;
	top: 0;
	z-index: 30;
}

header.app-header .account-menu button.sign-out {
	background: transparent;
	color: var(--text);
	border: 1px solid var(--control-border);
	border-radius: var(--radius-control);
	padding: 0.4rem 0.75rem;
	min-height: 44px;
	font-weight: 600;
	cursor: pointer;
}

.name-note:empty {
	display: none;
}

.name-note {
	display: block;
	margin: 0.75rem 0 0;
	color: var(--danger-line);
	font-size: 0.9rem;
}

.name-note[data-tone="hint"] {
	color: var(--muted);
}

.name-note:empty {
	display: none;
	margin: 0;
}

.name-block .host-preview {
	display: block;
	margin-top: 0.75rem;
}

.name-block .host-preview[hidden] {
	display: none;
}

body.shell .device-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

body.shell .setup .choice-example {
	display: block;
	min-height: 1.4em;
}

body.shell .sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body.shell a.sr:focus,
body.shell a.sr:focus-visible {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 80;
	width: auto;
	height: auto;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 12px 16px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	background: #0e150f;
	color: var(--text);
	border: 1px solid var(--line-2);
	border-radius: 8px;
	font: 600 15px/1.2 var(--sans);
	text-decoration: none;
	outline: 2px solid var(--green);
	outline-offset: 3px;
}

/* The staging banner uses the same dark ring as the public site. */
body.shell p.preprod a:focus-visible {
	outline: 2px solid #1a1203;
	outline-offset: 3px;
}

body.shell .access li[hidden],
body.shell [data-zone-line][hidden] {
	display: none;
}

body.shell .remove-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

body.shell main.app-frame {
	width: min(var(--max), 100%);
	max-width: var(--max);
	margin-inline: auto;
	padding: var(--space-6) 28px 0;
	scroll-margin-top: var(--header-height);
}

/* The page column matches the navbar. Prose and forms stay a readable measure inside it. */
body.shell main.app-frame p {
	max-width: 75ch;
}
body.shell main.app-frame :is(.field-value, .page-feedback, .field-help, .card-sub, .card-address, .token-actions, .token-value) {
	max-width: none;
}
body.shell .setup :is(ul, ol) {
	max-width: 75ch;
}
body.shell .settings,
body.shell .chooser,
body.shell .device,
body.shell .dashboard,
body.shell .setup,
body.shell .setup form {
	width: 100%;
	max-width: none;
}
body.shell .chooser input,
body.shell .settings input,
body.shell .device input,
body.shell .setup form :is(input, select, textarea):not([type="hidden"]):not([type="radio"]):not([type="checkbox"]) {
	max-width: 45rem;
}

body.shell main.app-frame section {
	padding: 0;
	border-top: 0;
}

body.shell main.app-frame section.danger-zone {
	margin-top: 24px;
	padding: 16px 20px;
	border: 1px solid rgba(248, 113, 113, 0.6);
	border-radius: var(--radius-control);
}

body.shell main.app-frame h2 {
	font: 700 1.25rem/1.3 var(--mono, ui-monospace, monospace);
	margin: 1.25rem 0 0.5rem;
	letter-spacing: -0.02em;
}

body.shell .agent-card,
body.shell .empty-card,
body.shell .setup .choice {
	background: var(--surface);
	color: var(--text);
	border-color: var(--line-2);
}
body.shell .agent-card,
body.shell .empty-card {
	border-color: var(--green-dim);
}
body.shell .setup .choice {
	border-color: var(--control-border);
}

body.shell .agent-card p,
body.shell .empty-card p,
body.shell .setup .choice-detail,
body.shell .setup .choice-hint,
body.shell .setup .choice-example,
body.shell .usage,
body.shell main p.page-sub {
	color: var(--text-soft);
}
body.shell .setup .step-progress .choice-hint {
	color: var(--muted);
}
body.shell [data-hosted-progress] {
	box-sizing: border-box;
	min-height: 42px;
	margin-top: 0;
	margin-bottom: 0;
}

body.shell .agent-card a,
body.shell .empty-card a {
	color: var(--link);
}

body.shell a.button.primary,
body.shell .chooser button.button.primary,
body.shell .empty-card button.button.primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	min-height: 44px;
	background: var(--accent);
	color: var(--ink);
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	padding: 0.6rem 1.1rem;
	font: 600 15px/1 var(--sans);
	font-synthesis: none;
	text-decoration: none;
}

body.shell button.danger {
	background: transparent;
	color: var(--danger-line);
	border: 1px solid var(--danger-line);
	border-radius: var(--radius-control);
	height: 44px;
	min-height: 44px;
	font-family: var(--sans);
	font-weight: 600;
	font-synthesis: none;
}
body.shell button.danger.fill {
	background: var(--danger-fill);
	color: var(--on-danger);
	border: 1px solid var(--danger-line);
}

body.shell button.secondary,
body.shell a.secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 var(--space-4);
	border: 1px solid var(--control-border);
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--text);
	font: 500 15px/1 var(--sans);
	font-synthesis: none;
	text-decoration: none;
	cursor: pointer;
}

body.shell button.button.primary:disabled:not([aria-busy="true"]),
body.shell button.danger:disabled:not([aria-busy="true"]),
body.shell button.secondary:disabled:not([aria-busy="true"]),
body.shell button.button:disabled:not([aria-busy="true"]),
body.shell button.primary:disabled:not([aria-busy="true"]) {
	cursor: not-allowed;
	opacity: .45;
}
body.shell #account-signin button.button.primary:disabled:not([aria-busy="true"]) {
	opacity: 1;
	background: var(--surface);
	color: var(--muted);
	-webkit-text-fill-color: var(--muted);
	border: 1px dashed var(--line-2);
	cursor: not-allowed;
}

body.shell button.danger.fill:disabled:not([aria-busy="true"]) {
	background: var(--danger-fill);
	color: var(--on-danger);
	-webkit-text-fill-color: var(--on-danger);
	border: 1px solid var(--danger-line);
	opacity: .45;
	cursor: not-allowed;
}

body.shell .settings-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

body.shell .settings-actions form {
	margin: 0;
}

body.shell button[aria-busy="true"],
body.shell button[aria-busy="true"]:disabled,
body.shell button[aria-busy="true"]:hover {
	opacity: 1;
	cursor: progress;
	pointer-events: none;
	filter: none;
	white-space: nowrap;
}

body.shell button.quiet,
body.shell summary.quiet {
	background: transparent;
	color: var(--text-soft);
	border: 0;
	padding: 0.35rem 0;
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
body.shell .agent-card button.quiet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 0 8px;
}

body.shell .forget {
	margin-top: 0.75rem;
}

body.shell .danger-zone button.quiet,
body.shell .danger-zone summary.quiet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 0.75rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--control-border);
	border-radius: var(--radius-control);
	background: var(--surface);
	text-decoration: none;
}

body.shell .setup-plan {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
}

body.shell .setup-plan li {
	margin: 0.35rem 0;
}

body.shell header.app-header .nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: var(--space-2);
	height: calc(var(--header-height) - 1px);
	min-block-size: 0;
	padding-top: 0;
	padding-bottom: 0;
}

body.shell header.app-header nav.app-nav {
	flex: 1 1 auto;
	position: static;
	min-width: 0;
	justify-content: flex-end;
}

body.shell header.app-header .nav-menu {
	width: auto;
	margin: 0;
	position: relative;
	display: none;
}

body.shell header.app-header .account-menu > div {
	right: 0;
	left: auto;
	max-width: calc(100vw - 1rem);
	background: var(--bg-2);
	color: var(--text);
}

body.shell header.app-header .account-menu button.sign-out {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	min-height: 44px;
	margin-top: var(--space-2);
	background: transparent;
	color: var(--text);
	border: 1px solid var(--control-border);
	border-radius: var(--radius-control);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
body.shell header.app-header .nav > noscript button.sign-out {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	min-width: var(--control-height-touch);
	height: var(--control-height-touch);
	min-height: var(--control-height-touch);
	margin: 0;
	padding: 0 var(--space-4);
	background: transparent;
	color: var(--text);
	border: 1px solid var(--control-border);
	border-radius: var(--radius-control);
	font: 600 15px/1 var(--sans);
	cursor: pointer;
}

@media (max-width: 640px) {
	header.app-header {
		height: var(--header-height);
		min-height: var(--header-height);
		max-height: var(--header-height);
		padding: 0;
	}

	header.app-header .nav {
		flex-wrap: nowrap;
		height: calc(var(--header-height) - 1px);
		min-height: 0;
		max-height: calc(var(--header-height) - 1px);
	}

	header.app-header .nav-menu {
		display: block;
		width: auto;
	}

	body.shell main,
	body.shell main.app-frame {
		width: 100%;
		max-width: 100%;
		padding-left: var(--space-5);
		padding-right: var(--space-5);
	}

	header.app-header .nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: auto;
		min-width: 44px;
		height: 44px;
		padding: 0 12px;
		border: 0;
		border-radius: var(--radius-control);
		background: transparent;
		color: var(--text);
		font: 500 15px/1 var(--sans);
		list-style: none;
	}

	header.app-header .account-button {
		width: 44px;
		height: 44px;
		min-width: 44px;
		padding: 0;
	}

	header.app-header .nav-menu,
	header.app-header .account-menu {
		position: relative;
	}

	header.app-header .app-nav {
		display: none;
	}

	header.app-header .nav-menu[open] ~ .app-nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: absolute;
		top: var(--header-height);
		left: 0;
		right: 0;
		width: 100%;
		z-index: 40;
		background: var(--bg);
		border-bottom: 1px solid var(--line-2);
		padding: var(--space-2) 20px var(--space-3);
	}

	header.app-header .account-menu > div {
		top: calc(100% + var(--space-1));
		width: min(16rem, calc(100vw - 40px));
	}

	body.shell button.button.primary,
	body.shell summary.button.primary,
	body.shell a.button.primary,
	body.shell a.button,
	body.shell button.button,
	body.shell button.secondary,
	body.shell a.secondary,
	body.shell button.danger,
	body.shell summary.danger {
		height: var(--control-height-touch);
		min-height: var(--control-height-touch);
	}
}

body.shell {
	caret-color: var(--accent);
}
body.shell ::selection {
	background: var(--badge-green);
	color: var(--text);
}

body.shell header.app-header .brand {
	min-width: 0;
	flex: none;
	color: var(--accent);
	font: 700 18px/1 var(--mono);
	gap: 10px;
}
body.shell header.app-header .brand img {
	width: 30px;
	height: 30px;
	flex: none;
}
body.shell header.app-header .brand-name {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	overflow: visible;
	text-overflow: clip;
	white-space: nowrap;
}
body.shell header.app-header .app-nav {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}
body.shell header.app-header .app-nav a {
	display: inline-flex;
	align-items: center;
	width: auto;
	min-height: 44px;
	padding: 0 var(--space-3);
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--link);
	font: 500 15px/1.2 var(--sans);
	font-synthesis: none;
	text-decoration: none;
}
/* The count sits beside its label. An absent badge leaves no empty gap. */
body.shell header.app-header .nav-toggle {
	width: auto;
	min-width: 44px;
	padding: 0 12px;
}
body.shell header.app-header .nav-menu[open] > .nav-toggle .nav-count {
	display: none;
}
body.shell header.app-header .app-nav a:hover,
body.shell header.app-header .app-nav a:focus-visible {
	background: transparent;
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
body.shell header.app-header .app-nav a[aria-current="page"] {
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
body.shell header.app-header .app-nav a[aria-current="page"]:hover,
body.shell header.app-header .app-nav a[aria-current="page"]:focus-visible {
	background: var(--hover-wash);
	color: var(--text);
}
body.shell header.app-header .app-nav a.button.primary {
	height: var(--control-height-touch);
	min-height: var(--control-height-touch);
	padding: 0 var(--space-4);
	background: var(--accent);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}
body.shell header.app-header .app-nav a.button.primary:hover,
body.shell header.app-header .app-nav a.button.primary:focus-visible {
	background: var(--link);
	color: var(--ink);
	text-decoration: none;
	filter: none;
}
body.shell header.app-header .account-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-avatar);
	background: transparent;
	color: inherit;
}
body.shell header.app-header .account-button:hover,
body.shell header.app-header .account-button:focus-visible,
body.shell header.app-header .nav-toggle:hover,
body.shell header.app-header .nav-toggle:focus-visible {
	background: var(--hover-wash);
}
body.shell header.app-header .photo {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-avatar);
}
body.shell header.app-header .account-menu > div a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--link);
	font: 500 15px/1.2 var(--sans);
	text-decoration: none;
}
body.shell header.app-header .account-menu > div a:hover,
body.shell header.app-header .account-menu > div a:focus-visible {
	text-decoration: underline;
}

body.shell a:not(.button):not(.brand) {
	color: var(--link);
}
body.shell main p a:not(.button),
body.shell main li a:not(.button),
body.shell .legal a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
body.shell .agent-card h2 a,
body.shell .card-actions a,
body.shell .agent-card > p > a,
body.shell footer a,
body.shell header.app-header .app-nav a:not(.button) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
body.shell .agent-card h2 a:hover,
body.shell .card-actions a:hover,
body.shell .agent-card > p > a:hover,
body.shell footer a:hover,
body.shell .agent-card h2 a:focus-visible,
body.shell .card-actions a:focus-visible,
body.shell footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

body.shell button,
body.shell summary.button.primary,
body.shell summary.danger {
	font-family: var(--sans);
	font-synthesis: none;
}
body.shell button.button.primary,
body.shell summary.button.primary,
body.shell a.button,
body.shell button.button,
body.shell summary.button {
	height: 44px;
	min-height: 44px;
	padding: 0 var(--space-4);
	border-radius: var(--radius-control);
	font: 600 15px/1 var(--sans);
	font-synthesis: none;
	text-decoration: none;
}
body.shell button.danger,
body.shell .peers .actions button.button.primary,
body.shell .device-actions button.button {
	height: 44px;
	min-height: 44px;
}
body.shell a.button.primary,
body.shell button.button.primary,
body.shell summary.button.primary {
	background: var(--accent);
	color: var(--ink);
	border: 1px solid transparent;
}
body.shell button.button.primary:hover:not(:disabled):not([aria-disabled="true"]),
body.shell summary.button.primary:hover:not([aria-disabled="true"]),
body.shell a.button.primary:hover {
	background: var(--link);
	color: var(--ink);
	filter: none;
}
body.shell .providers {
	align-items: stretch;
}
body.shell button.provider {
	box-sizing: border-box;
	height: 44px;
	min-height: 44px;
}
body.shell button.provider.provider-github {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	min-height: 44px;
	padding: 0 24px;
	border-radius: var(--radius-control);
	background: var(--accent);
	color: var(--ink);
	border: 1px solid transparent;
	font: 600 15px/1 var(--sans);
}
body.shell button.provider.provider-github:hover:not(:disabled):not([aria-disabled="true"]) {
	background: var(--link);
	color: var(--ink);
}
body.shell button.provider.provider-github:disabled,
body.shell button.provider.provider-github[aria-disabled="true"],
body.shell button.provider.provider-github[aria-busy="true"] {
	background: var(--accent);
	color: var(--ink);
	border-color: transparent;
}
body.shell button.secondary:hover,
body.shell a.secondary:hover,
body.shell button.copy:hover,
body.shell button.copy-token:hover {
	background: var(--hover-wash);
	border-color: var(--control-border-hover);
	color: var(--text);
	filter: none;
}
body.shell button.danger:hover,
body.shell summary.danger:hover,
body.shell button.button.danger:hover {
	background: rgba(248, 113, 113, 0.12);
	border-color: var(--danger-hover);
	color: var(--danger-hover);
	filter: none;
}
body.shell button.button.primary:active,
body.shell summary.button.primary:active,
body.shell a.button.primary:active,
body.shell a.button:active,
body.shell button.button:active,
body.shell button.secondary:active,
body.shell a.secondary:active,
body.shell button.danger:active,
body.shell summary.danger:active {
	filter: brightness(0.92);
	transform: translateY(1px);
}
body.shell .wake button.secondary {
	background: transparent;
	color: var(--text);
	border: 1px solid var(--control-border);
	font-weight: 500;
}
body.shell summary.danger,
body.shell button.danger {
	background: transparent;
	color: var(--danger-line);
	border: 1px solid var(--danger-line);
}
body.shell button.danger.fill,
body.shell button.danger.filled {
	background: var(--danger-fill);
	color: var(--on-danger);
	border: 1px solid var(--danger-line);
}
body.shell button.danger.fill:hover,
body.shell button.danger.filled:hover {
	filter: none;
	background: var(--danger-fill-hover);
	color: var(--on-danger);
	border-color: var(--danger-line);
}
body.shell button.copy,
body.shell .token .copy-token,
body.shell .overview .token .copy-token,
body.shell .records .token .copy-token {
	width: 9.25rem;
	min-width: 9.25rem;
	flex: none;
	justify-content: center;
	gap: var(--space-2);
	background: transparent;
	color: var(--text);
	border: 1px solid var(--control-border);
	font-weight: 500;
}
body.shell .token .copy-token,
body.shell .overview .token .copy-token,
body.shell .records .token .copy-token,
body.shell .token .hide-token {
	height: 44px;
	min-height: 44px;
}
body.shell .token .hide-token {
	width: auto;
	min-width: 0;
	flex: none;
	white-space: nowrap;
}
/* The Copy control sits on the same line. Selecting it adds line breaks after the token. */
body.shell .token .token-actions {
	user-select: none;
}
body.shell .token .token-value {
	box-sizing: border-box;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 1.45em;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: normal;
	user-select: text;
	font: 500 15px/1.45 var(--mono);
	color: var(--text);
}
body.shell .field-token {
	white-space: nowrap;
}
body.shell .field-keep {
	white-space: nowrap;
}
body.shell button.copy[data-state="copied"],
body.shell .copy-token[data-state="copied"] {
	color: var(--link);
	border-color: var(--link);
}
body.shell button.copy[data-state="failed"],
body.shell .copy-token[data-state="failed"] {
	color: var(--danger-line);
	border-color: var(--danger-line);
}
body.shell button.copy .icon,
body.shell .copy-token .icon {
	flex: none;
}
body.shell .danger-zone > summary.danger {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #f87171;
	font: 700 16px/1.35 var(--mono);
	list-style: none;
	cursor: pointer;
}
body.shell .danger-zone > summary.danger::-webkit-details-marker,
body.shell .danger-zone > summary.danger::marker { content: ""; display: none; }
body.shell details.advanced-names > summary,
body.shell details.restart > summary,
body.shell details.forget > summary,
body.shell details.log-fold > summary {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	margin: 0.75rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--text);
	font: 600 15px/1.3 var(--sans);
	list-style: none;
	cursor: pointer;
}
body.shell details.advanced-names > summary::-webkit-details-marker,
body.shell details.restart > summary::-webkit-details-marker,
body.shell details.forget > summary::-webkit-details-marker,
body.shell details.log-fold > summary::-webkit-details-marker,
body.shell details.advanced-names > summary::marker,
body.shell details.restart > summary::marker,
body.shell details.forget > summary::marker,
body.shell details.log-fold > summary::marker {
	content: "";
	display: none;
}
body.shell #log.records {
	min-width: 0;
}
body.shell table.log-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin-top: var(--space-3);
	font: 15px/1.45 var(--sans);
}
body.shell table.log-table th,
body.shell table.log-table td {
	min-width: 0;
	padding: var(--space-2) var(--space-3) var(--space-2) 0;
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}
body.shell table.log-table th {
	color: var(--muted);
	font: 600 13px/1.3 var(--sans);
	white-space: nowrap;
	overflow-wrap: normal;
}
/* Wide enough for a previous year, for example "30 Sep 2025, 23:59". */
body.shell table.log-table th:nth-child(1) { width: 12rem; }
body.shell table.log-table th:nth-child(2) { width: 6rem; }
body.shell table.log-table th:nth-child(3) { width: 12.5rem; }
body.shell table.log-table th:nth-child(4) { width: 100%; }
body.shell table.log-table td.log-time,
body.shell table.log-table td.log-time time,
body.shell table.log-table td.log-dir {
	white-space: nowrap;
	overflow-wrap: normal;
}
body.shell table.log-table td.log-peer span {
	display: block;
	min-width: 0;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}
/* The full name is in the page. The short form is what the wide table shows. */
body.shell table.log-table td.log-peer .log-peer-full {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
body.shell table.log-table td.log-message {
	min-width: 0;
	max-width: 100%;
	white-space: pre-line;
}
body.shell .log-untrusted {
	display: inline;
	max-width: 100%;
	margin: 0 var(--space-2) 0 0;
	padding: 0 var(--space-2);
	border-radius: var(--radius-badge);
	background: color-mix(in srgb, var(--amber) 18%, transparent);
	color: var(--amber);
	font: 600 12px/1.4 var(--sans);
	white-space: normal;
	overflow-wrap: break-word;
	vertical-align: baseline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
/* The fixed time, direction, and peer columns leave the message too narrow for the badge until 900px. */
@media (max-width: 900px) {
	body.shell table.log-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	body.shell table.log-table,
	body.shell table.log-table tbody {
		display: block;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}
	body.shell table.log-table tr {
		display: grid;
		/* Longest clock with a year, for example "30 Sep 2025, 23:59". */
		grid-template-columns: 9.5rem minmax(0, 1fr);
		grid-template-areas:
			"time dir"
			"peer peer"
			"msg msg";
		column-gap: var(--space-3);
		row-gap: var(--space-2);
		align-items: baseline;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin: 0 0 var(--space-3);
		padding: var(--space-3);
		overflow: visible;
		border: 1px solid var(--line-2);
		border-radius: var(--radius-control);
		background: var(--bg-2);
	}
	body.shell table.log-table td {
		display: block;
		width: auto;
		min-width: 0;
		max-width: 100%;
		padding: 0;
		border: 0;
		color: var(--text);
		font: inherit;
	}
	body.shell table.log-table td.log-time { grid-area: time; }
	body.shell table.log-table td.log-dir { grid-area: dir; }
	body.shell table.log-table td.log-peer {
		grid-area: peer;
		max-width: 100%;
	}
	body.shell table.log-table td.log-message { grid-area: msg; }
	body.shell table.log-table td.log-peer .log-peer-full {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
		overflow-wrap: anywhere;
	}
	body.shell table.log-table td.log-peer .log-peer-short { display: none; }
	body.shell table.log-table td::before {
		content: attr(data-label);
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}
body.shell .agent-card button.button.secondary {
	min-width: 44px;
	min-height: 44px;
}
body.shell summary .chevron {
	display: inline-block;
	flex: none;
	width: 0.45em;
	height: 0.45em;
	margin-right: 0.65em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.12em) rotate(-45deg);
}
body.shell details[open] > summary .chevron {
	transform: translateY(0.08em) rotate(45deg);
}
body.shell .danger-zone {
	border-color: rgba(248, 113, 113, 0.6);
}
body.shell .danger-zone > h2,
body.shell .advanced .danger-zone > h3,
body.shell .danger-zone > h3 {
	color: #f87171;
	border: 0;
	margin-top: 0;
}
/* The sticky header and the wrapped agent tabs cover about 148px. */
body.shell #danger-zone {
	scroll-margin-top: 10rem;
}
@media (max-width: 920px) {
	body.shell header.app-header .nav-menu { display: block; }
	body.shell header.app-header .nav-toggle { display: inline-flex; }
	body.shell header.app-header .app-nav { display: none; }
	body.shell header.app-header .nav-menu[open] ~ .app-nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	body.shell header.app-header .nav-menu[open] ~ .app-nav a {
		width: 100%;
	}
	body.shell header.app-header .nav-menu[open] ~ .app-nav a.button.primary {
		height: 44px;
		min-height: 44px;
	}
	body.shell header.app-header .nav { flex-wrap: nowrap; gap: 4px; height: calc(var(--header-height) - 1px); min-height: 0; max-height: calc(var(--header-height) - 1px); }
	body.shell header.app-header .nav-menu,
	body.shell header.app-header .account-menu { flex: none; }
	body.shell header.app-header .nav > noscript { position: absolute; top: 100%; left: 12px; flex: none; width: auto; min-width: 0; }
	body.shell header.app-header .nav > noscript form,
	body.shell header.app-header .nav > noscript p { margin: 0; }
	body.shell header.app-header .nav > noscript button.sign-out { width: auto; max-width: 100%; }
	body.shell header.app-header .brand { font-size: 16px; flex: none; overflow: visible; }
	body.shell header.app-header .brand-name { overflow: visible; text-overflow: clip; }
	body.shell header.app-header .brand img { width: 26px; height: 26px; }
}
@media (max-width: 360px) {
	body.shell header.app-header .wrap { padding-left: 12px; padding-right: 12px; }
	body.shell header.app-header .nav { gap: 0; }
	body.shell header.app-header .nav-toggle { padding-left: 0; padding-right: 1.25rem; }
	body.shell header.app-header .brand { gap: 4px; margin-right: 14px; font-size: 12px; }
	body.shell header.app-header .brand img { width: 18px; height: 18px; }
}
@media (min-width: 921px) {
	body.shell header.app-header .nav-toggle { display: none; }
	body.shell header.app-header .nav-menu { display: none; }
	body.shell header.app-header .app-nav { display: flex; }
	body.shell header.app-header .brand { flex: none; }
	body.shell header.app-header .brand-name { overflow: visible; }
}
@media (max-width: 640px) {
	body.shell button.button.primary,
	body.shell summary.button.primary,
	body.shell a.button.primary,
	body.shell a.button,
	body.shell button.button,
	body.shell button.primary,
	body.shell a.primary,
	body.shell summary.primary,
	body.shell button.secondary,
	body.shell a.secondary,
	body.shell button.copy,
	body.shell .copy-token,
	body.shell button.danger,
	body.shell summary.danger,
	body.shell .wake button,
	body.shell header.app-header .app-nav a.button,
	body.shell .chooser button.button.primary,
	body.shell .empty-card button.button.primary {
		height: var(--control-height-touch);
		min-height: var(--control-height-touch);
	}
	body.shell header.app-header .nav-menu[open] ~ .app-nav {
		padding-left: 20px;
		padding-right: 20px;
	}
	body.shell header.app-header .nav-menu[open] ~ .app-nav a:not(.button) {
		padding-left: 0;
		padding-right: 0;
	}
	body.shell header.app-header .nav-toggle {
		width: auto;
		min-width: 44px;
		padding: 0 12px;
	}
	@media (max-width: 360px) {
		body.shell header.app-header .nav-toggle { padding-left: 0; padding-right: 1.25rem; }
	}
	body.shell main p a:not([class]),
	body.shell main dd a:not([class]),
	body.shell .overview dd a,
	body.shell .agent-page > p a {
		display: inline-block;
		box-sizing: border-box;
		min-height: 44px;
		padding: 10px 0;
		margin: -10px 0;
	}
	body.shell header.app-header .brand {
		box-sizing: border-box;
		min-height: 44px;
		padding-top: 9px;
		padding-bottom: 9px;
	}
	body.shell .foot a,
	body.shell footer a,
	body.shell .crumbs a {
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
		min-width: 44px;
		min-height: 44px;
		margin: 0 -8px;
		padding: 10px 8px;
		font-size: 12.5px;
	}
	body.shell .usage a {
		display: inline-block;
		box-sizing: border-box;
		min-height: 44px;
		margin: -12px -11px;
		padding: 12px 11px;
	}
	body.shell ul.counts .count-value {
		font-size: 20px;
		white-space: nowrap;
	}
	body.shell .foot {
		justify-content: flex-start;
		gap: 0 6px;
	}
	body.shell .foot nav,
	body.shell .foot ul {
		display: contents;
	}
	body.shell .setup .choice {
		box-sizing: border-box;
		min-height: 44px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
	body.shell .agent-card,
	body.shell .empty-card { padding: 16px; }
	body.shell main.app-frame .glance,
	body.shell main.app-frame .overview ul.counts { grid-template-columns: minmax(0, 1fr); }
	body.shell .wake .wake-grid { grid-template-columns: 1fr; }
	body.shell .wake .wake-field.span-2 { grid-column: auto; }
	body.shell .wake .wake-actions { flex-direction: column; align-items: stretch; }
	body.shell .copy-row .copy-field > button.copy.copy-icon {
		position: absolute;
		top: var(--space-2);
		right: var(--space-2);
		width: var(--control-height-touch);
		min-width: var(--control-height-touch);
		max-width: var(--control-height-touch);
		height: var(--control-height-touch);
		padding: 0;
	}
	body.shell .copy-row a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	body.shell main .agent-page .agent-title > h1 {
		flex: 1 0 100%;
		width: 100%;
	}
	body.shell .host-domain {
		white-space: nowrap;
		overflow-wrap: normal;
		max-width: 100%;
	}
	body.shell .host-domain[data-wrap="1"] {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}
@media (max-width: 360px) {
	body.shell .host-domain,
	body.shell .field-keep,
	body.shell .field-token,
	body.shell main code,
	body.shell .field-row pre.field-value,
	body.shell .field-row pre.field-value code {
		white-space: normal;
		overflow-wrap: anywhere;
	}
	body.shell .field-row pre.field-value {
		white-space: pre-wrap;
	}
}
body.shell .badge {
	border: 0;
	border-radius: var(--radius-badge);
	margin: 0;
	font: 500 13px/1.3 var(--sans);
}
body.shell .badge.tag,
body.shell .badge.where {
	background: var(--line);
	color: var(--tag-text);
	border: 0;
	border-radius: var(--radius-badge);
	margin: 0;
	padding: 2px 8px;
	font: 500 13px/1.3 var(--sans);
}
body.shell .badge.state-bad { color: var(--danger-hover); }
body.shell a.text-link,
body.shell a.danger-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	box-sizing: border-box;
	min-height: 44px;
	color: var(--link);
	font: 500 15px/1.2 var(--sans);
	text-decoration: none;
}
body.shell a.danger-link:not(.button),
body.shell main p a.danger-link:not(.button) { color: var(--danger-line); }
body.shell a.text-link:hover,
body.shell a.text-link:focus-visible,
body.shell a.danger-link:hover,
body.shell a.danger-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
body.shell a.text-link .suffix { text-decoration: none; }
body.shell .setup a .suffix,
body.shell .confirm a .suffix {
	margin-left: 0.35em;
	text-decoration: none;
}
body.shell a.cancel,
body.shell button.cancel,
body.shell .confirm > form > a,
body.shell .confirm a:not(.button) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--link);
	font: 500 15px/1.2 var(--sans);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
body.shell .peers .confirm,
body.shell .records .confirm,
body.shell .overview .confirm,
body.shell .agent-page .danger-zone > .confirm,
body.shell #rotate-confirm {
	box-sizing: border-box;
	margin: var(--space-4) 0;
	padding: var(--space-4) var(--space-5);
	background: var(--bg-2);
	color: var(--text);
	border: 1px solid var(--control-border);
	border-radius: var(--radius-control);
}
body.shell .confirm > p,
body.shell .confirm form > p {
	margin: 0;
}
body.shell .confirm > p + form,
body.shell .confirm form > p + p,
body.shell .confirm .confirm-actions {
	margin-top: var(--space-3);
}
body.shell .confirm .confirm-actions,
body.shell .remove-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: 0;
}
body.shell .confirm .confirm-actions .button,
body.shell .remove-actions .button {
	width: auto;
	max-width: 100%;
	margin: 0;
}
body.shell .confirm a.cancel,
body.shell .remove-actions a.cancel {
	box-sizing: border-box;
	justify-content: flex-start;
	min-width: var(--control-height-touch);
	min-height: var(--control-height-touch);
	padding: 0;
	margin: 0;
}
body.shell .setup a[target="_blank"],
body.shell .confirm a[target="_blank"]:not(.button) {
	display: inline;
	padding-block: 13px;
	text-decoration: none;
}
body.shell .setup a[target="_blank"] .label,
body.shell .confirm a[target="_blank"]:not(.button) .label {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
body.shell button.sign-out {
	border-color: var(--control-border);
}
@media (prefers-reduced-motion: reduce) {
	body.shell button:active,
	body.shell a.button:active,
	body.shell summary.button.primary:active {
		transform: none;
	}
}

body.shell main.app-frame :is(.overview, .peers, .records, .wake, .advanced) > h2 {
	margin: 48px 0 12px;
	padding-top: 16px;
	border-top: 1px solid var(--green-dim);
	color: #f2f7f3;
	font: 700 20px/1.3 var(--mono);
	letter-spacing: -0.02em;
}
body.shell main.app-frame .agent-page .overview > h2 {
	margin-top: 16px;
	padding-top: 0;
	border-top: 0;
}
body.shell main.app-frame :is(.overview, .peers, .records, .advanced) h3 {
	margin: 24px 0 8px;
	font: 700 16px/1.35 var(--mono);
}
body.shell main.app-frame .ready-steps h3 {
	margin-top: 0;
}
body.shell .agent-head {
	position: static;
	background: none;
	backdrop-filter: none;
	border: 0;
	z-index: auto;
}
body.shell main .agent-page h1 {
	flex: 1 1 12rem;
	min-width: 0;
	margin: 0;
	font: 700 28px/1.2 var(--mono);
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}
body.shell .agent-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	min-width: 0;
}
body.shell main .agent-card h2 {
	margin: 0;
	padding: 0;
	border: 0;
	font: 600 18px/1.3 var(--mono);
}
body.shell .agent-card h2 a {
	display: block;
	min-height: 44px;
	color: var(--text);
	line-height: 1.25;
	overflow: visible;
	white-space: normal;
	text-decoration: none;
}
body.shell .agent-card h2 a:hover,
body.shell .agent-card h2 a:focus,
body.shell .agent-card h2 a:focus-visible,
body.shell .agent-card .card-line > a.text-link:hover,
body.shell .agent-card .card-line > a.text-link:focus,
body.shell .agent-card .card-line > a.text-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
body.shell .agent-card h2 a:hover .host-name,
body.shell .agent-card h2 a:focus .host-name,
body.shell .agent-card h2 a:focus-visible .host-name {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
body.shell .host-name {
	display: block;
	color: inherit;
	overflow-wrap: anywhere;
}
body.shell .host-domain {
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-size: 0.72em;
	font-weight: 500;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}
@media (max-width: 641px) {
	body.shell .agent-card .card-line { flex-wrap: wrap; }
	body.shell .agent-card .card-line h2 { flex: 1 1 100%; overflow: visible; }
	body.shell main .agent-card h2 a {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
		overflow-wrap: anywhere;
		line-height: 1.35;
		min-height: 44px;
		padding: 8px 0;
	}
	body.shell .agent-card .card-line > a.text-link { flex: 1 1 100%; }
	body.shell .agent-card .card-sub { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; }
	body.shell .agent-card [data-waiting] { display: inline-flex; flex: 1 0 100%; align-items: center; gap: 8px; min-height: 32px; }
	body.shell .agent-card .card-address,
	body.shell .copy-v {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
		overflow-wrap: normal;
		word-break: normal;
	}
	body.shell .copy-row {
		display: grid;
		grid-template-columns: 3.25rem minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 8px;
	}
}
body.shell .agent-card .card-sub,
body.shell .agent-card .card-address,
body.shell .dashboard .usage {
	color: var(--muted);
}
body.shell .field-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
	min-width: 0;
}
body.shell .field-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
body.shell .field-row .field-label {
	flex: 0 0 6.5rem;
	width: 6.5rem;
	margin: 0;
	font: 500 14px/1.2 var(--sans);
	color: var(--muted);
}
body.shell .field-row .field-value {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	overflow-wrap: break-word;
	word-break: normal;
	white-space: normal;
	font: 500 15px/1.45 var(--mono);
	color: var(--text);
	background: none;
	border: 0;
	border-radius: 0;
}
body.shell .field-row pre.field-value {
	white-space: pre-wrap;
}
body.shell .field-actions {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-width: 16.5rem;
}
body.shell .field-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	margin-right: auto;
	color: var(--link);
	font: 500 15px/1.2 var(--sans);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
body.shell .field-actions a:hover,
body.shell .field-actions a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
body.shell .field-actions button.copy {
	width: 9.25rem;
	min-width: 9.25rem;
	height: 44px;
	min-height: 44px;
}
body.shell .agent-page .page-feedback {
	margin: 12px 0 0;
}
body.shell .agent-page .page-feedback a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	color: var(--link);
	font: 500 15px/1.2 var(--sans);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
body.shell .agent-page .page-feedback a:hover,
body.shell .agent-page .page-feedback a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
body.shell .agent-nav {
	position: sticky;
	top: var(--header-height);
	z-index: 20;
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	max-width: 100%;
	min-width: 0;
	margin: 24px 0 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	/* The rotated Advanced chevron sticks past the row. This covers that tip. */
	box-shadow: -8px 0 0 var(--bg);
	list-style: none;
}
body.shell .agent-nav::-webkit-scrollbar {
	display: none;
}
body.shell .agent-nav a {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 0 8px;
	color: var(--muted);
	font: 500 15px/1 var(--sans);
	text-decoration: none;
	white-space: nowrap;
}
body.shell .agent-nav a:hover,
body.shell .agent-nav a:focus-visible {
	color: var(--text);
	background: transparent;
}
body.shell .agent-nav a:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: -2px;
}
body.shell .agent-nav a[aria-current="true"] {
	color: var(--text);
	box-shadow: inset 0 -2px 0 var(--green);
}
body.shell .agent-nav.can-scroll.at-start:not(.at-end)::after,
body.shell .agent-nav.can-scroll:not(.at-start):not(.at-end)::after {
	content: "";
	position: sticky;
	right: 0;
	z-index: 1;
	flex: none;
	align-self: stretch;
	width: 32px;
	min-height: var(--control-height-touch);
	margin-left: -32px;
	background: linear-gradient(to left, var(--bg), transparent);
	pointer-events: none;
}
body.shell .agent-nav.can-scroll.at-end:not(.at-start)::before,
body.shell .agent-nav.can-scroll:not(.at-start):not(.at-end)::before {
	content: "";
	position: sticky;
	left: 0;
	z-index: 1;
	flex: none;
	align-self: stretch;
	width: 32px;
	min-height: var(--control-height-touch);
	margin-right: -32px;
	background: linear-gradient(to right, var(--bg), transparent);
	pointer-events: none;
}
body.shell :is(.agent-page, .setup) :is(section, .advanced, .danger-zone, h1, h2, h3) {
	scroll-margin-top: calc(var(--header-height) + var(--control-height-touch) + 1px);
}
body.shell .agent-page .advanced > summary h2 {
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}
body.shell .agent-page .advanced > summary .chevron {
	display: inline-block;
	flex: none;
	width: 0.45em;
	height: 0.45em;
	margin-right: 0.65em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.12em) rotate(-45deg);
}
body.shell .agent-page .advanced[open] > summary .chevron {
	transform: translateY(0.08em) rotate(45deg);
}
body.shell .agent-page .advanced > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 48px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--green-dim);
	color: var(--text);
	font: 700 20px/1.3 var(--mono);
	letter-spacing: -0.02em;
	cursor: pointer;
	list-style: none;
}
body.shell .agent-page .advanced > summary::-webkit-details-marker,
body.shell .agent-page .advanced > summary::marker { content: none; display: none; }
body.shell .agent-page .advanced[open] > summary { margin-bottom: 8px; }
body.shell .glance {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 16px 0 8px;
}
body.shell .glance div {
	min-width: 0;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid var(--green-dim);
	border-radius: var(--radius-control);
	background: var(--surface);
	box-sizing: border-box;
}
body.shell .glance dt {
	color: var(--muted);
	font: 500 13px/1.3 var(--sans);
}
body.shell .glance dd {
	margin: 4px 0 0;
	color: var(--text);
	font: 600 15px/1.3 var(--sans);
	overflow-wrap: anywhere;
}
body.shell .counts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
body.shell .count {
	min-width: 0;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid var(--green-dim);
	border-radius: var(--radius-control);
	background: var(--surface);
	box-sizing: border-box;
}
body.shell .all-states { margin-top: 12px; }
body.shell .all-states > summary,
body.shell .claimed > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--link);
	font: 500 15px/1.2 var(--sans);
	cursor: pointer;
	list-style: none;
}
body.shell .all-states > summary::-webkit-details-marker,
body.shell .all-states > summary::marker,
body.shell .claimed > summary::-webkit-details-marker,
body.shell .claimed > summary::marker { content: ""; display: none; }
body.shell .claimed > summary { margin-top: 4px; }
body.shell .claimed dl { margin: 0; }
body.shell details:not([open]) > .field-rows { display: none; }
body.shell .pending-table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 8px 0 0;
}
body.shell.decision-anchor,
body.shell.decision-anchor main,
body.shell.decision-anchor .pending-table,
body.shell.decision-anchor .pending-table * {
	overflow-anchor: none;
}
body.shell .pending-table th {
	padding: 8px 12px 8px 0;
	text-align: left;
	color: var(--muted);
	font: 500 13px/1.3 var(--sans);
	border-bottom: 1px solid var(--green-dim);
	white-space: nowrap;
	overflow: hidden;
}
body.shell .pending-table th:nth-child(1) { width: 18%; white-space: normal; }
body.shell .pending-table th:nth-child(2) { width: 18%; min-width: 6.75rem; }
body.shell .pending-table th:nth-child(3) { width: 16%; }
body.shell .pending-table th:nth-child(4) { width: 14%; }
body.shell .pending-table th:nth-child(5) { width: 16%; }
body.shell .pending-table th:nth-child(6) { width: 18%; }
body.shell .pending-table td {
	padding: 12px 12px 12px 0;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
	min-width: 0;
	overflow-wrap: anywhere;
}
body.shell .pending-table td:nth-child(2) {
	white-space: nowrap;
	overflow-wrap: normal;
}
body.shell .pending-table td:nth-child(3),
body.shell .pending-table td:nth-child(5) {
	white-space: normal;
	font-size: 13px;
	line-height: 1.35;
}
body.shell .pending-table td:nth-child(4),
body.shell .pending-table .pair-ip {
	overflow-wrap: anywhere;
}
body.shell .pending-table td:nth-child(3) time,
body.shell .pending-table td:nth-child(5) time,
body.shell .pending-table [data-ago],
body.shell .pending-table [data-expiry] { white-space: nowrap; }
body.shell .pending-table .actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 8px;
}
body.shell .pending-table .actions button {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding-left: 8px;
	padding-right: 8px;
}
body.shell .claimed,
body.shell .claimed dd,
body.shell .req-reason,
body.shell .req-replaces { overflow-wrap: anywhere; min-width: 0; }
body.shell .req-reason,
body.shell .req-replaces { margin: 0 0 8px; }
body.shell .pending-table .actions form { margin: 0; }
body.shell .peer-groups {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px 32px;
	align-items: start;
}
body.shell .peer-groups > section { min-width: 0; }
body.shell .peer-cards {
	display: grid;
	gap: 12px;
}
body.shell .peer-card {
	margin: 0;
	min-width: 0;
	padding: 16px 20px;
	border: 1px solid var(--green-dim);
	border-radius: var(--radius-control);
	background: var(--surface);
}
body.shell .peer-card p { margin: 0 0 8px; }
body.shell .peer-card .peer-label {
	margin: 0 0 8px;
	font: 600 16px/1.3 var(--mono);
}
body.shell .peer-card form { margin: 8px 0 0; }
body.shell header.app-header .nav-toggle,
body.shell header.app-header .app-nav > a[href="/app"] {
	position: relative;
	padding-right: 2rem;
}
body.shell .nav-count {
	position: absolute;
	top: 50%;
	right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1rem;
	height: 1rem;
	margin: 0;
	padding: 0 0.12rem;
	border-radius: 999px;
	background: var(--amber);
	color: var(--bg);
	font: 700 11px/1 var(--sans);
	transform: translateY(-50%);
}
body.shell .pair-banner-slot {
	min-height: 72px;
	margin: 16px 0 0;
}
body.shell .pair-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--green-dim);
	border-left: 3px solid var(--amber);
	border-radius: var(--radius-control);
	background: var(--surface);
}
body.shell .pair-banner-slot .pair-banner { margin: 0; }
/* Status line. It stays in the pairing section and takes its own space. */
body.shell #live-note {
	height: 0;
	min-height: 0;
	max-height: 0;
	margin: 0;
	overflow: hidden;
	color: var(--muted);
	font: 400 14px/1.4 var(--sans);
}
body.shell #live-note:not(:empty) {
	height: auto;
	min-height: 0;
	max-height: none;
	padding-top: 8px;
	overflow: visible;
}
body.shell .pair-banner p { margin: 0; max-width: none; }
body.shell .pair-code {
	display: inline-block;
	max-width: 100%;
	font: 600 clamp(16px, 2vw, 28px)/1.2 var(--mono);
	letter-spacing: 0.04em;
	white-space: nowrap;
	overflow-wrap: normal;
}
body.shell .pending-table .pair-code {
	font: 600 15px/1.2 var(--mono);
	letter-spacing: 0;
}
body.shell .req-title {
	margin: 0 0 4px;
	font: 600 16px/1.3 var(--sans);
}
body.shell .stat {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: var(--radius-badge);
	font: 600 12px/1.4 var(--sans);
	vertical-align: middle;
}
body.shell .stat-wait { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
body.shell .pending-table tr[data-resolved] .stat-wait,
body.shell .pending-table tr[data-closed] .stat-wait { visibility: hidden; }
body.shell .stat-ok { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
body.shell .stat-bad { background: color-mix(in srgb, var(--danger-line) 18%, transparent); color: var(--danger-hover); }
body.shell .ready-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	min-width: 0;
	margin-bottom: 32px;
}
body.shell .next-steps {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0 0 32px;
}
body.shell .next-steps-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	min-width: 0;
}
body.shell main.app-frame .next-steps-bar h2 {
	margin: 0;
	min-width: 0;
}
body.shell .next-steps .ready-steps,
body.shell .next-steps .agent-message {
	width: 100%;
	max-width: none;
}
body.shell .next-steps .agent-message { margin-top: 16px; }
body.shell .next-steps input[type="url"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 45rem;
	min-width: 0;
}
body.shell .next-steps .req-reason { margin: 8px 0 0; }
body.shell .ready-main,
body.shell .agent-message { min-width: 0; max-width: 100%; }
body.shell .ready-main > .field-rows {
	max-width: 48rem;
}
body.shell .setup ol.ready-steps {
	width: 100%;
	max-width: none;
}
body.shell .ready-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--green-dim);
	border-radius: var(--radius-control);
	background: var(--surface);
}
body.shell .ready-steps > li {
	display: flex;
	gap: 12px;
	padding: 16px;
	border-top: 1px solid var(--line);
}
body.shell .ready-steps > li:first-child { border-top: 0; }
body.shell .ready-steps .ready-step-body { min-width: 0; }
body.shell .ready-steps .mk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 1px solid var(--green-dim);
	font: 600 14px/1 var(--sans);
	flex: none;
}
body.shell .ready-steps li[data-state="done"] .mk {
	background: var(--green);
	color: var(--bg);
	border-color: var(--green);
}
body.shell .ready-steps li[data-state="bad"] {
	background: color-mix(in srgb, var(--danger-line) 10%, transparent);
}
body.shell .ready-steps li[data-state="bad"] .mk {
	background: var(--danger-line);
	color: var(--bg);
	border-color: var(--danger-line);
}
body.shell .agent-message {
	box-sizing: border-box;
	max-width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
}
body.shell .agent-message-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 16px;
	row-gap: 8px;
	min-width: 0;
}
body.shell .agent-message-bar h2 {
	flex: 1 1 12rem;
	min-width: min(100%, 12rem);
}
body.shell .agent-message > p.agent-message-skill {
	margin: 4px 0 0;
	max-width: 45rem;
	color: var(--muted);
	font: 400 14px/1.4 var(--sans);
}
/* Intentionally secondary to Get started, which stays 20px/700 mono. */
body.shell main.app-frame .agent-message h2 {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
	color: var(--text);
	font: 600 1rem/1.3 var(--sans);
	letter-spacing: 0;
}
body.shell .agent-message > p {
	margin: 8px 0 0;
}
body.shell .agent-message details .show-less { display: none; }
body.shell .agent-message details[open] > summary .show-full { display: none; }
body.shell .agent-message details[open] > summary .show-less { display: inline; }
body.shell .agent-message > .copy-field {
	margin-top: var(--space-3);
}
body.shell .agent-message details.claimed {
	margin-top: var(--space-2);
	min-width: 0;
	max-width: 100%;
}
body.shell .agent-message details pre {
	box-sizing: border-box;
	max-width: 100%;
	margin: var(--space-3) 0 0;
	padding: var(--space-3);
}
body.shell .agent-message button.copy {
	flex: 0 0 auto;
	width: auto;
	min-width: 10.3125rem;
	max-width: 100%;
	white-space: nowrap;
}
body.shell .agent-message .copy-field :is(pre, code),
body.shell .agent-message details :is(pre, code),
body.shell form.feedback .feedback-prompt :is(pre, code) {
	max-width: 100%;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: normal;
}
body.shell .agent-message .copy-field .prompt-token,
body.shell .agent-message details .prompt-token {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
	overflow-wrap: anywhere;
	word-break: normal;
}
body.shell .agent-message pre {
	max-width: 100%;
	margin: 12px 0 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: normal;
}
body.shell .opt {
	margin-left: 6px;
	color: var(--muted);
	font: 500 13px/1 var(--sans);
}
body.shell .count-label {
	display: block;
	color: var(--muted);
	font: 500 13px/1.3 var(--sans);
	overflow-wrap: break-word;
}
body.shell .count-value {
	display: block;
	margin-top: 4px;
	color: var(--text);
	font: 600 24px/1 var(--mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
body.shell .count.is-zero .count-value { color: var(--muted); }
body.shell .count.is-bad .count-value { color: var(--danger-line); }
body.shell .section-intro {
	margin: 8px 0 16px;
	color: var(--muted);
}
body.shell .wake-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	margin-top: 16px;
}
body.shell .wake-keys {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px 28px;
	min-width: 0;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
body.shell .wake-keys legend {
	grid-column: 1 / -1;
	padding: 0;
	margin: 0 0 8px;
	font: 500 14px/1.3 var(--sans);
	color: var(--text);
}
body.shell .wake-field { min-width: 0; }
body.shell .wake-field.span-2 { grid-column: 1 / -1; }
body.shell .wake-field > label {
	font: 500 14px/1.3 var(--sans);
	color: var(--text);
}
body.shell .wake input,
body.shell .wake select {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
}
body.shell .wake input.mono { font-family: var(--mono); }
body.shell .field-help {
	margin: 4px 0 0;
	color: var(--muted);
	font: 400 14px/1.4 var(--sans);
}
body.shell .wake-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin-top: 16px;
}
body.shell .wake-actions form { margin: 0; }
body.shell .wake-actions .req-reason { margin-top: 8px; }
body.shell .copy-field {
	position: relative;
	container-type: inline-size;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--control-border);
	border-radius: var(--radius-control);
	background: var(--bg);
	padding: var(--space-3) calc(var(--control-height-touch) + var(--space-3)) var(--space-3) var(--space-3);
}
body.shell .copy-field > :is(.field-value, .token-value, .copy-v, pre) {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	padding: 0;
}
body.shell .copy-field > button.copy,
body.shell .copy-field > button.copy-token,
body.shell form.feedback .feedback-prompt > button.copy {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--control-height-touch);
	min-width: var(--control-height-touch);
	max-width: var(--control-height-touch);
	height: var(--control-height-touch);
	min-height: var(--control-height-touch);
	padding: 0;
	background: transparent;
	color: var(--muted);
	border: 1px solid transparent;
	border-radius: var(--radius-control);
}
body.shell .copy-field > button.copy[hidden],
body.shell .copy-field > button.copy-token[hidden],
body.shell form.feedback .feedback-prompt > button.copy[hidden] {
	display: none;
}
body.shell .copy-field > button.copy:hover,
body.shell .copy-field > button.copy-token:hover,
body.shell form.feedback .feedback-prompt > button.copy:hover {
	background: var(--bg);
	border-color: var(--line-2);
	color: var(--text);
	filter: none;
}
body.shell .copy-field > button.copy:focus:not(:focus-visible),
body.shell .copy-field > button.copy-token:focus:not(:focus-visible),
body.shell form.feedback .feedback-prompt > button.copy:focus:not(:focus-visible) {
	outline: none;
}
body.shell .copy-field > button.copy:focus-visible,
body.shell .copy-field > button.copy-token:focus-visible,
body.shell form.feedback .feedback-prompt > button.copy:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
}
body.shell .copy-field > :is(button.copy, button.copy-token)[data-state="copied"],
body.shell .copy-field > :is(button.copy, button.copy-token)[data-state="failed"],
body.shell form.feedback .feedback-prompt > button.copy[data-state="copied"],
body.shell form.feedback .feedback-prompt > button.copy[data-state="failed"] {
	color: var(--text);
	background: transparent;
	border-color: transparent;
}
body.shell .copy-field > :is(button.copy, button.copy-token)[data-state="copied"] .copy-text,
body.shell .copy-field > :is(button.copy, button.copy-token)[data-state="failed"] .copy-text {
	position: absolute;
	top: calc(100% + var(--space-3));
	right: 0;
	z-index: 2;
	width: max-content;
	max-width: calc(100cqw - var(--space-4));
	height: auto;
	margin: 0;
	padding: var(--space-1) var(--space-2);
	overflow: visible;
	clip: auto;
	border: 1px solid var(--control-border);
	border-radius: var(--radius-badge);
	background: var(--surface);
	color: var(--text);
	font: 500 14px/1.3 var(--sans);
	white-space: normal;
	text-align: left;
}
body.shell form.feedback .feedback-prompt button.copy[data-state="copied"] .copy-text,
body.shell form.feedback .feedback-prompt button.copy[data-state="failed"] .copy-text {
	position: absolute;
	top: auto;
	bottom: calc(100% + var(--space-2));
	right: 0;
	z-index: 2;
	width: max-content;
	max-width: calc(100cqw - var(--space-4));
	height: auto;
	margin: 0;
	padding: var(--space-1) var(--space-2);
	overflow: visible;
	clip: auto;
	border: 1px solid var(--control-border);
	border-radius: var(--radius-badge);
	background: var(--surface);
	color: var(--text);
	font: 500 14px/1.3 var(--sans);
	white-space: normal;
	text-align: left;
}
body.shell .feedback-page {
	width: 100%;
	max-width: 50rem;
	min-width: 0;
}
body.shell form.feedback {
	width: 100%;
	max-width: 50rem;
	min-width: 0;
}
body.shell form.feedback a:not(.button) {
	display: inline;
	padding: 0;
	min-height: 0;
}
body.shell form.feedback :is(#feedback-error, [data-feedback-sent], textarea, input, select, summary, .feedback-kind-option) {
	scroll-margin-top: calc(var(--header-height) + 16px);
	scroll-margin-bottom: 16px;
}
body.shell .feedback-lead {
	margin: 0 0 var(--space-3);
}
body.shell form.feedback .feedback-sent {
	margin: 0 0 20px;
	padding: 12px 14px;
	border: 1px solid var(--green-dim);
	border-radius: var(--radius-control);
	background: color-mix(in srgb, var(--accent) 12%, var(--surface));
	color: var(--text);
}
body.shell form.feedback .feedback-agent {
	margin: 0 0 var(--space-6);
	padding: var(--space-5) var(--space-5) var(--space-4);
	border: 1px solid var(--green-dim);
	border-radius: var(--radius-control);
	background: var(--surface);
	min-width: 0;
}
body.shell form.feedback .feedback-agent h2 {
	margin: 0 0 8px;
}
body.shell form.feedback .feedback-agent p {
	margin: 0 0 10px;
}
body.shell form.feedback .feedback-prompt {
	position: relative;
	container-type: inline-size;
	margin: calc(var(--space-6) + var(--space-5)) 0 0;
	padding: var(--space-3);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-control);
	background: var(--bg);
	min-width: 0;
}
body.shell form.feedback .feedback-prompt pre {
	margin: 0;
	padding: 0 calc(var(--control-height-touch) + var(--space-2)) 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	overflow-x: auto;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: normal;
	min-width: 0;
	max-width: 100%;
	font: 500 14px/1.5 var(--mono);
	color: var(--text);
}
body.shell form.feedback .feedback-prompt .feedback-nowrap {
	white-space: nowrap;
	overflow-wrap: normal;
}
body.shell form.feedback .feedback-hint {
	margin: var(--space-3) 0 0;
	color: var(--text);
	font: 400 15px/1.4 var(--sans);
}
body.shell form.feedback .feedback-note {
	max-width: 75ch;
	margin: 0 0 var(--space-6);
	color: var(--text);
	overflow-wrap: anywhere;
}
body.shell details.feedback-manual > summary,
body.shell details.feedback-technical > summary {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 2px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--text);
	font: 600 16px/1.3 var(--sans);
	list-style: none;
	cursor: pointer;
}
body.shell details.feedback-manual > summary::-webkit-details-marker,
body.shell details.feedback-manual > summary::marker,
body.shell details.feedback-technical > summary::-webkit-details-marker,
body.shell details.feedback-technical > summary::marker {
	content: "";
	display: none;
}
body.shell details.feedback-technical > summary {
	margin-top: var(--space-4);
}
body.shell form.feedback .feedback-manual-body,
body.shell form.feedback .feedback-technical-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	padding-top: 12px;
}
body.shell form.feedback .feedback-kind {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
body.shell form.feedback .feedback-kind legend {
	margin: 0 0 6px;
	padding: 0;
	font: 600 15px/1.3 var(--sans);
}
body.shell form.feedback .feedback-kind-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
body.shell form.feedback .feedback-kind-option {
	display: inline-flex;
	flex: 1 1 7rem;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--control-border);
	border-radius: var(--radius-control);
	background: var(--bg-2);
	color: var(--text);
	font: 600 15px/1.2 var(--sans);
	cursor: pointer;
}
body.shell form.feedback .feedback-kind-option:hover:not(:has(input:checked)) {
	border-color: var(--control-border-hover);
}
body.shell form.feedback .feedback-kind-option:has(input:checked) {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 16%, var(--bg));
}
body.shell form.feedback .feedback-kind-option:focus-within {
	outline: 2px solid var(--green);
	outline-offset: 3px;
}
body.shell form.feedback .feedback-kind-option input {
	width: 1rem;
	height: 1rem;
	min-width: 1rem;
	min-height: 1rem;
	margin: 0;
	padding: 0;
	flex: none;
	accent-color: var(--accent);
}
body.shell form.feedback .feedback-kind-option input:focus-visible {
	outline: none;
}
body.shell form.feedback .feedback-ask,
body.shell form.feedback .feedback-example {
	display: none;
}
body.shell form.feedback:has(input[name="kind"][value="bug"]:checked) .feedback-ask[data-kind="bug"],
body.shell form.feedback:has(input[name="kind"][value="bug"]:checked) .feedback-example[data-kind="bug"],
body.shell form.feedback:has(input[name="kind"][value="idea"]:checked) .feedback-ask[data-kind="idea"],
body.shell form.feedback:has(input[name="kind"][value="idea"]:checked) .feedback-example[data-kind="idea"],
body.shell form.feedback:has(input[name="kind"][value="other"]:checked) .feedback-ask[data-kind="other"],
body.shell form.feedback:has(input[name="kind"][value="other"]:checked) .feedback-example[data-kind="other"] {
	display: block;
}
body.shell form.feedback .feedback-bug {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
body.shell form.feedback:has(input[name="kind"][value="idea"]:checked) .feedback-bug,
body.shell form.feedback:has(input[name="kind"][value="other"]:checked) .feedback-bug {
	display: none;
}
body.shell form.feedback .feedback-req {
	display: inline;
	margin-left: 0.5rem;
	color: var(--muted);
	font-size: 0.85rem;
	font-weight: 400;
}
body.shell form.feedback .feedback-help,
body.shell form.feedback .feedback-example {
	margin-top: 6px;
	color: var(--muted);
	font-weight: 400;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
body.shell form.feedback .feedback-field {
	min-width: 0;
	margin: 0;
}
body.shell form.feedback .feedback-field label {
	display: block;
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
}
body.shell form.feedback :is(input, select):not([type="radio"]):not([type="hidden"]) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	min-height: 44px;
	margin: 6px 0 0;
	padding: 0 12px;
	caret-color: var(--accent);
}
body.shell form.feedback textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 8rem;
	margin: 6px 0 0;
	padding: 10px 12px;
	resize: vertical;
	line-height: 1.45;
	caret-color: var(--accent);
	scrollbar-color: var(--green-dim) var(--bg-2);
}
body.shell form.feedback textarea.short {
	min-height: 6rem;
}
body.shell form.feedback :is(.feedback-pair, .feedback-meta) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px 24px;
	align-items: start;
}
body.shell form.feedback .alert {
	max-width: 100%;
	overflow-wrap: anywhere;
}
body.shell form.feedback .feedback-submit {
	margin: 4px 0 0;
}
body.shell .overview > p.waiting-alert {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}
@media (min-width: 1024px) {
	body.shell main.app-frame .glance.glance-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (min-width: 1100px) {
	body.shell main.app-frame .glance,
	body.shell main.app-frame .overview > ul.counts {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	body.shell main.app-frame .glance.glance-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	body.shell main.app-frame .all-states ul.counts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	body.shell .peer-groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.shell .settings-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 32px;
	}
	body.shell .record-pair {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 32px;
		align-items: start;
	}
	body.shell .record-pair > #log {
		grid-column: 1 / -1;
		min-width: 0;
	}
	/* Keep the heading gap on the section so #log and #mcp meet the sticky bar. */
	body.shell .record-pair > :is(#log, #mcp) {
		margin-top: calc(var(--space-6) + var(--space-4));
	}
	body.shell .record-pair > :is(#log, #mcp) > h2 {
		margin-top: 0;
	}
	body.shell .record-pair:not(:has(> #mcp-clients)) > #mcp {
		grid-column: 1 / -1;
	}
	body.shell .agent-cards,
	body.shell .empty-cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
		gap: 16px;
		align-items: start;
	}
	body.shell .empty-cards > p {
		grid-column: 1 / -1;
	}
	body.shell .chooser {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
		gap: 16px 32px;
		align-items: stretch;
	}
	body.shell .chooser > p {
		grid-column: 1 / -1;
	}
	body.shell .chooser > section {
		margin: 0;
		min-width: 0;
		padding: 20px;
		border: 1px solid var(--green-dim);
		border-radius: var(--radius-control);
		background: var(--surface);
	}
	body.shell .chooser > section > h2:first-child {
		margin-top: 0;
	}
	body.shell .setup .choices {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
		gap: 12px 16px;
	}
	body.shell .setup .choices legend {
		grid-column: 1 / -1;
	}
	body.shell .device {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 8px 32px;
		align-items: start;
	}
	body.shell .device > h1 {
		grid-column: 1 / -1;
	}
	body.shell .device input {
		max-width: none;
	}
}
@media (max-width: 800px) {
	body.shell .pending-table .actions { flex-direction: column; align-items: stretch; }
}
@media (max-width: 640px) {
	body.shell .wake .wake-keys {
		grid-template-columns: 1fr;
	}
	body.shell .wake input,
	body.shell .wake select {
		box-sizing: border-box;
		min-height: 44px;
	}
	body.shell .pending-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	body.shell .pending-table,
	body.shell .pending-table tbody,
	body.shell .pending-table tr,
	body.shell .pending-table td {
		display: block;
		width: auto;
	}
	body.shell .pending-table tr {
		margin: 0 0 12px;
		padding: 12px 16px;
		border: 1px solid var(--green-dim);
		border-radius: var(--radius-control);
		background: var(--surface);
	}
	body.shell .pending-table td {
		border: 0;
		padding: 6px 0;
	}
	body.shell .pending-table td:first-child {
		color: var(--text);
		font: inherit;
		padding: 6px 0;
	}
	body.shell .pending-table td:nth-child(3),
	body.shell .pending-table td:nth-child(5) { white-space: normal; }
	body.shell .pending-table .actions { flex-wrap: wrap; gap: 12px; }
	body.shell .pending-table .actions button { width: 100%; }
	body.shell .pair-banner-slot { min-height: 108px; }
	body.shell .pair-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 12px 16px 8px;
	}
	body.shell .pair-banner a {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		box-sizing: border-box;
		min-height: 44px;
		margin: 0;
		line-height: 1.2;
	}
	body.shell .ready-steps a,
	body.shell .ready-steps button {
		min-height: 44px;
	}
	body.shell .pending-table .pair-code {
		font: 600 clamp(18px, 5vw, 28px)/1.2 var(--mono);
		letter-spacing: 0.04em;
	}
	body.shell .copy-keep {
		white-space: normal;
		overflow-wrap: anywhere;
	}
	body.shell .pending-table td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		color: var(--muted);
		font: 500 13px/1.3 var(--sans);
	}
	body.shell button.chip,
	body.shell .callout .actions .button,
	body.shell details.row > summary {
		min-height: 44px;
	}
	body.shell details.row.addr > summary {
		flex-wrap: wrap;
	}
	body.shell details.row.addr > summary .chg {
		flex-basis: 100%;
		margin-left: 0;
	}
	body.shell .setup input,
	body.shell .setup select,
	body.shell .setup button.button {
		min-height: 44px;
	}
}
@media (max-width: 760px) {
	body.shell main.app-frame:has(.agent-nav) {
		scroll-margin-top: calc(var(--header-height) + var(--control-height-touch) + 1px);
	}
	body.shell .field-rows {
		gap: 18px;
		margin-top: 12px;
	}
	body.shell .field-row {
		flex-wrap: wrap;
		align-items: flex-start;
		row-gap: 2px;
	}
	body.shell .field-row .field-label,
	body.shell .field-row .field-value,
	body.shell .field-row .copy-field,
	body.shell .field-row .field-actions {
		flex: 1 0 100%;
		width: auto;
		max-width: 100%;
	}
	body.shell .field-row .field-label {
		font: 500 12px/1.3 var(--sans);
	}
	body.shell .field-row :is(p.field-value, pre.field-value) {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}
	body.shell .field-actions {
		justify-content: flex-end;
		align-items: center;
		min-width: 0;
		min-height: 44px;
	}
	body.shell .field-actions a {
		flex: 0 1 auto;
		margin-right: auto;
	}
	body.shell .field-actions button.copy {
		width: 9.25rem;
		min-width: 9.25rem;
		height: 44px;
		min-height: 44px;
	}
	body.shell .token .token-actions {
		flex-wrap: wrap;
		align-items: flex-start;
		row-gap: var(--space-2);
	}
	body.shell .token .copy-field {
		flex: 1 0 100%;
	}
	body.shell .token .token-value {
		flex: 1 0 100%;
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: 1.45em;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		overflow: visible;
		white-space: pre-wrap;
		overflow-wrap: anywhere;
		word-break: normal;
		font: 500 15px/1.45 var(--mono);
		color: var(--text);
	}
	body.shell .token .copy-token,
	body.shell .overview .token .copy-token,
	body.shell .records .token .copy-token {
		width: 9.25rem;
		min-width: 9.25rem;
		height: 44px;
		min-height: 44px;
		margin-left: auto;
	}
}
@media (min-width: 761px) {
	body.shell form.feedback :is(.feedback-pair, .feedback-meta) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.shell form.feedback .feedback-field.wide {
		grid-column: 1 / -1;
	}
}
@media (min-width: 1100px) {
	body.shell form.feedback .feedback-meta {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	body.shell form.feedback .feedback-meta .feedback-field.wide {
		grid-column: 1 / -1;
	}
}

body.shell details.row {
	border: 1px solid var(--line);
	border-radius: var(--radius-control);
	background: var(--surface);
	margin: 1rem 0;
}
body.shell details.row > summary {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	min-height: 44px;
	padding: 12px 14px;
	cursor: pointer;
	list-style: none;
}
body.shell details.row > summary::-webkit-details-marker,
body.shell details.row > summary::marker { content: ""; display: none; }
body.shell details.row .k { color: var(--muted); flex: none; }
body.shell details.row .v {
	font-family: var(--mono);
	font-size: 0.92rem;
	overflow-wrap: break-word;
	word-break: normal;
	min-width: 0;
	flex: 1 1 auto;
}
body.shell details.row.plain {
	background: none;
	border: 0;
}
body.shell details.row.plain > summary {
	padding-left: 0;
	padding-right: 0;
}
body.shell details.row.plain > .body {
	border-top: 0;
	padding-left: 0;
	padding-right: 0;
}
body.shell details.row .chg {
	margin-left: auto;
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	flex: none;
}
body.shell details.row .body { padding: 4px 14px 16px; border-top: 1px solid var(--line); }
body.shell details.row .body > * + * { margin-top: 1rem; }
body.shell .callout {
	border: 1px solid var(--line-2);
	border-left: 3px solid var(--amber);
	border-radius: var(--radius-control);
	background: var(--surface);
	padding: 14px;
	margin: 1rem 0;
	width: 100%;
	text-align: left;
}
body.shell .callout > * + * { margin-top: 0.75rem; }
body.shell .callout p { margin: 0; }
body.shell .callout > p + p,
body.shell .callout > p + form,
body.shell .callout > form + p { margin-top: 0.75rem; }
body.shell .callout > p.alert { margin-top: 1rem; }
body.shell .callout .lead { font-weight: 600; }
body.shell #account-signin { scroll-margin-top: calc(var(--header-height) + 112px); }
body.shell a.jump {
	position: relative;
	display: inline-block;
}
body.shell a.jump::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}
body.shell #account-signin > p { margin: 0; }
body.shell #account-signin > .status-banner { margin-bottom: 0.75rem; }
body.shell #account-signin > p + p,
body.shell #account-signin > form + p { margin-top: 0.75rem; }
body.shell #account-signin > p.alert { margin-top: 1rem; }
body.shell #account-signin p.alert .signin-word { white-space: nowrap; overflow-wrap: normal; }
body.shell #account-signin .lead { font-weight: 600; }
body.shell .callout .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
body.shell .chips { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: flex-start; gap: 8px; width: 100%; }
body.shell .chips .lab { flex: 0 0 100%; width: 100%; max-width: none; margin: 0; color: var(--muted); font-size: 0.85rem; text-align: left; }
body.shell button.chip {
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--control-border);
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--text);
	font: 600 15px/1.2 var(--sans);
	cursor: pointer;
}
body.shell .reason {
	margin: 0.75rem 0;
	max-width: none;
	height: auto;
	min-height: 1.6em;
	max-height: none;
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	color: var(--text-soft);
}
body.shell .reason:empty,
body.shell .reason[hidden] {
	display: none;
	margin: 0;
	min-height: 0;
}
body.shell .reason[data-tone="error"] { color: var(--danger-line); }
body.shell form[data-choice-form][data-taken] {
	display: flex;
	flex-direction: column;
}
body.shell form[data-choice-form][data-taken] > * { order: 4; }
body.shell form[data-choice-form][data-taken] > p:not(.name-block):not(.reason):not(:has(button)) { order: 1; }
body.shell form[data-choice-form][data-taken] > .name-block { order: 2; }
body.shell form[data-choice-form][data-taken] > .reason { order: 3; }
body.shell .reason[data-tone="ready"] { color: var(--text-soft); }
body.shell .badge {
	display: inline-block;
	margin-left: 8px;
	padding: 0 6px;
	border-radius: 4px;
	background: #14532d;
	color: #d1fae5;
	font-size: 12px;
	line-height: 20px;
	font-weight: 600;
	vertical-align: 1px;
}
body.shell .badge.state-wait {
	background: color-mix(in srgb, var(--amber) 18%, transparent);
	color: var(--amber);
}
body.shell .setup .step-title {
	width: 100%;
	max-width: none;
}
body.shell .setup button[aria-disabled="true"],
body.shell .setup button[aria-disabled="true"]:hover,
body.shell .setup button.button.primary[aria-disabled="true"],
body.shell .setup button.button.primary[aria-disabled="true"]:hover,
body.shell .setup button.button.primary:disabled:hover,
body.shell .chooser button.button.primary:disabled,
body.shell .chooser button.button.primary:disabled:hover,
body.shell .empty-card button.button.primary:disabled,
body.shell .empty-card button.button.primary:disabled:hover {
	background: var(--surface);
	color: var(--muted);
	-webkit-text-fill-color: var(--muted);
	border: 1px dashed var(--line-2);
	opacity: 1;
	filter: none;
	box-shadow: none;
	cursor: not-allowed;
}
body.shell button.text-link {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	color: var(--link);
	font: 500 15px/1.2 var(--sans);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
	min-height: 44px;
}
body.shell .connection-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}
body.shell .removal-done {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-top: 24px;
	padding: 16px 20px;
	border: 1px solid var(--accent);
	border-radius: var(--radius-control);
}
body.shell .setup .danger-zone.confirm .steps,
body.shell .removal-done .steps {
	width: 100%;
	max-width: none;
}
body.shell .removal-done .step-check {
	margin-right: 0.4em;
	color: var(--accent);
	font-weight: 700;
}
body.shell .removal-success { margin-top: 0; }
body.shell .access { list-style: none; padding: 0; margin: 0; }
body.shell .access li { margin: 0.75rem 0; }
body.shell .access .d { display: block; color: var(--muted); }