/**
 * AerialMedia canonical component layer.
 *
 * Tokens are owned by aerialmedia-theme.css. This file is deliberately loaded
 * after page CSS so shared controls and surfaces cannot silently fork their
 * typography, radii, focus treatment, or elevation from page to page.
 */

:root {
    --ui-component-contract: 20260813-square;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.font-heading,
.font-display,
.display-font {
    font-family: var(--font-heading) !important;
}

.font-body {
    font-family: var(--font-body) !important;
}

body {
    font-family: var(--font-body);
    color: var(--ui-text);
}

.ui-inverse {
    color: var(--ui-on-primary);
}

.ui-inverse :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ui-text-strong);
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.3;
}

h4 {
    font-size: 1rem;
    line-height: 1.4;
}

.ui-display,
.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.02em;
}

.ui-h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.ui-h2,
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.ui-h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.ui-h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.ui-body-lg,
.section-subtitle {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ui-text-muted);
}

.ui-small {
    font-size: 0.875rem;
    line-height: 1.5;
}

.ui-caption {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ui-text-muted);
}

.ui-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-info);
}

/* Public photo heroes use a light neutral scrim. Readability is localized to
   a bounded copy surface so photography keeps its color, detail, and authored
   exposure without making white text depend on the uploaded pixels. */
.hero-section {
    position: relative;
    min-height: min(42rem, calc(100dvh - 5rem));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-surface-inverse);
}

.hero-overlay,
.ui-photo-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--ui-image-scrim);
    pointer-events: none;
}

.ui-photo-hero img {
    filter: none;
}

.ui-photo-hero-copy {
    background: var(--ui-hero-copy-surface);
    padding: clamp(var(--space-4), 2.5vw, var(--space-8));
}

.ui-photo-hero-copy :is(
    h1,
    h2,
    h3,
    p,
    .hero-title,
    .hero-subtitle,
    .tour-carousel-title,
    .tour-carousel-subtitle
) {
    text-shadow: var(--ui-hero-text-shadow);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(100% - 2rem, 72rem);
    padding: var(--space-16) var(--space-6);
    color: var(--ui-on-primary);
}

.hero-section :is(.hero-title, .hero-subtitle) {
    color: inherit;
}

.hero-subtitle {
    margin-top: var(--space-4);
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
}

.text-muted {
    color: var(--ui-text-muted) !important;
}

/* --------------------------------------------------------------------------
   Focus, links, and motion
   -------------------------------------------------------------------------- */

:is(a, button, input, select, textarea, summary, [role='button'], [tabindex]):focus-visible {
    outline: 2px solid var(--ui-focus) !important;
    outline-offset: 2px !important;
}

:is(.ui-inverse, .hero-section, .hero-aerial, .auth-container, footer)
    :is(a, button, input, select, textarea, summary, [role='button'], [tabindex]):focus-visible {
    outline-color: var(--ui-focus-inverse) !important;
}

