/*
 * The adoption layer (PLAN.md section 11, A2.3): under `.rooster-admin-adopt` on a page's wrapper, WordPress's own
 * markup takes the chrome's look without an HTML change: the notices, the tables (`.widefat`), the buttons
 * (`.button`, `-primary`, `-small`, `-link-delete`), the controls (select, text, number, search, url, email,
 * textarea), `code` chips, descriptions and labels. Every selector is scoped to the wrapper, and the specificity
 * equals core's (`.wp-core-ui .button`), which this stylesheet follows in load order and so wins.
 */

/* Core's notices (0.33.0, D3d): the kit's notice, a flavour on a tone, the inline form inside a card, the dismiss button
   as the kit's. Block, not flex: core's notice holds paragraphs, not an icon and a body. */
.rooster-admin-adopt .notice {
	@apply ra-notice ra-tone-mono mx-0 mt-0 block shadow-none;
}

.rooster-admin-adopt .notice-info {
	@apply ra-tone-info;
}

.rooster-admin-adopt .notice-success {
	@apply ra-tone-success;
}

.rooster-admin-adopt .notice-warning {
	@apply ra-tone-warning;
}

.rooster-admin-adopt .notice-error {
	@apply ra-tone-destructive;
}

.rooster-admin-adopt .notice.inline,
.rooster-admin-adopt .notice.notice-alt {
	@apply ra-notice-inline;
}

.rooster-admin-adopt .notice p {
	@apply m-0 p-0 text-inherit; /* core's common.css paints .notice p near-black: the notice's colour instead, the dark washes read */
}

.rooster-admin-adopt .notice p + p {
	@apply mt-1;
}

.rooster-admin-adopt .notice.is-dismissible {
	@apply pe-11;
}

