/*
 * Tarot Arabi — components
 *
 * Reusable primitives only: buttons, links, badges, cards, icon chips, section
 * headings and form controls. No domain components (course/book/Tarot cards)
 * and no page-specific styling belong here — those arrive in later phases and
 * must compose these primitives.
 *
 * Component boundaries follow Design System §62; the `ta-` prefix keeps them
 * namespaced to this theme.
 */

/* ================================================================ Buttons */
/* Design System §17–19 */

.ta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-block-size: 48px;
	padding-block: var(--space-2);
	padding-inline: 24px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background-color: transparent;
	color: var(--color-green-900);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-bold);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	/* Hover/press motion is restrained: a 2px lift and a soft elevation only. */
	transition:
		transform var(--duration-interaction) var(--ease-interaction),
		box-shadow var(--duration-interaction) var(--ease-interaction),
		background-color var(--duration-interaction) var(--ease-interaction),
		border-color var(--duration-interaction) var(--ease-interaction),
		color var(--duration-interaction) var(--ease-interaction);
}

.ta-button:hover {
	transform: translateY(var(--lift-button));
}

.ta-button:active {
	transform: translateY(0) scale(var(--press-scale));
}

.ta-button:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: var(--focus-outline-offset);
	box-shadow: var(--focus-ring);
	transform: none;
}

/* Primary green (§17) */
.ta-button--primary {
	background-color: var(--color-green-900);
	border-color: var(--color-green-900);
	color: var(--color-white);
	box-shadow: 0 2px 8px rgba(23, 79, 58, 0.16);
}

.ta-button--primary:hover {
	background-color: var(--color-green-950);
	border-color: var(--color-green-950);
	color: var(--color-white);
	box-shadow: var(--shadow-interactive);
}

.ta-button--primary:focus-visible {
	outline-color: var(--color-accent);
	box-shadow: var(--focus-ring);
}

.ta-button--primary:active {
	background-color: var(--color-green-800);
	border-color: var(--color-green-800);
	box-shadow: 0 1px 4px rgba(23, 79, 58, 0.2);
}

/* Brass emphasis button (§17) — the gold-family filled variant, AA with a white
   label. The shell never uses it: the global CTA is Deep Green. */
.ta-button--accent {
	background-color: var(--color-gold-action);
	border-color: var(--color-gold-action);
	color: var(--color-white);
	box-shadow: 0 2px 8px rgba(141, 106, 49, 0.24);
}

.ta-button--accent:hover {
	background-color: var(--color-gold-action-hover);
	border-color: var(--color-gold-action-hover);
	color: var(--color-white);
	box-shadow: var(--shadow-interactive);
}

.ta-button--accent:focus-visible {
	outline-color: var(--color-green-900);
	box-shadow: var(--focus-ring);
}

.ta-button--accent:active {
	background-color: var(--color-gold-action-hover);
	border-color: var(--color-gold-action-hover);
	color: var(--color-white);
	box-shadow: 0 1px 4px rgba(141, 106, 49, 0.3);
}

/* Secondary / outlined (§18) — brass emphasis, brass fill on hover */
.ta-button--secondary {
	background-color: var(--color-surface);
	border: 1px solid var(--color-gold-action);
	color: var(--color-gold-action);
}

.ta-button--secondary:hover {
	background-color: var(--color-gold-action);
	border-color: var(--color-gold-action);
	color: var(--color-white);
	box-shadow: var(--shadow-interactive);
}

.ta-button--secondary:active {
	background-color: var(--color-gold-action-hover);
	border-color: var(--color-gold-action-hover);
	color: var(--color-white);
	box-shadow: 0 1px 4px rgba(141, 106, 49, 0.3);
}

.ta-button--secondary:focus-visible {
	outline-color: var(--color-green-900);
	box-shadow: var(--focus-ring);
}

/* On deep green surfaces */
.ta-button--on-deep {
	background-color: transparent;
	border: var(--border-on-deep);
	color: var(--color-white);
}

.ta-button--on-deep:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--color-white);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.ta-button--on-deep:focus-visible {
	outline-color: var(--color-accent);
}

/* Text action */
.ta-button--link {
	min-block-size: 44px;
	padding-inline: var(--space-2);
	color: var(--color-green-900);
	font-weight: var(--weight-bold);
}

.ta-button--link:hover {
	color: var(--color-action-hover);
}

