/*
 * The field patterns (0.59.0, R2 of the UI recommendations; includes/Fields.php and the options of Ui's field builders):
 * the widths of the sizing scale, the colour field, the segmented switch, the compound row, the media picker, the
 * ordered list, the "current choice, Change in <owner>" row, the secret field and a disabled control's reason. Ported
 * from the showcase's prototype (tools/screen-analysis/showcase/after/sa-proposed.css, its fields section), on the
 * tokens. Imported by chrome.css after kit.css, so a width here wins over the adoption layer's (0,2,1) at equal weight.
 */

/* ── Widths (the semantic sizing scale, UI-Semantic-based recommendations §2): xs 6rem (a number of up to four digits,
   a size in px, a percentage, a duration: the unit after it), short 10rem, medium 20rem; a select or a combobox takes
   the same three (by default it is as wide as its longest option, at least 10rem). ─────────────────────────────── */
/* A width, not a cap: beside its unit, in the unit's shrink-to-fit box, a capped 100% would take the input's own
   (smaller) intrinsic width. */
.rooster-admin input.rooster-admin-input--xs {
	@apply w-24 max-w-full;
}

.rooster-admin select.rooster-admin-select--xs {
	@apply w-24 max-w-full min-w-0;
}

.rooster-admin select.rooster-admin-select--short {
	@apply w-40 max-w-full min-w-0;
}

.rooster-admin select.rooster-admin-select--medium {
	@apply w-80 max-w-full min-w-0;
}

/* The combobox the script makes of a multiple or a server-searched select keeps the stylesheet's width (a single one
   takes its select's measured box): the select stays in the page just before it. */
.rooster-admin-select--xs + .rooster-admin-combo {
	@apply w-24 max-w-full min-w-0;
}

.rooster-admin-select--short + .rooster-admin-combo {
	@apply w-40 max-w-full min-w-0;
}

.rooster-admin-select--medium + .rooster-admin-combo {
	@apply w-80 max-w-full min-w-0;
}

/* ── A disabled control's reason (FR7): visible text right after the control, kept in Compact. ─────────────────── */
.rooster-admin-reason {
	@apply m-0 text-xs leading-normal text-secondary-foreground;
}

span.rooster-admin-reason {
	@apply self-center;
}

.rooster-admin-field__control > .rooster-admin-reason {
	@apply mt-1;
}

/* ── The range (0.78.0): the browser's slider in the section's accent, its value beside it, 16rem with the value. ── */
.rooster-admin-range {
	@apply inline-flex max-w-full items-center gap-3 align-middle;
}

.rooster-admin .rooster-admin-range__input {
	@apply m-0 h-5 w-52 max-w-full flex-auto cursor-pointer bg-transparent p-0;
	accent-color: var(--ra-accent);

	@variant focus-visible {
		@apply ra-ring rounded-full;
	}

	@variant disabled {
		@apply cursor-not-allowed opacity-60;
	}
}

.rooster-admin-range__value {
	@apply min-w-10 flex-none text-end text-sm font-medium text-foreground tabular-nums;
}

/* ── The colour field: the swatch and its hex, 10rem in all, one look everywhere. ─────────────────────────────── */
.rooster-admin-colour {
	@apply inline-flex max-w-full items-center gap-1.5 align-middle;
}

.rooster-admin .rooster-admin-colour__swatch {
	@apply m-0 box-border size-8 flex-none cursor-pointer rounded-(--ra-shape-control) border border-control bg-background p-0.5;

	@variant focus-visible {
		@apply ra-ring;
	}

	@variant disabled {
		@apply cursor-not-allowed opacity-60;
	}
}

.rooster-admin-colour__swatch::-webkit-color-swatch-wrapper {
	@apply p-0;
}

.rooster-admin-colour__swatch::-webkit-color-swatch {
	@apply rounded-sm border-0;
}

.rooster-admin-colour__swatch::-moz-color-swatch {
	@apply rounded-sm border-0;
}

/* An empty value is the inherited one: the swatch shows the default, faded. */
.rooster-admin-colour.is-empty > .rooster-admin-colour__swatch {
	@apply opacity-60;
}

.rooster-admin input.rooster-admin-colour__hex {
	@apply w-30 max-w-30;
}

/* A colour with alpha (0.63.1): the chip shows the colour over a checkerboard (a transparent one reads as one), the
   browser's picker laid on it unseen; the text is wide enough for rgba(255, 255, 255, 0.85). */