:is(p, li, dd) > a:not([class*='btn']):not([class*='button']) {
    color: var(--ui-info);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

:is(p, li, dd) > a:not([class*='btn']):not([class*='button']):hover {
    text-decoration-line: underline;
}

.ui-inverse :is(p, li, dd) > a:not([class*='btn']):not([class*='button']) {
    color: var(--ui-link-inverse);
}

.ui-inverse :is(p, li, dd) > a:not([class*='btn']):not([class*='button']):hover {
    color: var(--ui-on-primary);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

:is(
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-ghost,
    .btn-danger,
    .btn-destructive,
    .btn-aerial-primary,
    .btn-aerial-secondary,
    .btn-aerial-outline,
    .btn-aerial-white,
    .btn-viking-primary,
    .auth-btn-primary,
    .auth-btn-secondary,
    .action-button
) {
    min-height: 2.75rem;
    padding: 0 var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transform: none !important;
    transition: color var(--motion-fast), background-color var(--motion-fast),
        border-color var(--motion-fast), box-shadow var(--motion-fast);
}

:is(.btn-primary, .btn-aerial-primary, .btn-viking-primary, .auth-btn-primary) {
    color: var(--ui-on-primary) !important;
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
}

:is(.btn-primary, .btn-aerial-primary, .btn-viking-primary, .auth-btn-primary):hover {
    color: var(--ui-on-primary) !important;
    background: var(--ui-primary-hover) !important;
    border-color: var(--ui-primary-hover) !important;
}

:is(.btn-primary, .btn-aerial-primary, .btn-viking-primary, .auth-btn-primary):active {
    background: var(--ui-primary-active) !important;
    border-color: var(--ui-primary-active) !important;
}

:is(.btn-secondary, .btn-aerial-secondary, .auth-btn-secondary, .btn-outline-secondary, .btn-default) {
    color: var(--ui-text-strong) !important;
    background: var(--ui-surface) !important;
    border-color: var(--ui-border-strong) !important;
}

:is(.btn-secondary, .btn-aerial-secondary, .auth-btn-secondary, .btn-outline-secondary, .btn-default):hover {
    color: var(--ui-primary-hover) !important;
    background: var(--ui-info-bg) !important;
    border-color: var(--ui-primary) !important;
}

:is(.btn-ghost) {
    color: var(--ui-text) !important;
    background: transparent !important;
    border-color: transparent !important;
}

:is(.btn-ghost):hover {
    color: var(--ui-text-strong) !important;
    background: var(--ui-surface-muted) !important;
}

:is(.btn-danger, .btn-destructive) {
    color: var(--ui-on-primary) !important;
    background: var(--ui-danger) !important;
    border-color: var(--ui-danger) !important;
}

:is(.btn-danger, .btn-destructive):hover {
    color: var(--ui-on-primary) !important;
    background: var(--ui-danger) !important;
    border-color: var(--ui-danger) !important;
    filter: brightness(0.92);
}

:is(.btn-aerial-white) {
    color: var(--ui-primary-hover) !important;
    background: var(--ui-surface) !important;
    border-color: var(--ui-surface) !important;
}

:is(.btn-aerial-outline) {
    color: var(--ui-on-primary) !important;
    background: transparent !important;
    border-color: var(--ui-on-primary) !important;
}

:is(.btn-aerial-outline):hover {
    color: var(--ui-primary-hover) !important;
    background: var(--ui-surface) !important;
}

:is(.btn-sm, .btn-dense) {
    min-height: 2.25rem;
    padding-inline: var(--space-3);
    font-size: 0.75rem;
}

:is(.btn-md) {
    min-height: 2.75rem;
}

:is(.btn-lg, .auth-btn-primary) {
    min-height: 3rem;
    padding-inline: var(--space-8);
}

:is(.btn-icon, .btn-icon-sm, .action-button) {
    width: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
}

.btn-icon-sm,
.action-button {
    width: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
}

:is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-destructive,
    .btn-aerial-primary, .btn-aerial-secondary, .auth-btn-primary, .auth-btn-secondary)
    :is(svg, i) {
    flex: 0 0 auto;
}

:is(button, .btn, [class*='btn-']):disabled,
:is(button, .btn, [class*='btn-'])[aria-disabled='true'],
.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

:is(.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-aerial-primary,
    .auth-btn-primary, .auth-btn-secondary).w-full,
.auth-btn-primary,
.auth-btn-secondary {
    width: 100%;
}

.auth-btn-compact {
    width: auto;
}

/* Remove legacy decorative button layers and motion. */
.btn-aerial-primary::before,
.btn-primary::before {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-group,
.input-group,
.auth-input-group {
    margin-bottom: var(--space-6);
}

.form-label,
.auth-form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ui-text);
    letter-spacing: 0;
    text-transform: none;
}

:is(.form-input, .form-select, .form-textarea, .form-control, .auth-form-input) {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem var(--space-4);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-control);
    background: var(--ui-surface);
    color: var(--ui-text-strong);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    box-shadow: none;
    transition: color var(--motion-fast), background-color var(--motion-fast),
        border-color var(--motion-fast);
}

/* Dense controls are reserved for tables, toolbars, and inline management
   actions. Standard customer-facing forms keep the 44/48px contract. */
:is(.form-input, .form-select, .form-textarea, .form-control).form-control--compact {
    min-height: 2.25rem;
    padding-block: var(--space-2);
    font-size: 0.875rem;
}

:is(.form-input, .form-select, .form-textarea, .form-control).form-control--auto {
    width: auto;
}

:is(.form-textarea, textarea.form-control, textarea.form-input) {
    min-height: 7.5rem;
    resize: vertical;
}

:is(.form-input, .form-select, .form-textarea, .form-control, .auth-form-input):focus,
:is(input.rounded-md, input.rounded-lg, input.rounded-xl,
    select.rounded-md, select.rounded-lg, select.rounded-xl,
    textarea.rounded-md, textarea.rounded-lg, textarea.rounded-xl):focus {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
    border-color: var(--ui-primary);
    box-shadow: none;
}

:is(input.rounded-md, input.rounded-lg, input.rounded-xl,
    select.rounded-md, select.rounded-lg, select.rounded-xl,
    textarea.rounded-md, textarea.rounded-lg, textarea.rounded-xl) {
    border-radius: var(--radius-control) !important;
}

:is(.form-input, .form-select, .form-textarea, .form-control, .auth-form-input):disabled {
    color: var(--ui-text-disabled);
    background: var(--ui-surface-muted);
    cursor: not-allowed;
}

