/*
 * The kit's helpers (0.29.0): utilities consumed only through @apply, never printed in markup. The focus ring, the
 * control skin, and the button in its pieces, so a product's own class can take the recipe while its markup still
 * carries the old name (adopt/rooster-one.css, UI-PLAN Phase 3). Imported before the adoption layer and the kit, so
 * every recipe and every alias can @apply them.
 */

@utility ra-ring {
	@apply outline-2 outline-offset-2 outline-accent;
}

/* A field's boundary at 3:1 (0.66.0, Rooster One's request 43, WCAG 1.4.11): the control token, as a choice's. */
@utility ra-control {
	@apply box-border min-h-8 rounded-(--ra-shape-control) border border-control bg-background px-2.5 py-1 font-[inherit] text-sm leading-[1.4] font-normal text-foreground shadow-none;
}

@utility ra-control-focus {
	@apply border-accent shadow-(--ra-shadow-focus);
	outline: 0;
}

/* The select (0.45.4, Metronic's kt-select pattern in our own code): the native select and the combobox the script
   makes of it wear this one recipe, so the box, the line of text and the chevron are the same before and after the
   script runs. One line, cut with an ellipsis; the chevron a background image at the end. */
@utility ra-select {
	@apply ra-control h-8 cursor-pointer appearance-none truncate py-0 ps-2.5 pe-8 leading-[30px];
	background-image: var(--ra-chevron);
	background-repeat: no-repeat;
	background-position: right 0.625rem center;
	background-size: 1rem;

	@variant rtl {
		background-position: left 0.625rem center;
	}
}

/* The button: the base is the outline button; a variant adds its fill, a size its metrics. The states (hover,
   focus, disabled) stay on the recipes, so each class names its own. */
/* box-border: the kit has no preflight, and a link or a div would size its content box (0.44.1). */
@utility ra-button {
	@apply box-border inline-flex min-h-8 cursor-pointer whitespace-nowrap items-center justify-center gap-1.5 rounded-(--ra-shape-button) border border-input bg-background px-3 py-1 font-[inherit] text-sm leading-[1.3] font-semibold text-foreground no-underline;
}

@utility ra-button-primary {
	@apply border-accent bg-accent text-accent-on;
}

@utility ra-button-secondary {
	@apply border-transparent bg-muted text-foreground;
}

@utility ra-button-ghost {
	@apply border-transparent bg-transparent text-secondary-foreground;
}

@utility ra-button-destructive {
	@apply border-destructive bg-destructive text-white;
}

@utility ra-button-mono {
	@apply border-foreground bg-foreground text-background;
}

@utility ra-button-sm {
	@apply min-h-7 px-2.5 text-xs;
}

@utility ra-button-lg {
	@apply min-h-10 px-4.5 py-2 text-base;
}

/* The card (0.58.0, Metronic note F1): one skin written once, which the card recipe, core's postbox and card under the
   adoption layer, the products' aliases and the Home's blocks all apply. The section's colour on the 3 px top: the
   element's section, else the screen's, else the product's (the card document's step 0). The flex column stays on
   the kit's own card (F3): core's `.card` holds bare paragraphs, whose margins must keep collapsing. */
@utility ra-card {
	@apply rounded-(--ra-shape-card) border border-border border-t-[3px] bg-card text-card-foreground shadow-sm;
	border-top-color: var(--ra-sec, var(--ra-screen-sec, var(--ra-product)));
}

/* One head height (F2): 52 px whatever it holds (the 32 px button and 10 px each side), its tools wrapping under the
   title in a narrow card. The wash is the section's, none on a warm section (UI-Final-Review FR10; Colour::wash()). */
@utility ra-card-head {
	@apply box-border flex min-h-13 flex-wrap items-center gap-x-2.5 gap-y-2 border-b border-border px-4.5 py-2;
	background: var(
		--ra-sec-wash,
		var(--ra-screen-wash, color-mix(in srgb, var(--ra-product) 7%, var(--ra-background)))
	);
}

@utility ra-card-body {
	@apply px-4.5 pt-3.5 pb-4.5;
}

@utility ra-card-foot {
	@apply flex flex-wrap items-center gap-2.5 border-t border-border px-4.5 py-3 text-sm text-secondary-foreground;
}

/* The badge and the chip (0.30.0, D3b): the base reads the tone properties a tone utility sets (the kit's `is-*`
   classes apply the same utilities), so a product's class takes the recipe and a tone while its markup keeps its
   old names (adopt/rooster-one.css). */