.rooster-admin-colour__chip {
	@apply relative box-border inline-block size-8 flex-none overflow-hidden rounded-(--ra-shape-control) border border-control;
	background: repeating-conic-gradient(var(--ra-input) 0 25%, var(--ra-background) 0 50%) 0 0 / 0.5rem 0.5rem;

	&:has(:focus-visible) {
		@apply ra-ring;
	}

	&:has(:disabled) {
		@apply opacity-60;
	}
}

.rooster-admin-colour__paint {
	@apply absolute inset-0 block size-full;
}

.rooster-admin-colour.is-alpha .rooster-admin-colour__swatch {
	@apply absolute inset-0 size-full opacity-0;
}

.rooster-admin-colour.is-alpha.is-empty .rooster-admin-colour__paint {
	@apply opacity-60;
}

.rooster-admin-colour.is-alpha > input.rooster-admin-colour__hex {
	@apply w-56 max-w-full;
}

/* ── The segmented switch (FR9, FR10): radios drawn as segments on the one segmented recipe (chrome.css "Form
   pieces"), the chosen one on the section's ink; no option wraps; radios on one line when it does not fit (the
   script's `is-radios`, or an option too long to be a segment). ───────────────────────────────────────────────── */
.rooster-admin-segmented.is-choice {
	@apply max-w-full flex-nowrap align-middle;
}

.rooster-admin-segmented__option {
	@apply m-0 flex cursor-pointer items-stretch;
}

.rooster-admin-segmented__option + .rooster-admin-segmented__option {
	@apply border-s border-input;
}

/* The radio itself is the segment's: out of sight, still focused and checked by the keyboard (the kit's radio,
   0,2,1, is outweighed by order). */
:where(.rooster-admin-segmented:not(.is-radios)) .rooster-admin-segmented__option > input[type="radio"] {
	@apply pointer-events-none absolute m-0 size-px min-w-0 appearance-none overflow-hidden border-0 p-0 opacity-0;
}

.rooster-admin-segmented__text {
	@apply inline-flex min-h-7.5 items-center px-3 text-sm leading-none font-medium whitespace-nowrap text-secondary-foreground;
}

:where(.rooster-admin-segmented:not(.is-radios))
	.rooster-admin-segmented__option:hover
	> .rooster-admin-segmented__text {
	@apply bg-muted text-foreground;
}

:where(.rooster-admin-segmented:not(.is-radios))
	.rooster-admin-segmented__option
	> :checked
	+ .rooster-admin-segmented__text {
	@apply bg-sec-ink text-sec-on;
}

:where(.rooster-admin-segmented:not(.is-radios))
	.rooster-admin-segmented__option
	> :focus-visible
	+ .rooster-admin-segmented__text {
	@apply ra-ring -outline-offset-2;
}

.rooster-admin-segmented__option > :disabled + .rooster-admin-segmented__text {
	@apply cursor-not-allowed opacity-50;
}

/* The fallback: the kit's radios on one line, wrapping between options, never inside one. */
.rooster-admin-segmented.is-radios {
	@apply flex-wrap gap-x-4 gap-y-1 overflow-visible rounded-none border-0 bg-transparent;
}

.rooster-admin-segmented.is-radios > .rooster-admin-segmented__option {
	@apply items-center gap-2 border-0 py-1;
}

.rooster-admin-segmented.is-radios .rooster-admin-segmented__text {
	@apply min-h-0 px-0 font-normal text-foreground;
}

/* ── The compound row's control: its parts side by side, each sub-label over its control, the joiner on the
   controls' line; the parts wrap in a narrow card. ──────────────────────────────────────────────────────────── */
.rooster-admin-compound {
	@apply inline-flex max-w-full flex-wrap items-end gap-x-3 gap-y-2 align-top;
}

.rooster-admin-compound__part {
	@apply inline-flex min-w-0 flex-col gap-1;
}

/* In a part an input's width is a width, not a cap (0.62.1): the part shrinks to its control, so a capped 100% took the
   input's own 169 px. Short 10rem, medium 20rem, xs 6rem; a text without a width is medium; a date, a time or a number
   without one keeps its own. */
.rooster-admin-compound__part
	.rooster-admin-input:is(
		:not([type]),
		[type="text"],
		[type="email"],
		[type="url"],
		[type="tel"],
		[type="search"],
		[type="password"]
	),