:is(.form-input, .form-select, .form-textarea, .form-control, .auth-form-input).error,
:is(.form-input, .form-select, .form-textarea, .form-control, .auth-form-input)[aria-invalid='true'] {
    border-color: var(--ui-danger);
}

::placeholder {
    color: var(--ui-text-muted);
    opacity: 1;
}

.form-help,
.auth-form-help {
    margin-top: var(--space-1);
    color: var(--ui-text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.form-error,
.auth-form-error {
    margin-top: var(--space-1);
    color: var(--ui-danger);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Newsletter variants share the canonical form, surface, and action contract. */
.newsletter-panel {
    padding: var(--space-6);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-card);
    box-shadow: none;
}

.newsletter-panel--inline {
    padding: var(--space-4);
    background: var(--ui-info-bg);
    border-color: var(--ui-info-border);
}

.newsletter-form__field {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.625rem var(--space-4);
    color: var(--ui-text-strong);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-control);
    box-shadow: none;
    font: inherit;
}

.newsletter-form__field--dense {
    min-height: 2.25rem;
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
}

.newsletter-form__field--inverse {
    color: var(--ui-on-primary);
    background: var(--ui-surface-inverse);
    border-color: var(--ui-border-inverse);
}

.newsletter-form__field--inverse::placeholder {
    color: var(--ui-text-inverse-muted);
}

.newsletter-form__field:focus {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
    border-color: var(--ui-primary);
}

.newsletter-form__accent {
    color: var(--ui-info);
}

.newsletter-form__icon {
    width: 3rem;
    height: 3rem;
    color: var(--ui-info);
    background: var(--ui-info-bg);
    border-radius: var(--radius-full);
}

/* Explicit elevation is for overlays and floating affordances only. */
.ui-elevated {
    box-shadow: var(--shadow-overlay) !important;
}

/* --------------------------------------------------------------------------
   Cards and surfaces
   -------------------------------------------------------------------------- */

:is(.card, .page-card, .account-form-card, .auth-form-card, .form-card, .photo-card, .contact-card,
    .stat-card, .credential-card, .booking-card, .feature-card, .instructor-card,
    .testimonial-card, .quick-action-card, .dashboard-card, .dashboard-stat-card,
    .wizard-card, .booking-summary, .analytics-card, .vip-card, .form-section) {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-surface);
    transform: none !important;
}

.form-section {
    margin-bottom: var(--space-8);
    padding: var(--space-6);
}

:is(div, section, article).bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl) {
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-card) !important;
}

:is(div, section, article).bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl)
    :is(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl) {
    box-shadow: none;
}

:is(div, section, article).bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl):is(
    .shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl
) {
    box-shadow: none;
}

.card-elevated,
.auth-form-card,
.page-card--elevated {
    box-shadow: var(--shadow-overlay);
}

:is(.card-interactive, .tour-card-premium, .feature-card, .instructor-card,
    .testimonial-card, .quick-action-card) {
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast),
        background-color var(--motion-fast);
}

:is(.card-interactive, .tour-card-premium, .feature-card, .instructor-card,
    .testimonial-card, .quick-action-card):is(:hover, :focus-within) {
    border-color: var(--ui-info-border);
    box-shadow: var(--shadow-interactive);
    transform: none !important;
}

.quick-action-card {
    display: block;
    padding: var(--space-6);
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.quick-action-card .icon-wrapper {
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--space-3);
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-action-card h4 {
    margin-bottom: var(--space-1);
}

.quick-action-card p {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 0.875rem;
}

.card--bordered {
    border: 2px solid var(--ui-primary);
}

.card-header,
.form-card-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-subtle);
}

.card-body,
.form-card-body {
    padding: var(--space-6);
}

.card-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-subtle);
}

/* Catalog cards retain consistent framing but not gallery-style cropping. */
.tour-card-premium {
    position: relative;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    height: 100%;
    overflow: hidden;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-card);
    box-shadow: none;
    transform: none !important;
}

.tour-card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--ui-info-bg);
    flex-shrink: 0;
}

.tour-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-card-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.tour-card-heading-row .tour-card-category {
    margin-bottom: 0;
}

.tour-card-location {
    min-width: 0;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    color: var(--ui-text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: right;
}

.tour-card-location-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 0.875rem;
}

.tour-card-content {
    padding: var(--space-6);
    display: flex;
    flex: 1;
    flex-direction: column;
}

