/* Port of SettingsView.swift (SettingsSidebar, SettingsPageView) and SettingsKit.swift. */

/* MARK: SettingsSidebar */

.settings-sidebar-host {
	flex: 1;
	min-height: 0;
	display: flex;
}
.settings-sidebar {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 8px;
}
.settings-back {
	margin: 0 8px;
	height: calc(28px * var(--tg-zoom));
	padding: 0 8px;
	display: flex;
	align-items: center;
	gap: calc(8px * var(--tg-zoom));
	border-radius: 8px;
	font-size: calc(13px * var(--tg-zoom));
	color: var(--tg-ink2);
	text-align: left;
}
.settings-back:hover,
.settings-page-row:hover:not(.selected) {
	background: color-mix(in srgb, var(--tg-hover) 70%, transparent);
}
.settings-back .icon,
.settings-page-row .icon {
	width: calc(18px * var(--tg-zoom));
	display: inline-flex;
	justify-content: center;
}
.settings-search {
	height: calc(32px * var(--tg-zoom));
	margin: 0 12px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	gap: 7px;
	border-radius: 9px;
	background: var(--tg-canvas);
	border: 1px solid var(--tg-line);
	color: var(--tg-muted);
}
.settings-search.block {
	margin: 0;
	background: var(--tg-block);
}
.settings-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: none;
	font-size: calc(13px * var(--tg-zoom));
	color: var(--tg-ink);
}
.settings-search input::placeholder {
	color: var(--tg-muted);
}
.settings-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 0 8px;
}
.settings-group-label {
	padding: 14px 8px 4px;
	font-size: calc(11.5px * var(--tg-zoom));
	font-weight: 500;
	color: var(--tg-muted);
}
.settings-page-row {
	width: 100%;
	height: calc(28px * var(--tg-zoom));
	padding: 0 8px;
	display: flex;
	align-items: center;
	gap: calc(8px * var(--tg-zoom));
	border-radius: 8px;
	font-size: calc(13px * var(--tg-zoom));
	color: var(--tg-ink);
	text-align: left;
}
.settings-page-row .icon {
	color: var(--tg-ink2);
}
.settings-page-row.selected {
	background: var(--tg-hover);
	font-weight: 500;
}
.settings-page-row.selected .icon {
	color: var(--tg-ink);
}
.settings-none {
	padding: 8px 8px 0;
	font-size: calc(12px * var(--tg-zoom));
	color: var(--tg-muted);
}

/* MARK: SettingsPageView */