/* Sizes */
.ta-button--sm {
	min-block-size: 44px;
	padding-inline: var(--space-4);
	font-size: var(--text-sm);
}

.ta-button--lg {
	min-block-size: 52px;
	padding-inline: 30px;
}

.ta-button--block {
	inline-size: 100%;
}

/* Disabled (§19): legible, clearly inert, still a 48px target */
.ta-button:disabled,
.ta-button[aria-disabled="true"] {
	background-color: var(--color-surface-alt);
	border-color: transparent;
	color: var(--color-text-muted);
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

.ta-button--secondary:disabled {
	background-color: transparent;
	border: var(--border-neutral);
	color: var(--color-text-muted);
}

/* Loading (§19). The spinner is a real inline element that inherits the
   variant's text colour, so it is always clearly visible: white on the green
   and brass fills, brass on outlined/light buttons. It sits in the
   flex row — never absolutely positioned — so RTL alignment and the button
   height are unaffected and it cannot overlap the Arabic label. */
.ta-button__spinner {
	display: inline-block;
	flex: 0 0 auto;
	inline-size: 1rem;
	block-size: 1rem;
	border: 2px solid currentcolor;
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: ta-spin 800ms linear infinite;
}

.ta-button__label {
	display: inline-block;
}

.ta-button--loading:hover,
.ta-button--loading:active {
	transform: none;
}

/* A loading button is inert but must not look greyed out, or the spinner would
   lose its contrast against the variant colour. */
.ta-button--loading:disabled,
.ta-button--loading[aria-disabled="true"] {
	cursor: progress;
}

.ta-button--primary.ta-button--loading:disabled {
	background-color: var(--color-green-900);
	border-color: var(--color-green-900);
	color: var(--color-white);
}

.ta-button--accent.ta-button--loading:disabled {
	background-color: var(--color-gold-action);
	border-color: var(--color-gold-action);
	color: var(--color-white);
}

.ta-button--secondary.ta-button--loading:disabled {
	background-color: var(--color-surface);
	border-color: var(--color-gold-action);
	color: var(--color-gold-action);
}

@keyframes ta-spin {
	to {
		transform: rotate(1turn);
	}
}

/* The button's arrow shifts toward the inline-start of the reading direction
   on hover. The glyph itself is never flipped. */
.ta-button:hover .ta-icon--directional {
	transform: translateX(-4px);
}

[dir="ltr"] .ta-button:hover .ta-icon--directional {
	transform: translateX(4px);
}

.ta-button__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.ta-button__icon .ta-icon--directional {
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

/* ================================================================== Links */
/* Design System §8, §51. Inline links are bold so they read as links by weight
   and underline, never by colour alone. */

/*
 * Standalone link primitive (action). No underline: this class marks an anchor
 * that behaves as an action rather than as prose. An anchor inside a paragraph
 * receives the editorial underline from the `p a` rule in base.css instead.
 */
a.ta-link,
.ta-link {
	color: var(--color-green-900);
	font-weight: var(--weight-bold);
	text-decoration: none;
	transition: color var(--duration-interaction) var(--ease-interaction);
}

a.ta-link:hover,
.ta-link:hover {
	color: var(--color-action-hover);
}

/* Standalone CTA link: bold, and the underline draws in on hover */
.ta-link--cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-block-size: 44px;
	color: var(--color-green-900);
	font-size: var(--text-body-lg);
	font-weight: var(--weight-bold);
	text-decoration: none;
	transition: color var(--duration-interaction) var(--ease-interaction);
}

.ta-link--cta:hover {
	color: var(--color-action-hover);
}

.ta-link--cta .ta-icon--directional {
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

/* Moves toward the inline-start; never mirrored into the opposite direction. */
.ta-link--cta:hover .ta-icon--directional {
	transform: translateX(-4px);
}

[dir="ltr"] .ta-link--cta:hover .ta-icon--directional {
	transform: translateX(4px);
}

/* ================================================================= Badges */
/* Design System §47 — compact but bold labels */

.ta-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding-block: 4px;
	padding-inline: 10px;
	border: 1px solid transparent;
	border-radius: var(--radius-xs);
	background-color: var(--color-surface-alt);
	color: var(--color-green-900);
	font-size: 13px;
	font-weight: var(--weight-bold);
	line-height: var(--leading-meta);
	white-space: nowrap;
}

.ta-badge--category {
	background-color: var(--color-surface-alt);
	color: var(--color-green-900);
}

.ta-badge--level {
	background-color: var(--color-accent-soft);
	color: var(--color-green-900);
}

.ta-badge--pdf {
	background-color: var(--color-surface);
	border: var(--border-neutral);
	color: var(--color-text-muted);
}

.ta-badge--physical {
	background-color: var(--color-surface-alt);
	border: 1px solid rgba(23, 79, 58, 0.16);
	color: var(--color-green-900);
}

.ta-badge--bundle {
	background-color: var(--color-accent-soft);
	border: var(--border-accent);
	color: var(--color-green-900);
}

.ta-badge--recorded {
	background-color: var(--color-surface);
	border: var(--border-neutral);
	color: var(--color-text-muted);
}

.ta-badge--live {
	background-color: var(--color-green-900);
	color: var(--color-white);
}

.ta-badge--certificate {
	background-color: var(--color-surface);
	border: var(--border-secondary);
	color: var(--color-green-900);
}

/* ================================================================== Cards */
/* Design System §28, §51. Visual primitives only — no domain card content.
 *
 * Pointer hover and keyboard focus are deliberately different states:
 * hover elevates, keyboard focus draws a single clean ring. The ring is keyed
 * to :focus-visible on the interactive child, so clicking with a mouse never
 * leaves a permanent focus rectangle behind. */

.ta-card {
	padding: var(--space-6);
	border: var(--border-card);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
	box-shadow: var(--shadow-sm);
}

.ta-card--elevated {
	box-shadow: var(--shadow-md);
}

.ta-card--warm {
	background-color: var(--color-surface-warm);
}

.ta-card--sage {
	background-color: var(--color-surface-alt);
}

.ta-card--deep {
	background-color: var(--color-surface-deep);
	border-color: transparent;
	color: var(--color-on-deep);
}

.ta-card--deep :is(.ta-card__title, h2, h3) {
	color: var(--color-on-deep);
}

.ta-card--deep .ta-card__text {
	color: var(--color-on-deep-muted);
}

/* Editorial / media card: media on top, generous radius, clipped corners */
.ta-card--editorial {
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius-xl);
}

