/*
 * The settings' building blocks (js/components/settings-ui.js, segmented.js, advanced.js, help-tip.js — the four
 * programs had them as one copy, now the frame's): a page title, cards of rows, a switch, a segmented choice, a
 * drop-down, a status line, the "进阶 ›" fold. From the programs' settings.css / components.css / depth.css, on the
 * frame's tokens.
 */

input[type="range"] {
	accent-color: var(--accent);
}

/* ---- a settings page ---- */

.set-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 16px;
	font-size: calc(20px * var(--ui-scale));
	font-weight: 600;
	color: var(--text-strong);
}

.set-card {
	margin-bottom: 16px;
	padding: 4px 18px;
	border: 1px solid var(--border);
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	border-radius: var(--radius-card);
	background: var(--surface);
	box-shadow: var(--edge-light), var(--elev-1);
}

.set-card.is-alert {
	border-color: color-mix(in srgb, var(--danger) 40%, transparent);
	background: var(--danger-bg);
}

.set-card-title {
	margin: 12px 0 0;
	font-size: calc(13px * var(--ui-scale));
	font-weight: 600;
	color: var(--muted);
}

.set-row {
	padding: 12px 0;
}

.set-row + .set-row {
	border-top: 1px solid var(--border);
}

.set-row-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
}

.set-row-text {
	flex: 1 1 12em;
	min-width: 0;
}

.set-label {
	font-weight: 500;
	color: var(--text-strong);
}

.set-label:has(.help-q) {
	display: flex;
	align-items: center;
	gap: 6px;
}

.set-hint {
	margin: 2px 0 0;
	font-size: calc(12px * var(--ui-scale));
	color: var(--muted);
}

.set-control {
	flex: none;
	max-width: 100%;
	margin-left: auto;
}

.set-select {
	width: auto;
	min-width: 140px;
}

.set-select-wrap {
	position: relative;
	display: inline-flex;
}

.set-select-icon {
	position: absolute;
	top: 50%;
	left: 12px;
	display: flex;
	color: var(--muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.set-select.has-icon {
	padding-left: 36px;
}

.set-status {
	margin: 0 0 12px;
	padding: 6px 12px;
	border-radius: var(--radius);
	background: var(--ok-bg);
	color: var(--ok);
	font-size: calc(13px * var(--ui-scale));
}

.set-status.is-error {
	background: var(--danger-bg);
	color: var(--danger);
}

.set-sub .set-row {
	margin: 10px 4px 4px;
	padding: 2px 0 2px 14px;
	border-left: 2px solid var(--border);
}

.set-sub .set-row + .set-row {
	margin-top: 4px;
	border-top: 0;
}

@media (max-width: 767px) {
	.set-seg {
		max-width: 100%;
	}
}

/* ---- a picker (components/picker.js): a raised button that opens something to pick from — 文档's space, AI 助手's
   model; a mark on the left with even room round it, the name, a swap mark on the right ---- */
.picker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: 100%;
	height: 36px;
	padding: 0 12px 0 7px;
	border: 1px solid var(--border);
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	border-radius: 999px;
	background: var(--face), var(--sb-btn-bg);
	box-shadow: var(--edge-light), var(--edge-dark), var(--elev-1);
	color: var(--text-strong);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition:
		background-color var(--dur-quick),
		box-shadow var(--dur-quick),
		translate 80ms;
}

.picker:hover:not(:disabled) {
	background: var(--face), var(--sb-btn-hover);
}

.picker:active:not(:disabled) {
	background: var(--sb-btn-sunk);
	box-shadow: var(--btn-pressed);
	translate: 0 1px;
}

.picker:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.picker-mark {
	display: inline-flex;
	flex: none;
}

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

.picker-swap {
	display: inline-flex;
	flex: none;
	color: var(--faint);
}

/* smaller, among a box's buttons (AI 助手's model under what one types) */
.picker--sm {
	gap: 7px;
	height: 32px;
	padding: 0 10px 0 6px;
	font-size: calc(13px * var(--ui-scale));
	font-weight: 500;
}

/* ---- a switch: a groove and a knob that can be dragged ---- */

.switch {
	position: relative;
	display: inline-flex;
	cursor: pointer;
	touch-action: pan-y;
}

.switch:has(.switch-input:disabled) {
	cursor: default;
}

.switch-input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}

.switch-track {
	position: relative;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: linear-gradient(to bottom, var(--switch-groove-shade), transparent 60%), var(--switch-groove);
	box-shadow: var(--switch-groove-shadow);
	transition: background var(--dur);
}

.switch-input:checked + .switch-track {
	background: linear-gradient(to bottom, var(--switch-groove-shade-on), transparent 70%), var(--switch-groove-on);
}

.switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--switch-knob);
	box-shadow: var(--switch-knob-shadow);
	transition:
		transform var(--dur) var(--ease-grow),
		width var(--dur-quick);
}

.switch-input:checked + .switch-track .switch-thumb {
	transform: translateX(18px);
}

/* pressed, the knob stretches toward where it would go */
.switch-input:active:not(:disabled) + .switch-track .switch-thumb {
	width: 21px;
}

.switch-input:checked:active:not(:disabled) + .switch-track .switch-thumb {
	transform: translateX(15px);
}