.settings-body > .settings-sidebar {
	flex: none;
	width: var(--tg-left);
	border-right: 1px solid var(--tg-line);
	background: var(--tg-panel);
}
.settings-page {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
	background: var(--tg-canvas);
}
.settings-page-body {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 36px 36px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.settings-header {
	margin: 0;
	font-size: calc(24px * var(--tg-zoom));
	font-weight: 600;
	color: var(--tg-ink);
}
.settings-stack {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.settings-stack.shortcuts {
	gap: 18px;
}

/* SettingsSection, SettingsCard, SettingsRow */
.settings-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.settings-section-head {
	min-height: calc(24px * var(--tg-zoom));
	padding-left: 2px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.settings-section-head .title {
	font-size: calc(12px * var(--tg-zoom));
	font-weight: 500;
	color: var(--tg-muted);
}
.settings-section-head .grow,
.settings-row .grow,
.profile-row .grow {
	flex: 1;
	min-width: 16px;
}
.section-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}
.icon-button {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tg-ink2);
}
.icon-button:hover {
	background: var(--tg-hover);
}
.settings-card {
	padding: 0 16px;
	border-radius: 12px;
	background: var(--tg-block);
	border: 1px solid var(--tg-line);
}
.settings-hairline {
	height: 0.5px;
	background: var(--tg-line);
}
.settings-row {
	min-height: calc(52px * var(--tg-zoom));
	padding: 13px 0;
	display: flex;
	align-items: center;
	gap: 12px;
}
.settings-row > :not(.copy):not(.grow) {
	flex: none;
}
.settings-row .copy {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.settings-row .title {
	font-size: calc(13.5px * var(--tg-zoom));
	font-weight: 500;
	color: var(--tg-ink);
}
.settings-row .detail {
	font-size: calc(12px * var(--tg-zoom));
	line-height: 1.4;
	color: var(--tg-muted);
	user-select: text;
	overflow-wrap: anywhere;
}
.settings-empty {
	padding: 16px 0;
	font-size: calc(12.5px * var(--tg-zoom));
	line-height: 1.4;
	color: var(--tg-muted);
}
.muted-text {
	font-size: calc(11px * var(--tg-zoom));
	color: var(--tg-muted);
	user-select: text;
}

/* SettingsButtonStyle */
.settings-button {
	height: calc(28px * var(--tg-zoom));
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-radius: 7px;
	font-size: calc(12.5px * var(--tg-zoom));
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
}
.settings-button.small {
	height: calc(24px * var(--tg-zoom));
	padding: 0 9px;
	font-size: calc(12px * var(--tg-zoom));
}
.settings-button.primary {
	background: var(--tg-accent);
	color: #fff;
}
.settings-button.secondary {
	background: var(--tg-hover);
	color: var(--tg-ink);
	border: 1px solid var(--tg-line);
}
.settings-button.destructive {
	background: var(--tg-bad-soft);
	color: var(--tg-bad);
}
.settings-button:active:not(:disabled) {
	opacity: 0.75;
}
.settings-button:disabled {
	opacity: 0.45;
}

/* Storage ProgressView: linear, 160 pt, accent until 90% then warn. */
.storage-meter {
	appearance: none;
	width: 160px;
	height: 4px;
	border: 0;
	border-radius: 2px;
	overflow: hidden;
	background: color-mix(in srgb, var(--tg-ink) 12%, transparent);
	color: var(--tg-accent);
}
.storage-meter::-webkit-progress-bar {
	background: transparent;
}
.storage-meter::-webkit-progress-value {
	background: currentColor;
}
.storage-meter::-moz-progress-bar {
	background: currentColor;
}
.storage-meter.warn {
	color: var(--tg-warn);
}

/* StatusPill */
.status-pill {
	--tone: var(--tg-muted);
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: calc(11.5px * var(--tg-zoom));
	font-weight: 500;
	color: var(--tone);
	background: color-mix(in srgb, var(--tone) 14%, transparent);
	border: 0.5px solid color-mix(in srgb, var(--tone) 28%, transparent);
	white-space: nowrap;
}
.status-pill.tone-neutral {
	color: var(--tg-ink2);
	background: color-mix(in srgb, var(--tone) 12%, transparent);
}
.status-pill .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tone);
}
.tone-ok {
	--tone: var(--tg-ok);
}
.tone-warn {
	--tone: var(--tg-warn);
}
.tone-bad {
	--tone: var(--tg-bad);
}
.tone-accent {
	--tone: var(--tg-accent);
}

/* SettingsCallout */
.settings-callout {
	--tone: var(--tg-ok);
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--tone) 9%, transparent);
	border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
	font-size: calc(12.5px * var(--tg-zoom));
	line-height: 1.45;
	color: var(--tg-ink2);
}
.settings-callout .icon,
.settings-callout strong {
	color: var(--tone);
}
.settings-callout strong {
	font-weight: 600;
}

/* IconTile */
.icon-tile {
	flex: none;
	width: calc(32px * var(--tg-zoom));
	height: calc(32px * var(--tg-zoom));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--tg-hover);
	border: 0.5px solid var(--tg-line);
	color: var(--tg-ink2);
}
.icon-tile img {
	height: calc(16px * var(--tg-zoom));
}
.icon-tile .letter {
	font-size: calc(14px * var(--tg-zoom));
	font-weight: 600;
	color: var(--tg-accent);
}
.brand-mark.small {
	width: 15px;
	height: 15px;
}