.rooster-admin-compound__part .rooster-admin-input--medium {
	@apply w-80 max-w-full;
}

.rooster-admin-compound__part .rooster-admin-input.rooster-admin-input--short {
	@apply w-40 max-w-full;
}

.rooster-admin-compound__part .rooster-admin-input.rooster-admin-input--xs {
	@apply w-24 max-w-full;
}

.rooster-admin-compound__label {
	@apply m-0 text-xs leading-tight font-normal text-secondary-foreground;
}

.rooster-admin-compound__join {
	@apply inline-flex h-8 items-center text-sm text-secondary-foreground;
}

/* ── The media picker: thumbnails that sort (by their grip) and remove, Choose under them. ───────────────────── */
.rooster-admin-media {
	@apply flex flex-col items-start gap-2;
}

.rooster-admin-media__list {
	@apply m-0 flex list-none flex-wrap gap-2 p-0;
}

.rooster-admin-media__item {
	@apply m-0 inline-flex items-center gap-2 rounded-md border border-border bg-card py-1 ps-2 pe-1;
}

.rooster-admin-media__thumb {
	@apply block h-7 w-auto max-w-16 flex-none object-contain;
}

.rooster-admin-media__thumb.is-empty {
	@apply inline-grid w-10 place-items-center rounded-sm bg-muted text-secondary-foreground;
}

.rooster-admin-media__label {
	@apply inline-flex min-w-0 flex-col text-sm leading-tight;
}

.rooster-admin-media__note {
	@apply text-2xs text-secondary-foreground;
}

.rooster-admin-media__empty {
	@apply m-0 text-sm text-secondary-foreground;
}

/* ── The ordered list: rows moved by their grip (assets/board.js), each with its controls at their natural width; as
   wide as its rows need, never the card's. ─────────────────────────────────────────────────────────────────── */
.rooster-admin-olist {
	@apply flex max-w-184 flex-col gap-2.5;
}

.rooster-admin-olist__list {
	@apply m-0 flex list-none flex-col gap-1.5 p-0;
}

.rooster-admin-olist__row {
	@apply m-0 flex min-h-10 flex-wrap items-center gap-x-2.5 gap-y-1 rounded-md border border-border bg-card py-1 ps-2 pe-2.5;
}

.rooster-admin-olist__row.is-locked {
	@apply bg-muted;
}

.rooster-admin-olist__label {
	@apply min-w-0 flex-auto text-sm font-medium text-foreground;
}

.rooster-admin-olist__end {
	@apply ms-auto inline-flex flex-none flex-wrap items-center gap-2;
}

.rooster-admin .rooster-admin-olist__end select.rooster-admin-select {
	@apply w-auto min-w-0;
}

.rooster-admin-olist__foot {
	@apply flex flex-wrap items-center gap-3;
}

.rooster-admin-olist__status {
	@apply text-xs text-secondary-foreground;
}

.rooster-admin-olist__status.is-failed {
	@apply text-destructive-foreground;
}

/* A locked row's lock in the grip's place: its reason in the tip. */
.rooster-admin-grip.is-locked {
	@apply cursor-help;
}

[data-ra-item].is-dragging {
	@apply opacity-45;
}

[data-ra-item].is-moved {
	box-shadow: 0 0 0 2px var(--ra-ring);
	transition: box-shadow var(--ra-dur-slow) var(--ra-ease);
}

/* ── A value another card owns (FR18): the current choice, then "Change in <owner>" linking the owner. ─────────── */
.rooster-admin-change {
	@apply inline-flex max-w-full flex-wrap items-baseline gap-x-1.5 text-sm;
}

.rooster-admin-change__sep {
	@apply text-secondary-foreground;
}

/* Its link in the chrome's link colour, which reads in both schemes (0.80.1): the page's rule for plain links leaves
   the library's own classes out, so WordPress's blue stayed on the dark scheme (3.54:1 on its card). */
a.rooster-admin-change__link {
	@apply text-link;
}

/* ── A secret (FR18): masked, monospace, 40rem, Replace beside it. ────────────────────────────────────────────── */
.rooster-admin-secret {
	@apply inline-flex w-full max-w-160 items-center gap-2;
}

.rooster-admin .rooster-admin-secret > .rooster-admin-input {
	@apply min-w-0 flex-auto;
}