@utility ra-badge {
	@apply box-border inline-flex items-center gap-1 rounded-(--ra-shape-badge) border px-1.5 py-0.5 align-middle text-xs leading-[1.3] font-semibold whitespace-nowrap;
	color: var(--ra-tone-fg, var(--ra-foreground));
	background: var(--ra-tone-soft, var(--ra-muted));
	border-color: color-mix(in srgb, var(--ra-tone, var(--ra-border)) 25%, transparent);
}

/* 6px each side (0.56.1; 4px read cramped, the owner): Metronic's small badge. */
@utility ra-badge-sm {
	@apply px-1.5 py-0 text-2xs;
}

/* As tall as a small button (28 px): the head where badges sit beside buttons (the owner, 26 Oct 2026). */
@utility ra-badge-lg {
	@apply min-h-7 px-2 py-1;
}

@utility ra-badge-solid {
	color: var(--ra-tone-on, white);
	background: var(--ra-tone, var(--ra-foreground));
	border-color: var(--ra-tone, var(--ra-foreground));
}

/* The chip: the badge's outline on the pill shape, on the page's background; a remove button sits in its end padding. */
@utility ra-chip {
	@apply rounded-(--ra-shape-chip) bg-background px-3 py-1;
	border-color: var(--ra-input);
}

@utility ra-chip-remove {
	@apply ms-0.5 inline-flex cursor-pointer rounded-full border-0 bg-transparent p-0.5 leading-[0] text-secondary-foreground;
}

/* The tones, as the custom properties the tinted pieces read (badges, chips, notices, progress, stats, charts). */
@utility ra-tone-primary {
	--ra-tone: var(--ra-accent);
	--ra-tone-soft: color-mix(in srgb, var(--ra-accent) 12%, var(--ra-background));
	--ra-tone-fg: color-mix(
		in srgb,
		var(--ra-accent) 85%,
		var(--ra-foreground)
	); /* the ink on its own wash: a step towards the text colour (axe) */
	--ra-tone-on: var(--ra-accent-on);
}

@utility ra-tone-success {
	--ra-tone: var(--ra-success);
	--ra-tone-soft: var(--ra-success-soft);
	--ra-tone-fg: var(--ra-success-foreground);
	--ra-tone-on: var(--ra-success-on);
}

@utility ra-tone-warning {
	--ra-tone: var(--ra-warning);
	--ra-tone-soft: var(--ra-warning-soft);
	--ra-tone-fg: var(--ra-warning-soft-foreground);
	--ra-tone-on: var(--ra-warning-on);
}

@utility ra-tone-destructive {
	--ra-tone: var(--ra-destructive);
	--ra-tone-soft: color-mix(in srgb, var(--ra-destructive) 10%, var(--ra-background));
	--ra-tone-fg: var(--ra-destructive-foreground);
	--ra-tone-on: var(--ra-destructive-on);
}

@utility ra-tone-info {
	--ra-tone: var(--ra-info);
	--ra-tone-soft: var(--ra-info-soft);
	--ra-tone-fg: light-dark(
		color-mix(in srgb, var(--ra-info) 75%, black),
		color-mix(in srgb, var(--ra-info) 60%, white)
	);
	--ra-tone-on: var(--ra-info-on);
}

@utility ra-tone-mono {
	--ra-tone: var(--ra-muted-foreground);
	--ra-tone-soft: var(--ra-muted);
	--ra-tone-fg: var(--ra-secondary-foreground);
	--ra-tone-on: var(--ra-foreground); /* the text colour reads on the grey fill in both schemes */
}

/* The pick field, the dialog and the picker's pieces (0.32.0, D3c): the recipes and Rooster One's picker aliases share
   them (adopt/rooster-one.css: the "Browse / choose" fields and the modal One's scripts build). */
@utility ra-pickfield {
	@apply box-border flex h-9 w-full max-w-[40rem] items-center gap-1.5 overflow-hidden rounded-md border border-input bg-background ps-2 pe-1;
}

@utility ra-dialog {
	@apply w-[min(480px,calc(100vw-32px))] rounded-(--ra-shape-dialog) border border-border bg-card p-0 text-card-foreground shadow-modal;
}

@utility ra-dialog-header {
	@apply px-5 pt-4 pb-0;
}

@utility ra-dialog-body {
	@apply px-5 py-2.5 text-sm text-secondary-foreground;
}

@utility ra-dialog-footer {
	@apply flex justify-end gap-2 px-5 pt-2 pb-4;
}