.switch.is-dragging .switch-input:not(:disabled) + .switch-track .switch-thumb {
	width: 18px;
	transition: none;
}

.switch-input:focus-visible + .switch-track {
	outline: 2px solid var(--border-strong);
	outline-offset: 2px;
}

.switch-input:disabled + .switch-track {
	opacity: 0.4;
}

/* ---- a segmented choice: a groove, a raised thumb that slides (and can be dragged) ---- */

.seg {
	position: relative;
	display: flex;
	flex: none;
	padding: 2px;
	border-radius: 999px;
	background: var(--seg-groove);
	box-shadow: var(--seg-groove-shadow);
	touch-action: pan-y;
	user-select: none;
}

.seg-thumb {
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 0;
	border-radius: 999px;
	background: var(--face), var(--seg-thumb);
	box-shadow: var(--seg-thumb-shadow);
	opacity: 0;
}

.seg-thumb.is-placed {
	opacity: 1;
}

.seg-thumb.animate:not(.is-dragging) {
	transition:
		transform var(--dur) var(--ease),
		width var(--dur) var(--ease);
}

.seg-option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: calc(1.5em + 8px);
	padding: 4px 12px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--seg-text);
	font-size: calc(13px * var(--ui-scale));
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--dur);
}

.seg-option:hover {
	color: var(--text);
}

.seg-option.is-current {
	color: var(--seg-text-on);
	cursor: grab;
}

.seg-option.is-current:active {
	cursor: grabbing;
}

.seg--vertical {
	flex-direction: column;
	height: auto;
	border-radius: 16px;
	touch-action: pan-x;
}

.seg--vertical .seg-thumb {
	top: 0;
	right: 2px;
	bottom: auto;
	left: 2px;
	border-radius: 14px;
}

.seg--vertical .seg-thumb.animate:not(.is-dragging) {
	transition:
		transform var(--dur) var(--ease),
		height var(--dur) var(--ease);
}

.seg--auto.seg--vertical {
	margin-left: auto;
}

.seg--vertical .seg-option {
	padding: 6px 14px;
	border-radius: 14px;
}

/* ---- "进阶 ›": the less-used settings folded away (advanced.js), and help-tip.js's fold ---- */

.adv {
	display: flex;
	flex-direction: column;
	margin-top: 8px;
}

.adv-toggle {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 4px;
	margin-left: 4px;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--muted);
	font-size: calc(13px * var(--ui-scale));
	cursor: pointer;
}

.adv-toggle:hover {
	color: var(--text-strong);
}

.adv-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	transition: transform var(--dur) var(--ease);
}

.adv-chevron::after {
	content: "";
	width: 5px;
	height: 5px;
	margin-left: -2px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.adv-toggle > svg {
	transition: transform var(--dur) var(--ease);
}

.adv.is-open .adv-chevron,
.adv.is-open .adv-toggle > svg {
	transform: rotate(90deg);
}

/* 0fr → 1fr slides the content open without measuring it */
.adv-body {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	transition:
		grid-template-rows var(--dur) var(--ease),
		opacity var(--dur) var(--ease),
		visibility 0s linear var(--dur);
}

.adv.is-open .adv-body {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition:
		grid-template-rows var(--dur) var(--ease),
		opacity var(--dur) var(--ease);
}

/* the one thing inside the grid; room around it for its cards' shadows */
.adv-body > * {
	min-height: 0;
	overflow: hidden;
	margin: 0 -6px;
	padding: 8px 6px 4px;
}

/* ---- the "?" of help-tip.js: phones only, unless everywhere ---- */

.help-q {
	display: none;
	width: 22px;
	height: 22px;
}

.help-q.help-q--always {
	display: inline-flex;
}

@media (max-width: 767px) {
	.help-q {
		display: inline-flex;
	}

	.help-fold {
		display: none;
	}
}

/* ---- more of the settings pages' pieces the programs share (were in each one's settings.css / components.css) ---- */
.set-stack > * + * {
	margin-top: 16px;
}

.set-small {
	font-size: calc(11px * var(--ui-scale));
}

.set-warning {
	margin: 6px 0 0;
	font-size: calc(12px * var(--ui-scale));
	color: #b45309;
}

:root[data-theme="dark"] .set-warning {
	color: #fbbf24;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .set-warning {
		color: #fbbf24;
	}
}

.set-below {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

/* a segmented control under its row: as wide as its options, from the left (stacked when they do not fit) */
.set-below > .seg {
	align-self: flex-start;
	max-width: 100%;
}

.set-below > .seg--auto.seg--vertical {
	margin-left: 0;
}

.set-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.set-inline .input {
	flex: 1;
	min-width: 160px;
}

/* buttons side by side are one height: none stretched to the row, none pushed down by form spacing */
.set-inline > .btn {
	align-self: center;
	margin-top: 0;
}

.set-code {
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--surface-2);
	font-family: var(--mono);
	font-size: calc(12px * var(--ui-scale));
}

.set-confirm {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

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

.btn-quiet {
	background: none;
	color: var(--muted);
	font-weight: 400;
}

.btn-quiet:hover {
	color: var(--text-strong);
}

.badge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--muted);
	font-size: calc(12px * var(--ui-scale));
	vertical-align: middle;
}