/* Design standard controls, messages and overlays: buttons, the search box, fields, checkboxes, the
   segmented control, the alert, the toast, the dialog and the divider.
   A button, tab or segment label never wraps (a field's label may). Phone controls are 40 px tall, desktop 36 px.
   A bare <button>, <input>, <select> or <textarea> looks the same as its class (:where adds no weight). */

.btn,
:where(button, input[type="submit"], input[type="button"], input[type="reset"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-block-size: var(--control);
	padding: 0 var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--duration), border-color var(--duration), color var(--duration);
}

.btn:hover,
:where(button, input[type="submit"], input[type="button"], input[type="reset"]):hover {
	background: var(--surface-hover);
	text-decoration: none;
}

.btn-primary {
	border-color: transparent;
	background: var(--ink);
	color: var(--on-ink);
}

.btn-primary:hover {
	background: color-mix(in srgb, var(--ink) 86%, var(--bg));
}

.btn-ghost {
	border-color: transparent;
	background: transparent;
}

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

.btn-icon {
	inline-size: var(--control);
	padding: 0;
}

.btn-block {
	inline-size: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"],
:where(button, input[type="submit"], input[type="button"], input[type="reset"]):is(:disabled, [aria-disabled="true"]) {
	opacity: 0.5;
	cursor: not-allowed;
}

/* A row's action, as a link or a button: accent text, no frame, full control height. */
.link-action {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--control);
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font-weight: var(--weight-medium);
	white-space: nowrap;
	cursor: pointer;
}

.link-action:hover {
	background: none;
	text-decoration: underline;
}

.link-action:is(:disabled, [aria-disabled="true"]) {
	cursor: not-allowed;
}

/* Choices laid out as a wrapping grid (time slots, sizes): btn buttons, the chosen one aria-pressed. */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.chips > [aria-pressed="true"] {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--on-ink);
}

.search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	inline-size: 240px;
	max-inline-size: 100%;
	min-block-size: var(--control);
	padding: 0 var(--space-3);
	border: 1px solid var(--control-border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text-secondary);
}

.search input {
	flex: 1;
	min-inline-size: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--text);
}

.search:focus-within {
	border-color: var(--accent);
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.label {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.hint {
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

.error {
	color: var(--danger);
	font-size: var(--text-sm);
}

.input,
.select,
.textarea,
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"]), select, textarea) {
	inline-size: 100%;
	min-block-size: var(--control);
	padding: 0 var(--space-3);
	border: 1px solid var(--control-border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	font-size: var(--text-md);
	transition: border-color var(--duration);
}

.textarea,
:where(textarea) {
	min-block-size: 96px;
	padding-block: var(--space-2);
	resize: vertical;
}

.select,
:where(select) {
	appearance: none;
	padding-inline-end: var(--space-10);
	background-image: url("select.svg");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.select:dir(rtl),
:where(select):dir(rtl) {
	background-position: left 12px center;
}

.input::placeholder,
.textarea::placeholder,
.search input::placeholder,
:where(input, textarea)::placeholder {
	color: var(--text-secondary);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
	border-color: var(--accent);
	outline: 1px solid var(--accent);
	outline-offset: 0;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"],
:where(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--danger);
}

input[type="checkbox"],
input[type="radio"] {
	inline-size: 16px;
	block-size: 16px;
	margin: 0;
	accent-color: var(--accent);
}

.check {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-block-size: var(--control);
}

.segmented {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg);
}

.segmented > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 28px;
	padding: 0 var(--space-3);
	border: 0;
	border-radius: var(--radius-xs);
	background: transparent;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.segmented > :is(:disabled, [aria-disabled="true"]) {
	cursor: not-allowed;
}

.segmented > [aria-selected="true"],
.segmented > [aria-current="page"],
.segmented > [aria-pressed="true"] {
	background: var(--surface);
	color: var(--text);
	box-shadow: 0 0 0 1px var(--border);
}

.alert {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	font-size: var(--text-sm);
}

.alert-danger {
	border-color: var(--danger-bg);
	background: var(--danger-bg);
}

.alert-success {
	border-color: var(--success-bg);
	background: var(--success-bg);
}

.alert-danger .icon {
	color: var(--danger);
}

.alert-success .icon {
	color: var(--success);
}

.toast {
	position: fixed;
	inset-inline: var(--space-4);
	inset-block-end: calc(var(--bar) + var(--space-4) + env(safe-area-inset-bottom));
	z-index: 40;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	max-inline-size: 420px;
	margin-inline: auto;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--ink);
	color: var(--on-ink);
	font-size: var(--text-sm);
}

.dialog {
	inline-size: min(100% - var(--space-8), 480px);
	padding: var(--space-6);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--text);
}

.dialog::backdrop {
	background: var(--scrim);
}

.divider {
	block-size: 1px;
	margin: 0;
	border: 0;
	background: var(--border);
}

@media (max-width: 760px) {
	.input,
	.select,
	.textarea,
	.search input {
		font-size: var(--text-lg);
	}

	.segmented > * {
		min-block-size: 32px;
	}
}

@media (min-width: 761px) {
	.toast {
		inset-block-end: var(--space-6);
	}
}