/*
 * 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);
}

/* settings-ui.js row({ dense }): 10 px between two rows, --form-row-gap */
.set-row--dense {
	padding: 5px 0;
}

/* settings-ui.js emptyNote, cardActions */
.set-empty {
	margin: 0;
	padding: 12px 0;
	font-size: calc(14px * var(--ui-scale));
	color: var(--muted);
}

.set-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--form-row-gap);
}

.set-empty + .set-actions {
	padding-top: 0;
}

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

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

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

/* a picture before the words (语言's 文A, a lock…): on their line */
.set-label > svg {
	vertical-align: -0.2em;
}

.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;
}

/* a switch there sits on the line's top, not its baseline: on the baseline the line kept room under it (27 px for a
   22 px switch), and the row centered that, the switch 3 px above the label's middle (the user 2026-10-27) */
.set-control > .switch {
	vertical-align: top;
}

.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);
	transition: background-color var(--dur-quick) var(--ease);
	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;
}

/* filling its row (first for CAD 图纸's properties card, on the Circinus branch): the name takes the room, the swap mark at the far end */
.picker--fill {
	width: 100%;
	min-width: 0;
}

.picker--fill .picker-name {
	flex: 1;
	text-align: start;
}

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

/* how far on it is, 0 – 1: everything that is lit when on (the groove, the marks pressed into it; 日历's dots too,
   calendar/mini.js) is mixed by it, so they go together — with the knob while it is dragged (settings-ui.js sets it
   from where the knob is), and let go or clicked, on the knob's own time and curve. (The user 2026-11-08: the groove
   faded but the eye jumped when let go; the marks' gradient could not be faded by a transition at all.) */
@property --switch-on {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

.switch {
	--switch-on: 0;
	position: relative;
	display: inline-flex;
	cursor: pointer;
	touch-action: pan-y;
	transition: --switch-on var(--dur) var(--ease-out);
}

.switch:has(.switch-input:checked) {
	--switch-on: 1;
}

.switch.is-dragging {
	transition: none;
}

.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, color-mix(in srgb, var(--switch-groove-shade-on) calc(var(--switch-on) * 100%), var(--switch-groove-shade)), transparent calc(60% + var(--switch-on) * 10%)),
		color-mix(in srgb, var(--switch-groove-on) calc(var(--switch-on) * 100%), var(--switch-groove));
	box-shadow: var(--switch-groove-shadow);
}

/* the power marks pressed into the groove, as on a real switch: 「I」 at the left, 「O」 at the right, each in the half
   the knob leaves free when that is the state (the knob covers the other). Drawn twice through one mask: ::after the
   cut, shaded inside its top edge; ::before its lit lower lip, 0.75px lower (light from the top left) */
.switch-track::before,
.switch-track::after {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-mask: var(--switch-marks-shape) center / 40px 22px no-repeat;
	mask: var(--switch-marks-shape) center / 40px 22px no-repeat;
}

/* 「shown or not」: an eye and a struck-out eye instead of 「I」 「O」 (settings-ui.js toggle's marks: "eye") */
.switch--eye {
	--switch-marks-shape: var(--switch-marks-eye);
}

.switch-track::before {
	background: color-mix(in srgb, var(--switch-mark-lip-on) calc(var(--switch-on) * 100%), var(--switch-mark-lip));
	transform: translateY(0.75px);
}

/* the eye's lines are thin (1.4 px) and it has a pupil: its lip 0.75 px lower read as a second, lighter eye under the
   first, half a pixel off (the user 2026-11-08: 「眼睛图标高度似乎不一致」, plainest in dark, on). Here the lip lies
   right under the cut: one eye, lit through it as before (「I」 「O」 keep theirs) */
.switch--eye .switch-track::before {
	transform: none;
}

.switch-track::after {
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--switch-mark-deep-on) calc(var(--switch-on) * 100%), var(--switch-mark-deep)) 35%,
		color-mix(in srgb, var(--switch-mark-on) calc(var(--switch-on) * 100%), var(--switch-mark)) 70%
	);
}

.switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	z-index: 1; /* over the marks it covers */
	background: var(--switch-knob);
	box-shadow: var(--switch-knob-shadow);
	/* always translate then scale, so every state slides into every other (settings-ui.js drags it the same way);
	   no give: it neither stretches when pressed nor goes past its end (the user 2026-10-27: 拖动的部位不要有弹性) */
	transform: translateX(0) scaleX(1);
	transition: transform var(--dur) var(--ease-out);
}

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

/* the grip: three fine ridges across the knob, each a cut with a lit edge right of it, fading out toward the top and
   bottom where the dome turns away */
