/**
 * Cross-site presentation repair.
 *
 * Loaded after legacy page/module styles so public pages, authentication and
 * role dashboards share one predictable interaction and spacing system.
 */

html {
	scroll-behavior: smooth;
}

body.irota-body {
	background:
		radial-gradient(circle at 86% -12%, color-mix(in srgb, var(--irota-color-teal) 7%, transparent), transparent 30rem),
		var(--irota-color-canvas);
}

.irota-main,
.irota-dashboard,
.irota-auth {
	container-type: inline-size;
}

.irota-main :is(h1, h2, h3),
.irota-auth :is(h1, h2, h3) {
	text-wrap: balance;
	letter-spacing: -.025em;
	color: var(--irota-color-text-strong);
}

.irota-dashboard {
	font-family: var(--irota-font-family);
	letter-spacing: 0;
}

.irota-dashboard :is(h1, h2, h3, h4, p, li, label, legend, button, a, td, th, caption, input, select, textarea) {
	font-family: var(--irota-font-family);
	letter-spacing: 0;
}

.irota-dashboard :is(h1, h2, h3) {
	text-wrap: balance;
	color: var(--irota-color-text-strong);
}

.irota-main :is(p, li),
.irota-dashboard :is(p, li),
.irota-auth :is(p, li) {
	text-wrap: pretty;
}

/* The generic heading rule above is deliberately broad. Every shared hero
 * below sits on the brand-green surface, so its headings need the inverse
 * token in this final cascade layer. Keep this list aligned with shell.css's
 * dark-surface primitives; otherwise the broad rule wins at ~1:1 contrast. */
.irota-main .irota-hero--editorial h1 {
	color: var(--irota-color-surface-warm);
}

.irota-main :is(
	.irota-hero--editorial,
	.irota-page-head--editorial,
	.irota-directory-page__intro,
	.irota-event-archive__header,
	.irota-event-detail__header,
	.irota-booking-widget__intro,
	.irota-seat-selector__header,
	.irota-conference-public__hero,
	.irota-conference-submit__header,
	.irota-reviewer-workspace__header,
	.irota-plans__header,
	.irota-provider-schedule__intro,
	.irota-organizer-dashboard__header,
	.irota-organizer-panel__header
) :is(h1, h2, h3),
.irota-dashboard :is(
	.irota-dashboard__hero,
	.irota-reviewer-workspace__header,
	.irota-provider-schedule__intro,
	.irota-organizer-dashboard__header,
	.irota-organizer-panel__header
) :is(h1, h2, h3) {
	color: var(--irota-color-surface-warm);
}

.irota-page-head__lead,
.irota-directory-page__intro > p,
.irota-event-archive__intro > p,
.irota-dashboard__hero > p,
.irota-dashboard__sidebar-head > p {
	max-inline-size: 65ch;
}

.irota-btn,
.irota-main button,
.irota-dashboard button,
.irota-auth button {
	transition:
		transform var(--irota-motion-fast),
		box-shadow var(--irota-motion-fast),
		background var(--irota-motion-fast),
		border-color var(--irota-motion-fast),
		color var(--irota-motion-fast);
}

.irota-btn:hover,
.irota-main button:not(:disabled):hover,
.irota-dashboard button:not(:disabled):hover,
.irota-auth button:not(:disabled):hover {
	transform: translateY(-1px);
}

.irota-btn:active,
.irota-main button:not(:disabled):active,
.irota-dashboard button:not(:disabled):active,
.irota-auth button:not(:disabled):active {
	transform: translateY(1px) scale(.985);
}

.irota-main :is(input, select, textarea),
.irota-dashboard :is(input, select, textarea),
.irota-auth :is(input, select, textarea) {
	border-color: var(--irota-color-border-strong);
	transition: border-color var(--irota-motion-fast), box-shadow var(--irota-motion-fast), background var(--irota-motion-fast);
}

.irota-main :is(input, select, textarea):hover,
.irota-dashboard :is(input, select, textarea):hover,
.irota-auth :is(input, select, textarea):hover {
	border-color: color-mix(in srgb, var(--irota-color-teal) 58%, var(--irota-color-border));
}

/* Inline touch-target declarations were intended for buttons, but they made
 * checkbox and radio controls visually enormous in several module screens. */
.irota-main input[type="checkbox"],
.irota-main input[type="radio"],
.irota-dashboard input[type="checkbox"],
.irota-dashboard input[type="radio"],
.irota-auth input[type="checkbox"],
.irota-auth input[type="radio"] {
	flex: 0 0 1.125rem;
	inline-size: 1.125rem !important;
	min-inline-size: 1.125rem !important;
	block-size: 1.125rem !important;
	min-block-size: 1.125rem !important;
	margin: .1rem 0 0;
	padding: 0;
	accent-color: var(--irota-color-green);
}