.tour-card-category {
    margin-bottom: var(--space-2);
    color: var(--ui-info);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tour-card-title {
    margin-bottom: var(--space-3);
    color: var(--ui-text-strong);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.tour-card-description {
    margin-bottom: var(--space-6);
    color: var(--ui-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.tour-card-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    color: var(--ui-text-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

.tour-card-stat {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.tour-card-stat-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.tour-card-meta {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tour-card-pricing {
    min-width: 0;
}

.tour-card-price {
    max-width: 100%;
    color: var(--ui-text-strong);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.tour-card-price--accent {
    color: var(--ui-info);
}

.tour-card-price--muted {
    color: var(--ui-text-muted);
}

.tour-card-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}

.tour-card-price-original {
    color: var(--ui-text-disabled);
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: line-through;
}

.tour-card-offer {
    margin-top: var(--space-2);
    width: fit-content;
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
}

.tour-card-offer--success {
    color: var(--ui-success);
    background: var(--ui-success-bg);
    border-color: var(--ui-success-border);
}

.tour-card-offer--warning {
    color: var(--ui-warning);
    background: var(--ui-warning-bg);
    border-color: var(--ui-warning-border);
}

.tour-card-offer--danger {
    color: var(--ui-danger);
    background: var(--ui-danger-bg);
    border-color: var(--ui-danger-border);
}

.tour-card-price-label {
    margin-bottom: var(--space-1);
    color: var(--ui-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tour-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}

.tour-price-label {
    color: var(--ui-text-muted);
    font-size: 1.125rem;
}

.tour-price-value {
    color: var(--ui-primary);
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.tour-price-original {
    color: var(--ui-text-disabled);
    font-size: 1.125rem;
    text-decoration: line-through;
}

.tour-price-offer {
    margin-top: var(--space-3);
    width: fit-content;
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

.tour-price-offer--success {
    color: var(--ui-success);
    background: var(--ui-success-bg);
    border-color: var(--ui-success-border);
}

.tour-price-offer--warning {
    color: var(--ui-warning);
    background: var(--ui-warning-bg);
    border-color: var(--ui-warning-border);
}

.tour-price-offer--danger {
    color: var(--ui-danger);
    background: var(--ui-danger-bg);
    border-color: var(--ui-danger-border);
}

.tour-card-actions {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.tour-card-edit-action {
    flex: 0 0 2.75rem;
}

.tour-card-external-action {
    flex: 0 0 auto;
    padding-inline: var(--space-3);
}

.tour-card-details-action {
    min-width: 0;
    flex: 1 1 auto;
}

@container (min-width: 32rem) {
    .tour-card-meta--pricing {
        grid-template-columns: minmax(8rem, auto) minmax(12rem, 1fr);
        align-items: end;
        column-gap: var(--space-6);
        display: grid;
    }
}

@media (min-width: 48rem) {
    .tour-card-premium--list {
        display: grid;
        grid-template-columns: minmax(16rem, 38%) minmax(0, 1fr);
    }

    .tour-card-premium--list .tour-card-image-wrapper {
        height: 100%;
        min-height: 100%;
        aspect-ratio: auto;
    }

    .tour-card-premium--list .tour-card-content {
        min-width: 0;
    }

    .tour-card-premium--list .tour-card-description {
        margin-bottom: var(--space-4);
    }
}

@container (min-width: 56rem) {
    .tour-card-premium--list .tour-card-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: var(--space-6);
    }
}

.tour-card-badge,
.badge,
.status-badge,
.analytics-trend,
.vip-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

.tour-card-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 2;
}

.tour-card-badge,
.badge-warning {
    color: var(--ui-warning);
    background: var(--ui-warning-bg);
    border-color: var(--ui-warning-border);
}

.tour-card-badge--drone {
    right: auto;
    left: var(--space-4);
    color: var(--ui-text-inverse);
    background: rgba(17, 24, 39, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge-primary,
.badge-info,
.status-badge.primary {
    color: var(--ui-info);
    background: var(--ui-info-bg);
    border-color: var(--ui-info-border);
}

.badge-success,
:is(.status-badge.published, .status-badge.confirmed),
.analytics-trend.up {
    color: var(--ui-success);
    background: var(--ui-success-bg);
    border-color: var(--ui-success-border);
}

.badge-admin {
    color: var(--ui-warning);
    background: var(--ui-warning-bg);
    border-color: var(--ui-warning-border);
}

.badge-user {
    color: var(--ui-text-strong);
    background: var(--ui-surface-muted);
    border-color: var(--ui-border);
}

.badge-traveller {
    color: var(--ui-info);
    background: var(--ui-info-bg);
    border-color: var(--ui-info-border);
}

:is(.status-badge.status-sent, .status-badge.status-delivered) {
    color: var(--ui-success);
    background: var(--ui-success-bg);
    border-color: var(--ui-success-border);
}

.status-badge.status-opened {
    color: var(--ui-info);
    background: var(--ui-info-bg);
    border-color: var(--ui-info-border);
}

.status-badge.status-pending {
    color: var(--ui-warning);
    background: var(--ui-warning-bg);
    border-color: var(--ui-warning-border);
}

.status-badge.status-failed {
    color: var(--ui-danger);
    background: var(--ui-danger-bg);
    border-color: var(--ui-danger-border);
}

:is(.badge-danger, .badge-error, .status-badge.cancelled, .analytics-trend.down) {
    color: var(--ui-danger);
    background: var(--ui-danger-bg);
    border-color: var(--ui-danger-border);
}

:is(.badge-neutral, .badge-secondary) {
    color: var(--ui-text);
    background: var(--ui-surface-muted);
    border-color: var(--ui-border);
}

:is(.status-badge.draft, .status-badge.pending) {
    color: var(--ui-warning);
    background: var(--ui-warning-bg);
    border-color: var(--ui-warning-border);
}

.vip-badge {
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    border-color: var(--ui-primary);
}

.stat-card {
    padding: var(--space-8);
    text-align: center;
}

.stat-value {
    margin-bottom: var(--space-2);
    color: var(--ui-info);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
}

.stat-label {
    color: var(--ui-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Existing feature/instructor internals now inherit the same contract. */
:is(.feature-card, .instructor-card) {
    padding: var(--space-6);
}

.feature-card__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    box-shadow: none;
}

.feature-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.feature-card__title,
.instructor-card__name {
    margin-bottom: var(--space-2);
    color: var(--ui-text-strong);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.feature-card__description,
.instructor-card__bio {
    color: var(--ui-text-muted);
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
}

.instructor-card__avatar {
    width: 8.75rem;
    height: 8.75rem;
    margin: 0 auto var(--space-6);
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    box-shadow: none;
}

.instructor-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instructor-card__role {
    margin-bottom: var(--space-4);
    color: var(--ui-info);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.instructor-card__stats {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--ui-border);
}

/* --------------------------------------------------------------------------
   Alerts, empty states, tabs, tables, and overlays
   -------------------------------------------------------------------------- */

.alert,
.info-box,
.auth-alert-info,
.auth-alert-error,
.auth-alert-success {
    padding: var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-control);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    box-shadow: none;
}

:is(.alert-info, .alert.info, .info-box, .auth-alert-info) {
    color: var(--ui-info);
    background: var(--ui-info-bg);
    border-color: var(--ui-info-border);
}

:is(.alert-success, .alert.success, .auth-alert-success) {
    color: var(--ui-success);
    background: var(--ui-success-bg);
    border-color: var(--ui-success-border);
}

:is(.alert-warning, .alert.warning) {
    color: var(--ui-warning);
    background: var(--ui-warning-bg);
    border-color: var(--ui-warning-border);
}

:is(.alert-danger, .alert-error, .alert.error, .auth-alert-error) {
    color: var(--ui-danger);
    background: var(--ui-danger-bg);
    border-color: var(--ui-danger-border);
}

.empty-state {
    padding: var(--space-12) var(--space-6);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--radius-card);
    background: var(--ui-surface-subtle);
    color: var(--ui-text-muted);
    text-align: center;
}

.tab-nav,
.tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--ui-border);
}

:is(.tab-button, .tab-link, [role='tab']) {
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ui-text-muted);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    transition: color var(--motion-fast), border-color var(--motion-fast);
}

:is(.tab-button, .tab-link, [role='tab']):hover {
    color: var(--ui-text-strong);
}

:is(.tab-button.active, .tab-link.active, [role='tab'][aria-selected='true']) {
    color: var(--ui-primary-hover);
    border-bottom-color: var(--ui-primary);
}

.table,
table.ui-table,
table.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ui-text);
    background: var(--ui-surface);
}

:is(.table, table.ui-table, table.dashboard-table) th {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--ui-border-strong);
    background: var(--ui-surface-subtle);
    color: var(--ui-text-strong);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}

:is(.table, table.ui-table, table.dashboard-table) td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--ui-border);
    vertical-align: middle;
}

:is(.table, table.ui-table, table.dashboard-table) tbody tr:hover {
    background: var(--ui-surface-subtle);
}

.loading-spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--ui-border);
    border-top-color: var(--ui-primary);
    border-radius: 50%;
    display: inline-block;
    animation: ui-spin 600ms linear infinite;
}

@keyframes ui-spin {
    to { transform: rotate(360deg); }
}

.skeleton {
    border-radius: var(--radius-control);
    background: var(--ui-border);
    animation: ui-pulse 2s ease-in-out infinite;
}

@keyframes ui-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pagination :is(a, button, .page-link) {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0 var(--space-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.875rem;
    text-decoration: none;
}

.pagination :is(.active, [aria-current='page']) {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}

:is(.modal-content, .dialog-panel, .dropdown-menu, .popover, .nav-flyout-panel) {
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-card);
    background: var(--ui-surface);
    box-shadow: var(--shadow-overlay);
}

/* --------------------------------------------------------------------------
   Page/auth compatibility components
   -------------------------------------------------------------------------- */

.account-form-card,
.account-status-card,
.page-card,
.auth-form-card {
    overflow: hidden;
}

.account-form-header {
    padding: var(--space-8);
    border-bottom: 3px solid var(--ui-primary);
    background: var(--ui-surface-inverse);
    color: var(--ui-on-primary);
    text-align: center;
}

.account-form-title,
.account-status-title,
.auth-card-title,
.card-title {
    color: var(--ui-text-strong);
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: none;
}

.account-form-header .account-form-title {
    color: var(--ui-on-primary);
}

.account-form-subtitle,
.account-status-message,
.auth-card-subtitle,
.card-subtitle {
    color: var(--ui-text-muted);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}

.account-form-header .account-form-subtitle {
    color: var(--ui-border-strong);
}

.account-form-body,
.page-card-padding {
    padding: var(--space-8);
}

.account-form-footer {
    padding: var(--space-6) var(--space-8);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-subtle);
}