.ta-card--editorial .ta-card__body {
	padding: var(--space-6);
}

/*
 * The ratio belongs to the SLOT, never to the image. The slot therefore has the
 * same height with a real Featured Image, with a designed placeholder, and with
 * nothing at all — the image fills it and is cropped by it, but can never resize
 * the card, the grid row or the neighbouring cards.
 */
.ta-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-color: var(--color-surface-alt);
}

.ta-card__media img,
.ta-card__media .ta-ec-plate-fill {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 0;
	object-fit: cover;
	transition: transform var(--duration-standard) var(--ease-standard);
}

/* Intended image ratios (§28, §32, §35) */
.ta-card__media--16x9 {
	aspect-ratio: 16 / 9;
}

.ta-card__media--16x10 {
	aspect-ratio: 16 / 10;
}

.ta-card__media--3x2 {
	aspect-ratio: 3 / 2;
}

.ta-card__media--3x4 {
	aspect-ratio: 3 / 4;
}

.ta-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.ta-card__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: var(--text-card);
	font-weight: var(--weight-bold);
	line-height: var(--leading-heading);
}

.ta-card__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-body);
	line-height: var(--leading-body);
}

.ta-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-meta);
}

.ta-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-block-start: var(--space-2);
}

/* Interactive state: premium elevation only — no ring, no double border. */
.ta-card--interactive {
	transition:
		transform var(--duration-standard) var(--ease-interaction),
		box-shadow var(--duration-standard) var(--ease-interaction),
		border-color var(--duration-standard) var(--ease-interaction);
}

.ta-card--interactive:hover {
	transform: translateY(var(--lift-card));
	box-shadow: var(--shadow-md);
	border-color: rgba(23, 79, 58, 0.14);
}

/* Keyboard focus: one clean ring, only while a real control is focus-visible. */
.ta-card--interactive:has(:focus-visible) {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: var(--focus-outline-offset);
	box-shadow: var(--focus-ring), var(--shadow-md);
	transform: translateY(var(--lift-card));
}

/* The card CTA participates in the hover without becoming an outlined box. */
.ta-card--interactive:hover .ta-link--cta {
	color: var(--color-action-hover);
}