.rooster-admin-adopt .notice-dismiss {
	@apply ra-notice-x absolute end-2 top-2 m-0 p-0;

	@variant hover {
		@apply bg-background text-foreground;
	}

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

.rooster-admin-adopt .notice-dismiss::before {
	@apply text-inherit;
}

.rooster-admin-adopt > p,
.rooster-admin-adopt .rooster-admin-card__body > p {
	@apply text-sm leading-normal text-secondary-foreground;
}

.rooster-admin-adopt h2:not(.rooster-admin-card__title) {
	@apply mt-6 mb-2 text-lg font-semibold text-foreground;
}

/* A row of controls (a form that lays its fields side by side). */
.rooster-admin-row {
	@apply flex flex-wrap items-center gap-2;
}

/* Tables. */
.rooster-admin-adopt table.widefat {
	@apply w-full border-separate border-spacing-0 overflow-hidden rounded-lg border border-border bg-card text-sm shadow-none;
}

.rooster-admin-adopt table.widefat thead th {
	@apply ra-table-th;
}

.rooster-admin-adopt table.widefat tbody td {
	@apply ra-table-td;
}

.rooster-admin-adopt table.widefat.striped > tbody > tr:nth-child(odd) {
	@apply bg-muted/40;
}

/* WordPress's list tables repeat their column heads in a footer row; the kit's tables head once (0.46.8). A footer
   of a plain widefat table (a form row, a total) stays. */
.rooster-admin-adopt table.wp-list-table > tfoot {
	@apply hidden;
}

.rooster-admin-adopt table.widefat tfoot td {
	@apply border-t-0 bg-background px-3 py-2.5;
}

.rooster-admin-adopt table.widefat tbody tr:last-child td {
	@apply border-b-0;
}

/* Buttons: core's .button in the chrome's recipe; primary in the product's ink; the link-delete as a quiet
   destructive text button. */
.rooster-admin-adopt .button,
.rooster-admin-adopt .button-secondary {
	@apply inline-flex min-h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-input bg-background px-3 text-sm leading-[1.3] font-semibold text-foreground no-underline shadow-none;
}

.rooster-admin-adopt .button:hover,
.rooster-admin-adopt .button-secondary:hover {
	@apply border-input bg-muted text-foreground;
}

.rooster-admin-adopt .button:focus,
.rooster-admin-adopt .button:focus-visible {
	@apply border-input shadow-none outline-2 outline-offset-2 outline-link;
}

.rooster-admin-adopt .button-primary,
.rooster-admin-adopt .button-primary:focus {
	@apply border-accent bg-accent text-white;
}

.rooster-admin-adopt .button-primary:hover {
	border-color: color-mix(in srgb, var(--ra-accent) 88%, black);
	background: color-mix(in srgb, var(--ra-accent) 88%, black);
	color: var(--ra-accent-on);
}

.rooster-admin-adopt .button-small,
.rooster-admin-adopt .button.button-small {
	@apply min-h-7 px-2.5 text-xs;
}

.rooster-admin-adopt .button-link-delete,
.rooster-admin-adopt .button-link-delete:hover {
	@apply border-transparent bg-transparent text-destructive-foreground;
}

/* Controls (Metronic's kt-input and kt-select). A single select is the one select recipe below (0.45.4). */
.rooster-admin-adopt select,
.rooster-admin-adopt textarea,
.rooster-admin-adopt input:not([type]),
.rooster-admin-adopt input[type="text"],
.rooster-admin-adopt input[type="number"],
.rooster-admin-adopt input[type="search"],
.rooster-admin-adopt input[type="url"],
.rooster-admin-adopt input[type="email"],
.rooster-admin-adopt input[type="password"],
.rooster-admin-adopt input[type="tel"],
.rooster-admin-adopt input[type="date"],
.rooster-admin-adopt input[type="time"],
.rooster-admin-adopt input[type="datetime-local"],
.rooster-admin-adopt input[type="month"],
.rooster-admin-adopt input[type="week"] {
	@apply ra-control max-w-full;

	@variant focus {
		@apply ra-control-focus;
	}
}

/* The kit's own controls keep their widths under the adoption layer (0.43.1: the layer's max-w-full outweighed the
   kit's 40rem cap, and a label's input on an adopted page took the whole page). */
.rooster-admin-adopt input.rooster-admin-input,
.rooster-admin-adopt select.rooster-admin-select,
.rooster-admin-adopt textarea.rooster-admin-textarea {
	@apply max-w-[40rem];
}

.rooster-admin-adopt input.rooster-admin-input--medium {
	@apply max-w-80;
}

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

.rooster-admin-adopt select.rooster-admin-select {
	@apply w-auto;
}

/* A date, time, month or week input is as wide as its value, never the column (0.43.0), and as tall as every other
   control (0.46.6). */
.rooster-admin-adopt input[type="date"],
.rooster-admin-adopt input[type="time"],
.rooster-admin-adopt input[type="datetime-local"],
.rooster-admin-adopt input[type="month"],
.rooster-admin-adopt input[type="week"] {
	@apply h-8 w-auto;
}

/* A select sizes itself to its longest option, never past its column. */
.rooster-admin-adopt select {
	@apply w-auto max-w-full;
}

/* A single select is at least 10rem (0.44.1); its look is the one select recipe (kit.css, 0.45.4). */
.rooster-admin-adopt select:not([multiple]) {
	@apply mx-0 min-w-40;
}

.rooster-admin-adopt label {
	@apply text-sm;
}

/* A code in a table cell (an IRI, a key) breaks anywhere rather than widening the table (0.46.6; it was the LRS's). */
.rooster-admin-adopt td code {
	@apply break-all;
}

/* Symmetry (0.37.0, the owner's rule): a label that wraps one control is a two-column field row, the label's text in
   the label column, the control in the control column, so a run of them reads as a form, not as a sentence with boxes
   in it; a checkbox or radio keeps its inline label. A fieldset is a sub-card with its legend as its title; its hint
   paragraph the help text; a details' summary a title. */
.rooster-admin-adopt
	label:has(
		> input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not(
				[type="button"]
			)
	),
.rooster-admin-adopt label:has(> select),
.rooster-admin-adopt label:has(> textarea) {
	@apply my-1 grid grid-cols-[minmax(8rem,var(--ra-label-w))_minmax(0,1fr)] items-center gap-x-4 gap-y-1 text-sm leading-[1.4] font-semibold text-foreground;
}

.rooster-admin-adopt label:has(> input:not([type="checkbox"]):not([type="radio"])) > input,
.rooster-admin-adopt label:has(> select) > select,
.rooster-admin-adopt label:has(> textarea) > textarea {
	@apply justify-self-start;
}

/* A fieldset of such rows is one grid (0.38.0): the labels in one column, the controls aligned in the next at their own
   width, whatever the fieldset's width; the legend, a hint and anything else span both columns. */
.rooster-admin-adopt fieldset:has(> label > input:not([type="checkbox"]):not([type="radio"])),
.rooster-admin-adopt fieldset:has(> label > select),
.rooster-admin-adopt fieldset:has(> label > textarea) {
	@apply grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2;
}

.rooster-admin-adopt
	fieldset:has(> label > input:not([type="checkbox"]):not([type="radio"]))
	> :not(label:has(> input, > select, > textarea)),
.rooster-admin-adopt fieldset:has(> label > select) > :not(label:has(> input, > select, > textarea)),
.rooster-admin-adopt fieldset:has(> label > textarea) > :not(label:has(> input, > select, > textarea)) {
	grid-column: 1 / -1;
}

.rooster-admin-adopt
	fieldset
	> label:has(
		> input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not(
				[type="button"]
			)
	),
.rooster-admin-adopt fieldset > label:has(> select),
.rooster-admin-adopt fieldset > label:has(> textarea) {
	@apply contents text-sm leading-[1.4] font-semibold text-foreground;
}

.rooster-admin-adopt fieldset {
	@apply m-0 min-w-0 rounded-lg border border-border bg-card p-4 text-card-foreground;
}

/* A fieldset whose legend is for screen readers only (WordPress's pattern for a row of radios or checkboxes) groups
   its controls and draws nothing (0.45.2: it read as a box in a form of plain rows). Its controls stack as checks. */
.rooster-admin-adopt fieldset:has(> legend.screen-reader-text) {
	@apply rounded-none border-0 bg-transparent p-0;
}

.rooster-admin-adopt
	fieldset:has(> legend.screen-reader-text)
	> label:has(> input[type="radio"], > input[type="checkbox"]) {
	@apply flex cursor-pointer items-start gap-2 py-1 text-sm leading-[1.4] font-normal;
}

.rooster-admin-adopt fieldset:has(> legend.screen-reader-text) > br {
	display: none;
}

.rooster-admin-adopt fieldset > legend {
	@apply px-1.5 text-sm leading-[1.4] font-semibold text-foreground;
}

.rooster-admin-adopt fieldset > p {
	@apply m-0 text-xs leading-normal text-secondary-foreground;
}

.rooster-admin-adopt details > summary {
	@apply cursor-pointer text-sm font-semibold text-foreground;
}

/* Core's colour picker button (wpColorPicker, 0.39.0): the kit's outline button with its swatch at the start and the
   value beside it; the picker's own panel keeps core's look. */
.rooster-admin-adopt .wp-picker-container .wp-color-result.button {
	@apply ra-button h-8 min-h-8 overflow-hidden p-0 ps-8 shadow-none;
}

.rooster-admin-adopt .wp-picker-container .wp-color-result.button .wp-color-result-text {
	@apply h-full border-s border-input bg-muted px-2 leading-[1.9rem] text-foreground;
}

.rooster-admin-adopt .wp-picker-container .wp-color-result.button:hover .wp-color-result-text {
	@apply bg-background;
}

.rooster-admin-adopt .wp-picker-container .wp-picker-input-wrap .button {
	@apply min-h-8;
}

/* Select2 is not skinned (0.36.0): on a chrome screen every select is the kit's searchable select (assets/select.js);
   a product that still runs Select2 does so on core's screens, outside the chrome. */

.rooster-admin-adopt code {
	@apply rounded-sm bg-muted px-1.5 py-0.5 text-xs font-normal text-secondary-foreground;
}

.rooster-admin-adopt p.description,
.rooster-admin-adopt .description {
	@apply text-xs text-secondary-foreground;
}

/* A card's own meta chip beside its title (rooster_admin_card_open()'s `meta`). */
.rooster-admin-card__meta {
	@apply flex items-center gap-2 text-xs font-normal text-secondary-foreground;
}

/* ── The migration kit (0.9.0, PLAN §11 layer 3): WordPress's own page anatomy in the chrome's recipes, so a
   product's existing screen takes the look with one class on its wrapper and no HTML change. ─────────────── */

/* The plain page title, when a page has no page-head card. */
.rooster-admin-adopt > h1,
.rooster-admin-adopt .wrap > h1 {
	@apply mb-4 flex items-center gap-2.5 p-0 text-2xl leading-tight font-semibold text-foreground;
}

/* Tab tiles. */
.rooster-admin-adopt .nav-tab-wrapper {
	@apply mb-5 flex flex-wrap gap-1.5 border-0 p-0;
}

.rooster-admin-adopt .nav-tab {
	@apply m-0 inline-flex min-h-8 items-center gap-1.5 rounded-md border border-input bg-background px-3 py-1 text-sm font-medium text-secondary-foreground no-underline;
}

.rooster-admin-adopt .nav-tab:hover {
	@apply bg-muted text-foreground;
}

.rooster-admin-adopt .nav-tab-active,
.rooster-admin-adopt .nav-tab-active:hover {
	color: var(--ra-accent-on);
	border-color: var(--ra-accent);
	background: var(--ra-accent);
}

/* Field rows: a form table as the chrome's fields. */
.rooster-admin-adopt table.form-table {
	@apply m-0 w-full border-separate border-spacing-0;
}

.rooster-admin-adopt table.form-table tr {
	@apply border-t border-border;
}

.rooster-admin-adopt table.form-table th,
.rooster-admin-adopt table.form-table td {
	@apply border-t border-border px-0 py-3 align-top text-sm leading-normal;
}

/* The label as a kit field row's (0.46.4): its words 18px down (the row's 12px and the label's 6px) on a 1.4 line, so a
   form-table row and a field row on one screen share the same lines. */
.rooster-admin-adopt table.form-table th {
	@apply w-(--ra-label-w) pe-4 pt-[18px] leading-[1.4] font-semibold text-foreground;
}

.rooster-admin-adopt table.form-table tr:first-child th,
.rooster-admin-adopt table.form-table tr:first-child td {
	@apply border-t-0;
}

.rooster-admin-adopt table.form-table td p.description {
	@apply mt-1.5 mb-0;
}

/* Meta boxes and core's cards as the chrome's card. */
.rooster-admin-adopt .postbox,
.rooster-admin-adopt .card {
	@apply ra-card mb-5 min-w-0 max-w-none p-0; /* the one card skin (0.58.0) */
}

/* The head: the card's (one height, the section's wash); core's handle buttons keep their place at its end. */
.rooster-admin-adopt .postbox .postbox-header {
	@apply ra-card-head py-0;
}

.rooster-admin-adopt .postbox .postbox-header .hndle,
.rooster-admin-adopt .postbox .postbox-header h2 {
	@apply m-0 p-0 text-md font-semibold text-foreground;
}

.rooster-admin-adopt .postbox .inside {
	@apply ra-card-body m-0;
}

.rooster-admin-adopt .card > h2:first-child {
	@apply ra-card-head -mx-4.5 -mt-3.5 mb-3.5 text-md font-semibold;
}

.rooster-admin-adopt .card {
	@apply px-4.5 pt-3.5 pb-4.5;
}

/* A product's own card classes (the alias recipes): assets/src/adopt/<product>.css, one line per class. */