/* ==========================================================================
 * # Form
 * --------------------------------------------------------------------------
 * Classes: .lbl .opt  .in (.focus .err)  textarea.in  .sel  .help .errtxt
 *          .money  .seg  .checkline  .radio
 *
 * Labels sit above fields. 44px targets. The mock state classes (.focus .err
 * .on) have real-state twins so live forms need no extra classes:
 *
 *   .in.focus          .in:focus-visible
 *   .in.err            .in[aria-invalid="true"]
 *   .seg button.on     .seg button[aria-pressed="true"]
 *   .radio.on          .radio:has(input:checked)
 *
 * Markup:
 *   <label class="lbl" for="x">Label <span class="opt">(optional)</span></label>
 *   <input id="x" class="in" type="text">
 *   <div class="sel"><select class="in">…</select> {chevron-down icon}</div>
 *   <div class="money"><span aria-hidden="true">₹</span><input type="text" inputmode="numeric"></div>
 *   <div class="seg" role="group"><button type="button" aria-pressed="true">…</button></div>
 * ========================================================================== */

.lbl {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
}

.opt {
	font-weight: 400;
	color: var(--muted);
}

.in {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--field);
	border-radius: 10px;
	padding: 0 12px;
	font: inherit;
	font-size: 16px;
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;

	&::placeholder {
		color: var(--muted);
		opacity: 1;
	}

	&.focus,
	&:focus-visible {
		border-color: var(--pri);
		box-shadow: 0 0 0 3px var(--ring);
		outline: 0;
	}

	&.err,
	&[aria-invalid="true"] {
		border-color: var(--danger);
		box-shadow: 0 0 0 3px var(--danger-ring);
	}
}

textarea.in {
	min-height: 96px;
	padding: 10px 12px;
	display: block;
	resize: vertical;
}

.sel {
	position: relative;

	& select {
		appearance: none;
		-webkit-appearance: none;
		padding-right: 40px;
		cursor: pointer;
	}

	& svg {
		position: absolute;
		right: 12px;
		top: 50%;
		margin-top: -10px;
		pointer-events: none;
		color: var(--muted);
	}
}

.help {
	font-size: 13px;
	color: var(--muted);
	margin-top: 6px;
}

.errtxt {
	font-size: 13px;
	color: var(--danger);
	margin-top: 6px;
	font-weight: 600;
	display: flex;
	gap: 6px;
	align-items: flex-start;

	/* the leading alert icon */
	& svg {
		flex: none;
		margin-top: 1px;
	}
}

.money {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--field);
	border-radius: 10px;
	overflow: hidden;
	background: var(--surface);

	& span {
		padding: 0 12px;
		display: flex;
		align-items: center;
		background: var(--panel);
		border-right: 1px solid var(--line-2);
		font-weight: 600;
		color: var(--muted);
	}

	& input {
		border: 0;
		flex: 1;
		min-height: 46px;
		padding: 0 12px;
		font: inherit;
		font-size: 16px;
		min-width: 0;
		background: transparent;
		color: var(--ink);

		/* the wrapper shows the focus ring, not the input inside its clipped box */
		&:focus-visible {
			outline: 0;
			box-shadow: none;
		}
	}

	&:focus-within {
		border-color: var(--pri);
		box-shadow: 0 0 0 3px var(--ring);
	}

	&:has(input[aria-invalid="true"]) {
		border-color: var(--danger);
		box-shadow: 0 0 0 3px var(--danger-ring);
	}
}

.seg {
	display: flex;
	gap: 2px;
	padding: 3px;
	border-radius: 11px;
	background: var(--panel);
	border: 1px solid var(--line);

	& button {
		flex: 1;
		min-height: 38px;
		border: 0;
		border-radius: 8px;
		background: transparent;
		font: inherit;
		font-size: 14px;
		font-weight: 500;
		color: var(--muted);
		cursor: pointer;
		padding: 0 10px;
		white-space: nowrap;
		/* Slice 46: the reset's `all: unset` drops the browser's centred button text; the design centres it */
		text-align: center;

		&:hover {
			color: var(--ink);
		}

		&.on,
		&[aria-pressed="true"] {
			background: var(--surface);
			color: var(--pri);
			font-weight: 600;
			box-shadow: 0 1px 3px var(--shadow), 0 0 0 1px var(--line-2);
		}
	}
}

.checkline {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-weight: 600;
	cursor: pointer;

	& input {
		width: 20px;
		height: 20px;
		accent-color: var(--pri);
		flex: none;
		margin: 0;
	}
}

.radio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--line-2);
	border-radius: 12px;
	cursor: pointer;
	background: var(--surface);

	&.on,
	&:has(input:checked) {
		border-color: var(--pri);
		background: var(--pri-tint);
		box-shadow: 0 0 0 1px var(--pri);
	}

	& input {
		width: 20px;
		height: 20px;
		accent-color: var(--pri);
		margin: 1px 0 0;
		flex: none;
	}
}