.ta-card--interactive:hover .ta-link--cta .ta-icon--directional {
	transform: translateX(-4px);
}

[dir="ltr"] .ta-card--interactive:hover .ta-link--cta .ta-icon--directional {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: no-preference) {
	.ta-card--interactive:hover .ta-card__media img,
	.ta-card--interactive:has(:focus-visible) .ta-card__media img {
		transform: scale(var(--hover-image-scale));
	}
}

/* ============================================================= Icon system */
/* Design System §20 */

.ta-icon {
	inline-size: 24px;
	block-size: 24px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ta-icon--sm {
	inline-size: 18px;
	block-size: 18px;
}

.ta-icon--lg {
	inline-size: 28px;
	block-size: 28px;
}

/* `.ta-icon--directional` marks a forward arrow drawn for its own reading
   direction at render time: Arabic RTL receives a left-pointing glyph, LTR a
   right-pointing one. It is NEVER flipped, rotated or mirrored, and hover only
   changes its translation, never its orientation (§52). */
.ta-icon--directional {
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

.ta-icon-chip {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--radius-md);
	background-color: var(--color-accent-soft);
	color: var(--color-green-900);
}

.ta-icon-chip--round {
	border-radius: var(--radius-pill);
}

.ta-icon-chip--sage {
	background-color: var(--color-surface-alt);
}

.ta-icon-chip--deep {
	background-color: var(--color-green-900);
	color: var(--color-white);
}

.ta-icon-chip--outline {
	background-color: transparent;
	border: var(--border-accent);
}

.ta-icon-chip--sm {
	inline-size: 40px;
	block-size: 40px;
}

.ta-icon-chip--lg {
	inline-size: 56px;
	block-size: 56px;
}

.ta-icon-chip--lg .ta-icon {
	inline-size: 28px;
	block-size: 28px;
}

/* ======================================================== Section heading */
/* Design System §27 */

.ta-section-heading {
	max-inline-size: var(--container-heading);
	margin-block-end: var(--space-10);
}

.ta-section-heading__eyebrow {
	display: block;
	margin-block-end: var(--space-3);
	/* Gold-family text, so it uses the accessible brass rather than the soft
	   decorative gold, which is never used for text on light surfaces. */
	color: var(--color-gold-action);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--leading-meta);
}

.ta-section-heading__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	font-weight: var(--weight-bold);
	line-height: var(--leading-heading);
	text-wrap: balance;
}

.ta-section-heading__text {
	margin-block: var(--space-4) 0;
	max-inline-size: 62ch;
	color: var(--color-text-muted);
	font-size: var(--text-body-lg);
	line-height: var(--leading-body);
}

.ta-section-heading__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-block-start: var(--space-6);
}

/* Centred variant: short heading + a deliberately narrow description so Arabic
   paragraphs never run long and centred (§27). */
.ta-section-heading--center {
	margin-inline: auto;
	text-align: center;
}

.ta-section-heading--center .ta-section-heading__text {
	margin-inline: auto;
	max-inline-size: 46ch;
}

.ta-section-heading--center .ta-section-heading__actions {
	justify-content: center;
}

/* On deep green surfaces */
.ta-section--deep .ta-section-heading__title {
	color: var(--color-on-deep);
}

.ta-section--deep .ta-section-heading__text {
	color: var(--color-on-deep-muted);
}

.ta-section--deep .ta-section-heading__eyebrow {
	color: var(--color-accent);
}

/* ================================================================== Forms */
/* Design System §43 */

.ta-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block-end: var(--space-6);
}

.ta-field:last-child {
	margin-block-end: 0;
}

.ta-field__label {
	color: var(--color-charcoal);
	font-size: var(--text-body);
	font-weight: var(--weight-bold);
	line-height: var(--leading-meta);
}

.ta-field__required {
	color: var(--color-error);
}

.ta-field__help {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-meta);
}

/* Error text carries a word, not colour alone (§57) */
.ta-field__error {
	margin: 0;
	color: var(--color-error);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--leading-meta);
}

/* Shared control surface for inputs, textarea, native selects and the custom
   select trigger, so every field looks like one designed family. */