.account-status-card {
    padding: var(--space-12) var(--space-8);
    text-align: center;
}

.account-status-icon,
.icon-badge,
.auth-icon-badge {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

:is(.account-status-icon.success, .icon-badge--success) {
    color: var(--ui-success);
    background: var(--ui-success-bg);
}

.account-status-icon.warning {
    color: var(--ui-warning);
    background: var(--ui-warning-bg);
}

.account-status-icon.error {
    color: var(--ui-danger);
    background: var(--ui-danger-bg);
}

.auth-container,
.page-container {
    background: var(--ui-surface-inverse);
}

.auth-page-title {
    color: var(--ui-on-primary);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: none;
    text-shadow: none;
}

.auth-page-subtitle {
    color: var(--ui-border-strong);
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
}

.auth-social-btn,
.social-btn {
    width: 100%;
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--motion-fast), background-color var(--motion-fast),
        border-color var(--motion-fast);
}

:is(.auth-social-btn, .social-btn):hover {
    border-color: var(--ui-primary);
    background: var(--ui-info-bg);
    color: var(--ui-primary-hover);
}

/* Page-card and auth aliases are defined here so their optional legacy
   stylesheets no longer own a second component system. */
.page-container,
.auth-container {
    min-height: 100vh;
    padding-block: var(--space-12);
    position: relative;
    overflow: clip;
    background: var(--ui-surface-inverse);
}