.switch-thumb::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 5px;
	width: 8px;
	height: 10px;
	background: repeating-linear-gradient(to right, var(--switch-grip-cut) 0 1px, var(--switch-grip-lit) 1px 2px, transparent 2px 3px);
	-webkit-mask: radial-gradient(closest-side, #000 55%, transparent);
	mask: radial-gradient(closest-side, #000 55%, transparent);
}

/* pressed, the knob stretches 3px toward where it would go (an ellipse 21 × 18, as when it was made 21 wide): scaled
   about its middle, moved half of that so its far edge stays */
.switch.is-dragging .switch-input:not(:disabled) + .switch-track .switch-thumb {
	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;
	transform-origin: left center; /* segmented.js slides it by transform: scaled from where it starts */
}

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

.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);
}

/* one that cannot be picked now (segmented.js enable(id, false)): faded like a disabled button, no hover */
.seg-option:disabled,
.seg-option:disabled:hover {
	color: var(--seg-text);
	opacity: 0.4;
	cursor: not-allowed;
}

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

.seg-option.is-current:active {
	cursor: var(--cursor-dragging);
}

/* (segmented.js fill: the options share the row, each no narrower than its words) */
.seg--fill > .seg-option {
	flex: 1 1 0;
}

.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;
	transform-origin: center top;
}

.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-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);
}

/* in a card (not after the cards, as 进阶): a line of the card, on its left edge */
.set-card .adv-toggle {
	margin-left: 0;
}

.set-rows > .adv {
	margin: 0;
	padding: 8px 0;
}

/* 0fr shut, 1fr open; advanced.js slides it by transform (lib/motion.js slideBody), what is in it fading */
.adv-body {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--dur) var(--ease),
		visibility 0s linear var(--dur);
}

.adv.is-open .adv-body {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition: 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;
}

/* a row of a long list that opens where it stands (advanced.js foldRow): the same 0fr / 1fr, slid by transform */
.fold-row-head {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.fold-row-body {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: visibility 0s linear var(--dur);
}

.fold-row.is-open > .fold-row-body {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: none;
}

.fold-row-body > * {
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

/* a card with such rows (or any fold) whose bottom edge goes along with what is under the fold: its look on .fold-shape's
   ::before (base.css), as .set-card's own */
.set-card.fold-shape {
	border-color: transparent;
	background: none;
	box-shadow: none;
}

.set-card.fold-shape::before {
	border-color: 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);
}

/* ---- 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: var(--warn);
}

.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;
}

/* ---- code in colour (js/lib/highlight.js): the chats' code blocks ---- */
.hl-com {
	color: var(--hl-com);
	font-style: italic;
}
.hl-str {
	color: var(--hl-str);
}
.hl-num {
	color: var(--hl-num);
}
.hl-kw {
	color: var(--hl-kw);
}
.hl-lit {
	color: var(--hl-lit);
}
.hl-type {
	color: var(--hl-type);
}
.hl-fn {
	color: var(--hl-fn);
}
.hl-meta {
	color: var(--hl-meta);
}
.hl-tag {
	color: var(--hl-tag);
}
.hl-attr {
	color: var(--hl-attr);
}
.hl-ins,
.hl-del {
	display: inline-block;
	min-width: 100%;
}
.hl-ins {
	background: var(--hl-ins-bg);
	color: var(--hl-ins);
}
.hl-del {
	background: var(--hl-del-bg);
	color: var(--hl-del);
}

/* ---- the bar between two parts, dragged to share the room (js/components/split-grip.js; UI-RULES 分隔条): one look
   everywhere — 视频's timeline card, 代码's result, a tall window's drawer, a 3D view's four views. A thin bar, a short
   round pill in its middle; darker when pointed at, the selection's blue while dragged (or reached by Tab). The bar's
   thickness (--split-grip-hit, odd: the pill sits on whole pixels) is where it can be caught; the pill never changes size ---- */
.split-grip {
	--split-grip-hit: 9px;
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--split-grip-hit);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: var(--cursor-resize-y);
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	outline: none;
}

.split-grip.is-x {
	width: var(--split-grip-hit);
	height: auto;
	cursor: var(--cursor-resize-x);
}

.split-grip::after {
	display: block;
	flex: none;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--grip);
	content: "";
	transition: background-color var(--dur-quick) var(--ease);
}

.split-grip.is-x::after {
	width: 3px;
	height: 40px;
}

.split-grip:hover::after {
	background: var(--grip-hot);
}

.split-grip.is-dragging::after,
.split-grip:focus-visible::after {
	background: var(--grip-on);
}

/* a finger: more to catch, the same pill */
@media (pointer: coarse) {
	.split-grip {
		--split-grip-hit: 17px;
	}
}

/* while one is dragged the arrows stay, over whatever the pointer has run ahead onto */
:root.is-splitting,
:root.is-splitting * {
	cursor: var(--split-cursor) !important;
}