.ta-input,
.ta-textarea,
.ta-select-native,
.ta-select__trigger {
	inline-size: 100%;
	min-block-size: 50px;
	padding-block: var(--space-3);
	padding-inline: 16px;
	border: var(--border-neutral);
	border-radius: var(--radius-sm);
	background-color: var(--color-field);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.5;
	box-shadow: var(--field-depth);
	transition:
		border-color var(--duration-interaction) var(--ease-interaction),
		box-shadow var(--duration-interaction) var(--ease-interaction),
		background-color var(--duration-interaction) var(--ease-interaction);
}

.ta-textarea {
	min-block-size: 128px;
}

.ta-input::placeholder,
.ta-textarea::placeholder {
	color: #8b8f8c;
	font-weight: var(--weight-regular);
}

.ta-input:hover:not(:disabled),
.ta-textarea:hover:not(:disabled),
.ta-select-native:hover:not(:disabled) {
	border-color: rgba(23, 79, 58, 0.3);
}

/* Replace the browser focus ring with the brand one (no default blue). */
.ta-input:focus,
.ta-textarea:focus,
.ta-select-native:focus,
.ta-select__trigger:focus {
	outline: none;
}

.ta-input:focus-visible,
.ta-textarea:focus-visible,
.ta-select-native:focus-visible,
.ta-select__trigger:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 1px;
	border-color: var(--color-green-900);
	box-shadow: var(--focus-ring), var(--field-depth);
}

.ta-input:disabled,
.ta-textarea:disabled,
.ta-select-native:disabled,
.ta-select__trigger:disabled,
.ta-select__trigger[aria-disabled="true"] {
	background-color: var(--color-surface-alt);
	color: var(--color-text-muted);
	border-color: rgba(23, 79, 58, 0.14);
	border-style: dashed;
	box-shadow: none;
	cursor: not-allowed;
}

/* Invalid: red border, tinted surface, and an accompanying message */
.ta-input--invalid,
.ta-textarea--invalid,
.ta-select-native--invalid,
.ta-input[aria-invalid="true"],
.ta-textarea[aria-invalid="true"],
.ta-select-native[aria-invalid="true"],
.ta-select--invalid .ta-select__trigger {
	border-color: var(--color-error);
	background-color: var(--color-error-surface);
}

.ta-input--invalid:focus-visible,
.ta-textarea--invalid:focus-visible,
.ta-select-native--invalid:focus-visible,
.ta-input[aria-invalid="true"]:focus-visible,
.ta-select--invalid .ta-select__trigger:focus-visible {
	outline-color: var(--color-error);
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.2), var(--field-depth);
}

/* ---------------------------------------------------- Checkbox and radio */
/* The native input stays in the DOM and keeps its semantics, keyboard support
   and assistive behaviour; only its painting is replaced, and checked state is
   drawn with a data-URI shape because <input> cannot host pseudo-elements. */

input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	inline-size: 20px;
	block-size: 20px;
	margin: 0;
	border: 1.5px solid var(--color-border);
	background-color: var(--color-field);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	box-shadow: var(--field-depth);
	cursor: pointer;
	transition:
		background-color var(--duration-interaction) var(--ease-interaction),
		border-color var(--duration-interaction) var(--ease-interaction),
		box-shadow var(--duration-interaction) var(--ease-interaction);
}

input[type="checkbox"] {
	border-radius: 6px;
}

input[type="radio"] {
	border-radius: 50%;
	background-size: 11px 11px;
}

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) {
	border-color: var(--color-accent);
}

input[type="checkbox"]:checked {
	background-color: var(--color-green-900);
	border-color: var(--color-green-900);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type="radio"]:checked {
	border-color: var(--color-green-900);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%23174F3A'/%3E%3C/svg%3E");
}

input[type="checkbox"]:indeterminate {
	background-color: var(--color-green-900);
	border-color: var(--color-green-900);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 2px;
	box-shadow: var(--focus-ring);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
	background-color: var(--color-surface-alt);
	border-color: rgba(23, 79, 58, 0.14);
	box-shadow: none;
	cursor: not-allowed;
}

input[type="checkbox"]:disabled:checked {
	background-color: rgba(23, 79, 58, 0.35);
	border-color: transparent;
}

input[type="radio"]:disabled:checked {
	border-color: rgba(23, 79, 58, 0.35);
}

input[type="radio"]:disabled:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%23174F3A' fill-opacity='0.45'/%3E%3C/svg%3E");
}