.irota-main :is(.irota-choice, .irota-recurring-consent, .irota-booking-slot),
.irota-dashboard :is(.irota-choice, .irota-recurring-consent, .irota-booking-slot),
.irota-auth :is(.irota-choice, .irota-recurring-consent, .irota-booking-slot) {
	align-items: flex-start;
	gap: .7rem;
	padding: .8rem 1rem;
	border: 1px solid color-mix(in srgb, var(--irota-color-teal) 16%, var(--irota-color-border));
	border-radius: var(--irota-radius-md);
	background: color-mix(in srgb, var(--irota-color-surface-tint) 54%, var(--irota-color-surface));
	line-height: 1.85;
}

.irota-main :is(.irota-card, .irota-page-section, .irota-directory-results, .irota-event-archive__results),
.irota-dashboard :is(.irota-dashboard__panel, .irota-dashboard__quick-card, .irota-card),
.irota-auth :is(.irota-auth__card, .irota-card) {
	border-color: color-mix(in srgb, var(--irota-color-border) 78%, var(--irota-color-teal));
	box-shadow: 0 1rem 2.75rem rgba(23, 53, 38, .06);
}

.irota-main :is(.irota-card, .irota-page-section) > :last-child,
.irota-dashboard :is(.irota-dashboard__panel, .irota-dashboard__quick-card, .irota-card) > :last-child,
.irota-auth :is(.irota-auth__card, .irota-card) > :last-child {
	margin-block-end: 0;
}

.irota-main :is(.irota-table, .irota-event-registers__table),
.irota-dashboard :is(.irota-table, .irota-event-registers__table) {
	font-variant-numeric: tabular-nums;
}

.irota-main :is(.irota-table th, .irota-table td),
.irota-dashboard :is(.irota-table th, .irota-table td) {
	vertical-align: middle;
}

.irota-dashboard__sidebar,
.irota-dashboard__nav,
.irota-dashboard__drawer {
	box-shadow: 0 .75rem 2.25rem rgba(23, 53, 38, .055);
}

.irota-dashboard__nav a,
.irota-dashboard__logout {
	transition: transform var(--irota-motion-fast), background var(--irota-motion-fast), color var(--irota-motion-fast), border-color var(--irota-motion-fast);
}

.irota-dashboard__nav a:hover,
.irota-dashboard__logout:hover {
	transform: translateY(-1px);
}

.irota-empty,
.irota-empty-state {
	border-style: dashed;
	border-color: color-mix(in srgb, var(--irota-color-teal) 30%, var(--irota-color-border));
	background: color-mix(in srgb, var(--irota-color-surface-tint) 64%, var(--irota-color-surface));
}

/* F18 interaction floor: action controls remain finger-sized at every audited
 * viewport. Inline prose links are intentionally excluded because expanding
 * their boxes would break reading flow; navigation and explicit actions are
 * included below. */
:is(.irota-main, .irota-dashboard, .irota-auth) :is(
	button,
	.irota-btn,
	[role="button"],
	[role="tab"],
	summary,
	input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
	select,
	textarea
) {
	min-inline-size: 44px;
	min-block-size: 44px;
}

:is(.irota-main, .irota-dashboard, .irota-auth) :is(
	.irota-nav,
	.irota-pagination,
	.irota-workspace-subnav,
	.irota-card__actions,
	.irota-row-actions
) a {
	display: inline-flex;
	align-items: center;
	min-inline-size: 44px;
	min-block-size: 44px;
}

:is(.irota-main, .irota-dashboard, .irota-auth) label:has(> input[type="checkbox"]),
:is(.irota-main, .irota-dashboard, .irota-auth) label:has(> input[type="radio"]) {
	min-block-size: 44px;
}

.irota-inline-error {
	display: block;
	margin-block-start: .35rem;
	color: var(--irota-color-danger, #8a1f11);
	font-size: var(--irota-font-size-sm, .875rem);
	font-weight: var(--irota-font-weight-bold, 700);
	line-height: 1.75;
}

:is(.irota-main, .irota-dashboard, .irota-auth) [aria-invalid="true"] {
	border-color: var(--irota-color-danger, #8a1f11);
	box-shadow: 0 0 0 1px var(--irota-color-danger, #8a1f11);
}

#irota-content[data-irota-skip-target="1"]:focus {
	outline: var(--irota-focus-ring);
	outline-offset: 4px;
}

@media (max-width: 47.99rem) {
	.irota-main,
	.irota-dashboard,
	.irota-auth {
		--irota-gutter: 1rem;
	}

	.irota-main :is(.irota-card, .irota-page-section),
	.irota-dashboard :is(.irota-dashboard__panel, .irota-dashboard__quick-card, .irota-card),
	.irota-auth :is(.irota-auth__card, .irota-card) {
		border-radius: var(--irota-radius-lg);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.irota-btn,
	.irota-main button,
	.irota-dashboard button,
	.irota-auth button,
	.irota-dashboard__nav a,
	.irota-dashboard__logout {
		transition-duration: 0.01ms;
	}
}