.auth-container {
    padding-top: var(--space-24);
}

.page-container--compact {
    padding-top: var(--space-8);
}

.page-content-wrapper {
    padding-inline: var(--space-4);
}

.input-group,
.auth-input-group {
    position: relative;
}

.input-group .form-input,
.auth-form-input {
    padding-left: var(--space-12);
}

.input-icon,
.auth-input-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ui-text-disabled);
    pointer-events: none;
    transform: translateY(-50%);
    transition: color var(--motion-fast);
}

:is(.form-input, .auth-form-input):focus + :is(.input-icon, .auth-input-icon) {
    color: var(--ui-primary);
}

.divider,
.auth-divider {
    margin-block: var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--ui-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

:is(.divider, .auth-divider)::before,
:is(.divider, .auth-divider)::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--ui-border);
}

.page-title,
.auth-page-title {
    margin-bottom: var(--space-6);
    color: var(--ui-on-primary);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: none;
    text-shadow: none;
}

.page-subtitle,
.auth-page-subtitle {
    color: var(--ui-text-inverse-muted);
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
}

:is(.icon-badge, .auth-icon-badge, .auth-icon-badge-info, .auth-icon-badge-error,
    .auth-icon-badge-success) {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-info);
    background: var(--ui-info-bg);
}

:is(.icon-badge--success, .auth-icon-badge-success) {
    color: var(--ui-success);
    background: var(--ui-success-bg);
}

.auth-icon-badge-error {
    color: var(--ui-danger);
    background: var(--ui-danger-bg);
}

.tips-box,
.auth-tips-box {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--ui-info-border);
    border-radius: var(--radius-card);
    background: var(--ui-info-bg);
    color: var(--ui-info);
}

.security-tips,
.auth-security-tips,
.auth-testimonial-card {
    margin-top: var(--space-8);
    padding: var(--space-6);
    border: 1px solid var(--ui-border-inverse);
    border-radius: var(--radius-card);
    background: var(--ui-surface-inverse-soft);
    color: var(--ui-on-primary);
    box-shadow: none;
}

.tip-item,
.auth-tip-item {
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--ui-text-inverse-muted);
    font-family: var(--font-body);
    font-size: 0.875rem;
}

:is(.tip-item, .auth-tip-item):last-child {
    margin-bottom: 0;
}

.tip-icon,
.auth-tip-icon,
.check-icon,
.auth-check-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--ui-focus-inverse);
    background: var(--ui-surface-inverse-soft);
}