/* Controls */
.settings-segmented {
	flex: none;
	display: inline-flex;
	padding: 2px;
	border-radius: 7px;
	background: var(--tg-hover);
}
.settings-segmented button {
	height: 22px;
	padding: 0 10px;
	border-radius: 5px;
	font-size: 12.5px;
	color: var(--tg-ink);
	white-space: nowrap;
}
.settings-segmented button.selected {
	background: var(--tg-canvas);
	box-shadow:
		0 1px 2px rgb(0 0 0 / 0.12),
		0 0 0 0.5px rgb(0 0 0 / 0.05);
}
:root[data-theme="dark"] .settings-segmented button.selected {
	background: #636366;
}
.settings-switch {
	position: relative;
	width: 38px;
	height: 22px;
	flex: none;
}
.settings-switch input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}
.settings-switch .track {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--tg-ink) 12%, transparent);
	pointer-events: none;
	transition: background 0.15s;
}
.settings-switch .track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
	transition: transform 0.15s;
}
.settings-switch input:checked + .track {
	background: var(--tg-accent);
}
.settings-switch input:checked + .track::after {
	transform: translateX(16px);
}
.settings-switch input:focus-visible + .track {
	outline: 2px solid var(--tg-accent);
	outline-offset: 2px;
}
.settings-menu {
	min-width: 140px;
	height: 24px;
	padding: 0 8px;
	border-radius: 6px;
	border: 0.5px solid var(--tg-line);
	background: var(--tg-canvas);
	color: var(--tg-ink);
	font: inherit;
	font-size: 13px;
}
.settings-stepper {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.settings-stepper .value {
	font-family: var(--tg-mono);
	font-size: calc(12px * var(--tg-zoom));
	color: var(--tg-ink2);
}
.settings-stepper .buttons {
	display: inline-flex;
	flex-direction: column;
	border-radius: 5px;
	border: 0.5px solid var(--tg-line);
	background: var(--tg-canvas);
	overflow: hidden;
}
.settings-stepper .buttons button {
	width: 16px;
	height: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tg-ink2);
}
.settings-stepper .buttons button + button {
	border-top: 0.5px solid var(--tg-line);
}
.accent-swatches {
	display: flex;
	gap: 10px;
}
.swatch {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: currentColor;
	position: relative;
}
.swatch.chosen {
	box-shadow:
		inset 0 0 0 2px var(--tg-block),
		0 0 0 2px currentColor;
}
kbd.shortcut {
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--tg-block);
	font: calc(12px * var(--tg-zoom)) var(--tg-font);
	color: var(--tg-ink2);
}
.settings-card .settings-row kbd.shortcut {
	background: var(--tg-hover);
}

/* Account */
.profile-row {
	padding: 16px 0;
	display: flex;
	align-items: center;
	gap: 14px;
}
.profile-row .copy {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.avatar {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tg-hover);
}
.avatar.small {
	width: 32px;
	height: 32px;
}
.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.avatar .initials {
	font-size: 16px;
	font-weight: 600;
	color: var(--tg-ink);
}
.avatar.small .initials {
	font-size: 13px;
}
.display-name {
	border: 0;
	outline: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: calc(17px * var(--tg-zoom));
	font-weight: 600;
	color: var(--tg-ink);
}
.profile-row .email {
	font-size: calc(12px * var(--tg-zoom));
	color: var(--tg-muted);
	user-select: text;
}

/* About */
.settings-card.about .about-row {
	padding: 16px 0;
	display: flex;
	align-items: center;
	gap: 14px;
}
.app-mark {
	width: 52px;
	height: 52px;
	color: var(--tg-ink);
}
.settings-card.about .name {
	font-size: calc(18px * var(--tg-zoom));
	font-weight: 600;
	color: var(--tg-ink);
}
.settings-card.about .version {
	font-size: calc(12px * var(--tg-zoom));
	color: var(--tg-muted);
}

/* Agent import (PaneView.importSheet): checks, a change list on the block tone, and the new revision note on accent-soft. */
.import-sheet {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 12px;
}
.import-sheet .mono,
.import-sheet .file {
	font-family: var(--tg-mono);
	font-size: 11px;
	color: var(--tg-muted);
}
.import-checks {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.import-check {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--tg-ink);
}
.import-check .sf-wrap {
	color: var(--tg-ok);
}
.import-check .value {
	margin-left: auto;
	color: var(--tg-muted);
}
.import-changes {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 11px;
	border-radius: 8px;
	background: var(--tg-block);
}
.import-changes .caption {
	font-size: 11px;
	font-weight: 500;
	color: var(--tg-muted);
}
.import-change.added {
	color: var(--tg-ok);
}
.import-change.changed {
	color: var(--tg-accent);
}
.import-change.removed {
	color: var(--tg-bad);
}
.import-note {
	padding: 11px;
	border-radius: 8px;
	background: var(--tg-accent-soft);
	font-weight: 500;
	color: var(--tg-ink);
}

/* Sheets */
.settings-sheet {
	width: min(460px, calc(100vw - 32px));
	padding: 22px;
	border: 1px solid var(--tg-line);
	border-radius: 12px;
	background: var(--tg-canvas);
	color: var(--tg-ink);
	box-shadow: 0 20px 50px rgb(0 0 0 / 0.25);
}
.settings-sheet::backdrop {
	background: rgb(0 0 0 / 0.25);
}
.settings-sheet form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.settings-sheet h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}
.settings-sheet p {
	margin: 0;
	font-size: 13px;
	color: var(--tg-ink2);
}
.settings-sheet input {
	height: 30px;
	padding: 0 10px;
	border-radius: 7px;
	border: 1px solid var(--tg-line);
	background: var(--tg-block);
	color: var(--tg-ink);
	font: inherit;
	font-size: 13px;
}
.settings-sheet footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}