/* Checkbox / radio rows: comfortable target, direction-agnostic spacing */
.ta-check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	min-block-size: 44px;
	padding-block: var(--space-2);
}

.ta-check input {
	margin-block-start: 3px;
	flex: 0 0 auto;
}

.ta-check__label {
	color: var(--color-text);
	font-size: var(--text-body);
	line-height: var(--leading-meta);
}

.ta-check__label .ta-field__help {
	display: block;
}

.ta-form-grid {
	display: grid;
	gap: 0 var(--grid-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
	.ta-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ta-fieldset {
	margin-block-end: var(--space-6);
	padding: 0;
	border: 0;
}

.ta-fieldset > legend {
	margin-block-end: var(--space-3);
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: var(--text-card);
	font-weight: var(--weight-bold);
}

/* =============================================== Select: native + custom */
/* Native selects are styled but never replaced globally: a select's open popup
   is OS-controlled, so `.ta-select-native` stays the robust default and only
   opt-in `.ta-select` markup gets the designed listbox. */

.ta-select-wrap {
	position: relative;
	display: block;
}

.ta-select-native {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 44px;
	cursor: pointer;
}

.ta-select-wrap::after {
	content: "";
	position: absolute;
	inset-inline-end: 18px;
	inset-block-start: 50%;
	inline-size: 8px;
	block-size: 8px;
	margin-block-start: -6px;
	border-inline-end: 2px solid var(--color-green-900);
	border-block-end: 2px solid var(--color-green-900);
	transform: rotate(45deg);
	pointer-events: none;
}

/* Custom select: progressive enhancement. Without the enhancement class the
   trigger and listbox stay hidden and the native select is the control. */
.ta-select {
	position: relative;
}

.ta-select__trigger,
.ta-select__listbox {
	display: none;
}

.ta-select--enhanced .ta-select-native {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ta-select--enhanced .ta-select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	text-align: start;
	cursor: pointer;
}

.ta-select--enhanced .ta-select__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ta-select--placeholder .ta-select__value {
	color: #8b8f8c;
}

.ta-select__chevron {
	display: inline-flex;
	color: var(--color-green-900);
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

.ta-select__trigger[aria-expanded="true"] .ta-select__chevron {
	transform: rotate(180deg);
}

.ta-select--enhanced .ta-select__listbox {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 6px);
	z-index: 20;
	display: block;
	max-block-size: 260px;
	margin: 0;
	padding: var(--space-1);
	overflow-y: auto;
	list-style: none;
	border: var(--border-neutral);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	box-shadow: var(--shadow-md);
}

.ta-select--enhanced .ta-select__listbox[hidden] {
	display: none;
}

.ta-select__option {
	padding-block: 10px;
	padding-inline: 12px;
	border-radius: var(--radius-xs);
	color: var(--color-text);
	font-size: var(--text-body);
	line-height: var(--leading-meta);
	cursor: pointer;
}

/* Keyboard-active option, kept visually distinct from the selected one */
.ta-select__option--active {
	background-color: var(--color-accent-soft);
}

.ta-select__option[aria-selected="true"] {
	background-color: var(--color-surface-alt);
	color: var(--color-green-900);
	font-weight: var(--weight-bold);
}

.ta-select__option[aria-disabled="true"] {
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* ============================================================== Pagination */

.ta-pagination {
	margin-block-start: clamp(32px, 3vw, 44px);
}

.ta-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-pagination__item {
	display: flex;
}

.ta-pagination__link,
.ta-pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-inline-size: 48px;
	min-block-size: 48px;
	padding-inline: 14px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background-color: var(--color-surface);
	color: var(--color-green-900);
	font-size: 15px;
	font-weight: var(--weight-bold);
	line-height: 1;
	text-decoration: none;
	transition: background-color 180ms var(--ease-interaction), border-color 180ms var(--ease-interaction), color 180ms var(--ease-interaction);
}

.ta-pagination__page {
	padding-inline: 0;
}

.ta-pagination__link:hover,
.ta-pagination__page:hover {
	border-color: rgba(23, 79, 58, 0.24);
	background-color: var(--color-sage-100);
}

.ta-pagination__link:focus-visible,
.ta-pagination__page:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 3px;
}

.ta-pagination__page.is-current {
	border-color: var(--color-green-900);
	background-color: var(--color-green-900);
	color: var(--color-surface);
}

.ta-pagination__link.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}