.tour-showcase,
.auth-tour-showcase {
    margin-block: var(--space-8);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.tour-card-mini,
.auth-tour-card-mini {
    overflow: hidden;
    border: 1px solid var(--ui-border-inverse);
    border-radius: var(--radius-card);
    display: block;
    background: var(--ui-surface-inverse-soft);
    color: var(--ui-on-primary);
    text-decoration: none;
    transform: none !important;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

:is(.tour-card-mini, .auth-tour-card-mini):is(:hover, :focus-visible) {
    border-color: var(--ui-focus-inverse);
    box-shadow: var(--shadow-interactive);
    transform: none !important;
}

:is(.tour-card-mini, .auth-tour-card-mini) img {
    width: 100%;
    height: 7.5rem;
    object-fit: cover;
}

:is(.tour-card-mini, .auth-tour-card-mini) .content {
    padding: var(--space-3);
    color: var(--ui-on-primary);
}

:is(.tour-card-mini, .auth-tour-card-mini) .title {
    margin-bottom: var(--space-1);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
}

:is(.tour-card-mini, .auth-tour-card-mini) .location {
    color: var(--ui-text-inverse-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.feature-list,
.auth-feature-list {
    margin-block: var(--space-8);
    padding: 0;
    list-style: none;
}

:is(.feature-list, .auth-feature-list) li {
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--ui-text-inverse-muted);
}

.benefits,
.auth-benefits {
    margin-top: var(--space-8);
}

.benefit-item,
.auth-benefit-item {
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--ui-text-inverse-muted);
    font-size: 0.875rem;
}

:is(.benefit-item, .auth-benefit-item) svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    color: var(--ui-focus-inverse);
}

.link,
.auth-link {
    color: var(--ui-info);
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--motion-fast);
}

:is(.link, .auth-link):hover {
    color: var(--ui-primary-hover);
    text-decoration: underline;
}

.email-animation,
.auth-email-animation {
    margin-bottom: var(--space-8);
    padding: var(--space-8);
    border: 1px solid var(--ui-border-inverse);
    border-radius: var(--radius-card);
    position: relative;
    overflow: hidden;
    background: var(--ui-surface-inverse-soft);
    color: var(--ui-on-primary);
    text-align: center;
}

.email-icon-wrapper,
.auth-email-icon-wrapper {
    margin-bottom: var(--space-4);
    position: relative;
    display: inline-block;
}

.email-icon,
.auth-email-icon {
    width: 4rem;
    height: 4rem;
}

.auth-text-center {
    text-align: center;
}

.auth-mb-6 {
    margin-bottom: var(--space-6);
}

.auth-mt-6 {
    margin-top: var(--space-6);
}

.page-grid {
    display: grid;
    gap: var(--space-6);
}

/* --------------------------------------------------------------------------
   Layout helpers and deliberate exceptions
   -------------------------------------------------------------------------- */

.section-breathing {
    padding-block: var(--space-16);
}

.section-breathing-sm {
    padding-block: var(--space-12);
}

.content-breathing {
    padding: var(--space-8);
}

.filter-sidebar {
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-card);
    background: var(--ui-surface);
}

.filter-group {
    padding: var(--space-6);
    border-bottom: 1px solid var(--ui-border);
}

.filter-group:last-child {
    border-bottom: 0;
}