@utility ra-dialog-x {
	@apply absolute end-3 top-3 inline-flex cursor-pointer rounded-md border-0 bg-transparent p-1 leading-[0] text-secondary-foreground;
}

@utility ra-picker-search {
	@apply border-b border-border px-5 pt-3 pb-3;
}

@utility ra-picker-body {
	@apply max-h-[56vh] overflow-y-auto px-2 py-1 scrollbar-thin scrollbar-gutter-stable;
}

@utility ra-picker-row {
	@apply flex items-center gap-2 rounded-md px-2 py-2 text-sm;
}

@utility ra-picker-check {
	@apply flex min-w-0 flex-auto cursor-pointer items-center gap-2.5;
}

@utility ra-picker-toggle {
	@apply inline-flex size-6 flex-none cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent text-muted-foreground;
}

@utility ra-picker-children {
	@apply ms-8 border-s border-border ps-1;
}

@utility ra-picker-foot {
	@apply items-center border-t border-border bg-muted/40;
}

@utility ra-picker-selected {
	@apply me-auto text-sm text-secondary-foreground;
}

/* The notice and the toast (0.33.0, D3d): the recipes, core's notices under the adoption layer and Rooster One's flash
   and callout aliases share them. A notice reads the tone properties. */
@utility ra-notice {
	@apply relative mb-5 flex gap-3 rounded-lg border px-4 py-3 text-sm leading-normal text-foreground;
	background: var(--ra-tone-soft, var(--ra-muted));
	border-color: color-mix(in srgb, var(--ra-tone, var(--ra-border)) 35%, transparent);
	border-inline-start-width: 4px;
	border-inline-start-color: var(--ra-tone, var(--ra-muted-foreground));
}

@utility ra-notice-inline {
	@apply mb-3 py-2.5;
}

@utility ra-notice-x {
	@apply inline-flex h-7 w-7 flex-none cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-secondary-foreground;
}

@utility ra-toasts {
	@apply pointer-events-none fixed end-5 bottom-5 z-(--ra-z-toast) flex w-[min(24rem,calc(100vw-40px))] flex-col gap-2;
}

@utility ra-toast {
	@apply pointer-events-auto flex items-start gap-2.5 rounded-lg border bg-card px-3.5 py-2.5 text-sm text-foreground shadow-pop;
	border-color: color-mix(in srgb, var(--ra-tone, var(--ra-border)) 40%, var(--ra-border));
	border-inline-start-width: 4px;
	border-inline-start-color: var(--ra-tone, var(--ra-accent));
}

/* The table (0.35.0, D3f): the kit's table, core's widefat under the adoption layer and Rooster One's table engine
   share the table, its head cell and its body cell. */
@utility ra-table {
	@apply w-full border-separate border-spacing-0 text-sm;
}

@utility ra-table-th {
	@apply border-b border-border bg-muted px-3 py-2 text-start text-xs font-semibold tracking-[0.04em] whitespace-nowrap text-secondary-foreground uppercase;
}

@utility ra-table-td {
	@apply border-b border-border px-3 py-2.5 align-middle wrap-anywhere;
}

/* The block button (0.42.0, UI-PLAN Phase 4): a button that fills its row (the LMS's `block`, One's `--block`). */
@utility ra-button-block {
	@apply flex w-full;
}

/* The empty state (0.42.0, Phase 4): the kit's recipe and the LMS's React kit share its pieces. */
@utility ra-empty {
	@apply flex flex-col items-center gap-1.5 px-5 py-10 text-center;
}

@utility ra-empty-icon {
	@apply mb-1 inline-flex rounded-full bg-muted p-3 text-muted-foreground;
}

@utility ra-empty-title {
	@apply m-0 text-base font-semibold text-foreground;
}

@utility ra-empty-text {
	@apply m-0 max-w-[36rem] text-sm text-secondary-foreground;
}

@utility ra-empty-action {
	@apply mt-2;
}

/* The choice controls (0.43.0): one checkbox and one radio on every chrome screen, core's own glyphs off. The box is
   the kit's control; checked, it fills with the product ink and draws its mark in white. */
@utility ra-choice {
	@apply m-0 inline-block size-4 shrink-0 cursor-pointer appearance-none rounded-(--ra-shape-control) border border-control bg-background bg-center bg-no-repeat align-top shadow-none;
	background-size: 100% 100%;
	transition:
		background-color var(--ra-dur-fast) var(--ra-ease),
		border-color var(--ra-dur-fast) var(--ra-ease);
}

@utility ra-choice-on {
	@apply border-accent bg-accent;
}