.filter-title {
    margin-bottom: var(--space-4);
    color: var(--ui-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.filter-option {
    min-height: 2.75rem;
    padding: var(--space-2);
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color var(--motion-fast);
}

.filter-option:hover {
    background: var(--ui-surface-subtle);
}

.filter-option input[type='checkbox'] {
    margin-right: var(--space-2);
    accent-color: var(--ui-primary);
}

.sticky-below-nav,
.sticky-below-nav-light,
.sticky-below-nav-white {
    position: sticky;
    top: 5rem;
    z-index: 40;
}

.sticky-below-nav-light {
    background: var(--ui-surface-subtle);
}

.sticky-below-nav-white {
    background: var(--ui-surface);
}

.touch-target {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Gallery and editorial image grids intentionally remain square, edge-to-edge,
   shadowless, and governed by their aspect-ratio/justified-row algorithms. */
:is(.justified-gallery, .gallery-grid, .gallery-list-grid, .day-photos,
    .expedition-photos, .team-photo-grid) :is(.gallery-item, .day-photo-item,
    .expedition-photo-item, .team-photo-item) {
    border-radius: 0;
    box-shadow: none;
}

/* Rectilinear shape contract
   --------------------------------------------------------------------------
   This layer is loaded after page CSS so old component rules, inline radius
   values, and legacy Tailwind utilities all resolve to the same square shape.
   Structural surfaces (cards, panels, containers, inputs, buttons, menus)
   stay square by default. Semantic circle/pill affordances — avatars,
   identity icons, badges/chips/tags, toggle knobs, and rounded-end tracks —
   are deliberately narrow exceptions and must opt in through a role,
   meaningful class, the `.ui-circle` escape hatch, or the `.ui-pill` escape
   hatch below. Add new exceptions here rather than fighting the reset. */
:root body * {
    border-radius: 0 !important;
}

/* True circles: avatars, identity icons, dots, spinners, toggle/switch
   knobs. `--radius-circle` resolves to a stadium shape on non-square
   elements and a perfect circle on square ones, so `.rounded-full` (the
   Tailwind convention already used throughout the templates for both
   circular avatars and pill badges) is a safe blanket opt-in here. */
:root body :is(
    .ui-circle,
    .rounded-circle,
    .rounded-full,
    input[type='radio'],
    .avatar,
    .avatar-preview,
    .avatar-placeholder,
    .avatar-image,
    .judge-avatar,
    .instructor-avatar,
    .instructor-card__avatar,
    .instructor-card__avatar-placeholder,
    .icon-badge,
    .icon-badge--success,
    .icon-badge-success,
    .account-status-icon,
    .auth-icon-badge,
    .auth-icon-badge-info,
    .auth-icon-badge-error,
    .auth-icon-badge-success,
    .tip-icon,
    .auth-tip-icon,
    .check-icon,
    .auth-check-icon,
    .picker-spinner,
    .loading-spinner,
    .gallery-spinner,
    .lightbox-spinner,
    .spinner,
    .tour-carousel-dot,
    .status-dot,
    .dash-cond-quality__dot,
    .cond-hero__score-dot,
    .cond-vbadge__dot,
    .cond-film__best-dot,
    .lens-suite__viz-dot,
    .aurora-time-notice__dot,
    .alt-chart-chip__dot,
    .dash-time-pulse,
    .planner-map__pin,
    .aurora-observer-pulse,
    .price-handle-visual,
    .em-reticle,
    .mw-legend__swatch,
    .toggle-knob,
    .toggle-thumb,
    .switch-knob,
    .switch-thumb,
    .le-legend__dot,
    .pt-loading-pill__dot
) {
    border-radius: var(--radius-circle) !important;
}

/* Pills: status/label badges, chips, tags, and rounded-end progress or
   slider tracks. These read as labels/affordances, not structural
   surfaces, so they keep a true pill radius instead of the default 0.
   `.ui-pill` is a generic opt-in for future badge-like markup that
   doesn't already carry one of the named classes below. */
:root body :is(
    .ui-pill,
    .badge,
    .status-badge,
    .tour-card-badge,
    .award-badge,
    .instructor-award-badge,
    .equipment-badge,
    .gallery-card__badge,
    .location-badge,
    .tour-badge,
    .instructor-badge-experience,
    .triage-key,
    .newsletter-form__icon,
    .calc-badge,
    .ae-row__badge,
    .pt-loading-pill
) {
    border-radius: var(--radius-full) !important;
}

/* Screen-reader utility retained for non-Tailwind contexts. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:is(:focus, :active) {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

@media (max-width: 48rem) {
    .page-container,
    .auth-container {
        min-height: auto;
        padding-block: var(--space-10);
    }

    .page-container--compact {
        padding-top: var(--space-2);
    }

    .page-content-wrapper {
        padding-inline: var(--space-3);
    }

    .tour-showcase,
    .auth-tour-showcase {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .section-breathing {
        padding-block: var(--space-10);
    }

    .section-breathing-sm {
        padding-block: var(--space-10);
    }

    .content-breathing,
    .account-form-body,
    .account-form-footer,
    .page-card-padding,
    :is(.feature-card, .instructor-card, .tour-card-content, .form-section) {
        padding: var(--space-4);
    }

    :is(.btn-lg, .auth-btn-primary) {
        min-height: 3rem;
    }

    :is(.form-input, .form-select, .form-control, .auth-form-input, .newsletter-form__field) {
        min-height: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (prefers-contrast: high) {
    :is(.form-input, .form-select, .form-textarea, .form-control, .auth-form-input,
        .newsletter-form__field),
    :is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger,
        .btn-aerial-primary, .auth-btn-primary, .auth-btn-secondary) {
        border-width: 2px;
    }
}

@media print {
    :is(.card, .page-card, .account-form-card, .form-card, .photo-card,
        .stat-card, .feature-card, .instructor-card, .testimonial-card) {
        border-color: var(--ui-border-strong);
        box-shadow: none;
    }
}

/* Inline support links in money surfaces (billing account page).
 *
 * These sit inside small-print paragraphs, so on a phone they were
 * ~15px tall — well under the 44px minimum for a support path someone
 * reaches for when a payment has gone wrong. Give them a real 44px
 * target on touch-sized viewports only; desktop keeps the plain
 * inline link so sentence flow is unchanged. */
.support-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 767px) {
    .support-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}