/**
 * TUNNEL — Socle visuel des parcours client (front-office)
 * =======================================================
 * Utilisé par : cartes cadeaux, réservation terrain, activités, préinscription.
 *
 * Deux rôles :
 *  1. Fournir les classes `.tunnel-*` (panneaux, champs, CTA, choix, stepper).
 *  2. Remettre à niveau les primitives Bootstrap UNIQUEMENT dans le scope
 *     `.tunnel`, pour que les composants partagés non encore migrés
 *     (IdentificationStep, PaymentSelector...) héritent du même rendu.
 *
 * Règles :
 *  - Aucune couleur en dur : tout dérive de css/default/variables.css.
 *  - Rien ne fuit hors de `.tunnel` : les modules non migrés sont intacts.
 *
 * Ordre de chargement : après variables.css et common_components.css.
 */

/* ==========================================================================
   1. TOKENS DU TUNNEL
   ========================================================================== */

.tunnel {
    /* Surfaces */
    --t-page-bg: var(--background, #faf9f6);
    --t-surface: var(--body-bg, #fff);
    --t-surface-soft: color-mix(in srgb, var(--primary-color) 4%, var(--t-surface));
    --t-border: var(--border-light, #e7e2d9);
    --t-border-strong: color-mix(in srgb, var(--t-border) 70%, var(--text-600));

    /* Encre */
    --t-ink: var(--text-900, #0f1115);
    --t-ink-muted: var(--text-600, #5b6270);

    /* Accent (suit le thème actif) */
    --t-accent: var(--primary-color);
    --t-accent-hover: var(--primary-hover);
    --t-accent-soft: color-mix(in srgb, var(--primary-color) 8%, var(--t-surface));
    --t-accent-ring: color-mix(in srgb, var(--primary-color) 18%, transparent);
    --t-on-accent: var(--btn-text-color, #fff);

    /* Statuts */
    --t-success: #15803d;
    --t-success-soft: color-mix(in srgb, #15803d 8%, var(--t-surface));
    --t-danger: #b42318;
    --t-danger-soft: color-mix(in srgb, #b42318 7%, var(--t-surface));

    /* Formes */
    --t-radius-lg: 20px;
    --t-radius: 14px;
    --t-radius-sm: 10px;

    /* Élévation — volontairement discrète (direction épurée) */
    --t-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -20px rgba(15, 23, 42, .28);
    --t-shadow-raised: 0 2px 4px rgba(15, 23, 42, .05), 0 20px 44px -22px rgba(15, 23, 42, .34);

    /* Contrôles — cibles tactiles confortables (vs 38px du backend) */
    --t-control-h: 52px;
    --t-control-px: 1rem;

    /* Rythme */
    --t-gap: 1.25rem;
    --t-panel-px: clamp(1.25rem, 4vw, 2.5rem);
    --t-panel-py: clamp(1.5rem, 4vw, 2.25rem);

    --t-transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. SHELL DE PAGE
   ========================================================================== */

.tunnel {
    background: var(--t-page-bg);
    color: var(--t-ink);
    padding-bottom: clamp(3rem, 8vw, 5rem);
}

.tunnel .container {
    max-width: 880px;
}

/* Les parcours à 2 colonnes (paiement + récap) respirent davantage */
.tunnel--wide .container {
    max-width: 1080px;
}

/* ==========================================================================
   3. STEPPER
   ========================================================================== */

.tunnel .unified-stepper {
    padding: clamp(1.5rem, 5vw, 2.75rem) 0 clamp(1.25rem, 3vw, 2rem);
}

.tunnel-stepper__count {
    display: none;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--t-ink-muted);
    margin-bottom: .625rem;
}

.tunnel-stepper__current {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--t-ink);
    margin-top: .125rem;
}

.tunnel-stepper__track {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tunnel-stepper__seg {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--t-border);
    overflow: hidden;
    position: relative;
}

.tunnel-stepper__seg::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--t-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
}

.tunnel-stepper__seg.is-done::after,
.tunnel-stepper__seg.is-active::after {
    transform: scaleX(1);
}

.tunnel-stepper__seg.is-active::after {
    background: linear-gradient(90deg, var(--t-accent), color-mix(in srgb, var(--t-accent) 55%, var(--t-surface)));
}

.tunnel-stepper__labels {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .75rem;
}

.tunnel-stepper__label {
    flex: 1;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--t-ink-muted);
    text-align: center;
    transition: color var(--t-transition);
}

.tunnel-stepper__label.is-active {
    color: var(--t-ink);
    font-weight: 650;
}

.tunnel-stepper__label.is-done {
    color: var(--t-accent);
}

/* Mobile : les libellés cèdent la place au compteur « Étape 2/5 » */
@media (max-width: 575.98px) {
    .tunnel-stepper__count {
        display: block;
    }

    .tunnel-stepper__labels {
        display: none;
    }
}

/* ==========================================================================
   4. PANNEAU (remplace la card d'admin)
   ========================================================================== */

.tunnel-panel {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow);
    overflow: hidden;
    animation: tunnelPanelIn 260ms cubic-bezier(.4, 0, .2, 1) both;
}

.tunnel-panel__header {
    padding: var(--t-panel-py) var(--t-panel-px) 0;
    /* Pas de fond gris ni de filet : la hiérarchie est typographique. */
}

.tunnel-panel__title {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--t-ink);
    margin: 0;
}

.tunnel-panel__subtitle {
    margin: .5rem 0 0;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--t-ink-muted);
    max-width: 60ch;
}

.tunnel-panel__body {
    padding: var(--t-panel-py) var(--t-panel-px);
}

.tunnel-panel__header + .tunnel-panel__body {
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
}

.tunnel-panel__footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem var(--t-panel-px) var(--t-panel-py);
    border-top: 1px solid var(--t-border);
    background: var(--t-surface);
}

.tunnel-panel__footer--split {
    justify-content: space-between;
}

.tunnel-panel__footer--end {
    justify-content: flex-end;
}

@keyframes tunnelPanelIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   5. CHAMPS
   ========================================================================== */

.tunnel-field {
    display: flex;
    flex-direction: column;
    gap: .4375rem;
    margin-bottom: var(--t-gap);
}

.tunnel-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--t-ink);
    line-height: 1.35;
}

.tunnel-label__required {
    color: var(--t-danger);
    margin-left: .125rem;
}

.tunnel-label__optional {
    font-weight: 400;
    font-size: .8125rem;
    color: var(--t-ink-muted);
    margin-left: .25rem;
}

.tunnel-control,
.tunnel .form-control,
.tunnel .form-select {
    width: 100%;
    min-height: var(--t-control-h);
    padding: .75rem var(--t-control-px);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--t-ink);
    background-color: var(--t-surface);
    border: 1px solid var(--t-border-strong);
    border-radius: var(--t-radius-sm);
    box-shadow: none;
    transition: border-color var(--t-transition), box-shadow var(--t-transition), background-color var(--t-transition);
}

.tunnel .form-control-lg,
.tunnel .form-select-lg,
.tunnel .input-group-lg > .form-control {
    min-height: var(--t-control-h);
    font-size: 1rem;
    border-radius: var(--t-radius-sm);
}

.tunnel-control::placeholder,
.tunnel .form-control::placeholder {
    color: color-mix(in srgb, var(--t-ink-muted) 65%, transparent);
}

.tunnel-control:hover:not(:disabled),
.tunnel .form-control:hover:not(:disabled),
.tunnel .form-select:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--t-accent) 45%, var(--t-border-strong));
}

.tunnel-control:focus,
.tunnel .form-control:focus,
.tunnel .form-select:focus {
    outline: none;
    border-color: var(--t-accent);
    box-shadow: 0 0 0 4px var(--t-accent-ring);
}

.tunnel-control:disabled,
.tunnel .form-control:disabled {
    background-color: var(--t-surface-soft);
    color: var(--t-ink-muted);
    cursor: not-allowed;
}

textarea.tunnel-control,
.tunnel textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.tunnel-control.is-invalid,
.tunnel .form-control.is-invalid,
.tunnel .form-select.is-invalid {
    border-color: var(--t-danger);
    background-image: none;
    padding-right: var(--t-control-px);
}

.tunnel-control.is-invalid:focus,
.tunnel .form-control.is-invalid:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-danger) 14%, transparent);
}

.tunnel-field:last-child {
    margin-bottom: 0;
}

.tunnel-hint {
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--t-ink-muted);
}

.tunnel-error {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--t-danger);
    animation: tunnelErrorIn 180ms ease both;
}

@keyframes tunnelErrorIn {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Groupe avec suffixe (montant + €)
   `.tunnel-control` n'est pas un `.form-control` : Bootstrap ne lui applique
   pas le dimensionnement flex des groupes, on le reprend explicitement. */
.tunnel .input-group {
    flex-wrap: nowrap;
}

.tunnel .input-group > .form-control,
.tunnel .input-group > .tunnel-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.tunnel .input-group-text {
    min-height: var(--t-control-h);
    padding: .75rem var(--t-control-px);
    font-size: 1rem;
    font-weight: 600;
    color: var(--t-ink-muted);
    background: var(--t-surface-soft);
    border: 1px solid var(--t-border-strong);
    border-left: none;
    border-radius: 0 var(--t-radius-sm) var(--t-radius-sm) 0;
}

/* Le label Bootstrap hérité s'aligne sur le label tunnel */
.tunnel .form-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--t-ink);
    margin-bottom: .4375rem;
}

/* ==========================================================================
   6. BOUTONS
   ========================================================================== */

.tunnel-btn,
.tunnel .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--t-control-h);
    padding: .75rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--t-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--t-transition), background-color var(--t-transition),
                border-color var(--t-transition), box-shadow var(--t-transition), color var(--t-transition);
}

.tunnel .btn:focus-visible,
.tunnel-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--t-accent-ring);
}

.tunnel-btn--primary,
.tunnel .btn-primary {
    background-color: var(--t-accent);
    border-color: var(--t-accent);
    color: var(--t-on-accent);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.tunnel-btn--primary:hover:not(:disabled),
.tunnel .btn-primary:hover:not(:disabled) {
    background-color: var(--t-accent-hover);
    border-color: var(--t-accent-hover);
    color: var(--t-on-accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--t-accent) 60%, transparent);
}

.tunnel-btn--primary:active:not(:disabled),
.tunnel .btn-primary:active:not(:disabled) {
    transform: none;
}

.tunnel-btn--ghost,
.tunnel .btn-outline-secondary {
    background-color: transparent;
    border-color: var(--t-border-strong);
    color: var(--t-ink);
}

.tunnel-btn--ghost:hover:not(:disabled),
.tunnel .btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--t-surface-soft);
    border-color: var(--t-accent);
    color: var(--t-ink);
}

.tunnel .btn-dark {
    background-color: var(--t-accent);
    border-color: var(--t-accent);
    color: var(--t-on-accent);
}

.tunnel .btn-dark:hover:not(:disabled) {
    background-color: var(--t-accent-hover);
    border-color: var(--t-accent-hover);
}

.tunnel .btn-outline-dark {
    border-color: var(--t-border-strong);
    color: var(--t-ink);
}

.tunnel .btn-outline-dark:hover:not(:disabled) {
    background-color: var(--t-surface-soft);
    border-color: var(--t-accent);
    color: var(--t-ink);
}

.tunnel .btn:disabled,
.tunnel-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.tunnel .btn-link {
    min-height: auto;
    padding: 0;
    font-weight: 600;
    color: var(--t-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   7. CARTES DE CHOIX (montant, créneau, session, formule)
   ========================================================================== */

.tunnel-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--t-choice-min, 140px), 1fr));
    gap: .75rem;
}

.tunnel-choices--wide {
    --t-choice-min: 220px;
}

.tunnel-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .1875rem;
    min-height: 76px;
    width: 100%;
    padding: 1rem 2.5rem 1rem 1.125rem;
    text-align: left;
    background: var(--t-surface);
    border: 1.5px solid var(--t-border);
    border-radius: var(--t-radius);
    color: var(--t-ink);
    cursor: pointer;
    transition: transform var(--t-transition), border-color var(--t-transition),
                box-shadow var(--t-transition), background-color var(--t-transition);
}

.tunnel-choice--center {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 1.125rem;
}

/* Pas de badge ici : la bordure et le fond teinté suffisent, et le badge
   chevauchait la valeur sur les cellules étroites. */
.tunnel-choice--center .tunnel-choice__check {
    display: none;
}

.tunnel-choice:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--t-accent) 55%, var(--t-border));
    box-shadow: var(--t-shadow-raised);
    transform: translateY(-2px);
}

.tunnel-choice:focus-visible {
    outline: none;
    border-color: var(--t-accent);
    box-shadow: 0 0 0 4px var(--t-accent-ring);
}

.tunnel-choice.is-selected {
    border-color: var(--t-accent);
    background: var(--t-accent-soft);
    box-shadow: 0 0 0 1px var(--t-accent) inset;
}

.tunnel-choice:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.tunnel-choice__value {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
}

.tunnel-choice__label {
    font-size: .8125rem;
    color: var(--t-ink-muted);
    line-height: 1.35;
}

.tunnel-choice__check {
    position: absolute;
    top: .625rem;
    right: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--t-accent);
    color: var(--t-on-accent);
    font-size: .6875rem;
    opacity: 0;
    transform: scale(.6);
    transition: opacity var(--t-transition), transform var(--t-transition);
}

.tunnel-choice.is-selected .tunnel-choice__check {
    opacity: 1;
    transform: scale(1);
}

/* Variante média (vignette + libellé) */
.tunnel-choice--media {
    padding: 0;
    overflow: hidden;
    min-height: 0;
}

.tunnel-choice--media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.tunnel-choice--media .tunnel-choice__label {
    padding: .625rem .875rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--t-ink);
}

/* ==========================================================================
   8. RÉCAPITULATIF
   ========================================================================== */

.tunnel-summary {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    overflow: hidden;
}

.tunnel-summary--sticky {
    position: sticky;
    top: calc(var(--nav-height, 64px) + 1rem);
}

.tunnel-summary__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1.125rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--t-ink-muted);
    background: var(--t-surface-soft);
    border-bottom: 1px solid var(--t-border);
}

.tunnel-summary__body {
    padding: .5rem 1.125rem;
}

.tunnel-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--t-border) 60%, transparent);
}

.tunnel-row:last-child {
    border-bottom: none;
}

.tunnel-row__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--t-ink-muted);
    flex-shrink: 0;
}

.tunnel-row__value {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--t-ink);
    text-align: right;
    overflow-wrap: anywhere;
}

.tunnel-row__value--accent {
    color: var(--t-accent);
    font-size: 1.0625rem;
}

.tunnel-row__value--code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .06em;
}

/* ==========================================================================
   9. SUCCÈS
   ========================================================================== */

.tunnel-success {
    text-align: center;
    padding: clamp(2rem, 6vw, 3rem) var(--t-panel-px) clamp(1.5rem, 4vw, 2rem);
    background: linear-gradient(180deg, var(--t-success-soft), var(--t-surface));
    border-bottom: 1px solid var(--t-border);
}

.tunnel-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--t-surface);
    color: var(--t-success);
    font-size: 1.75rem;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--t-success) 8%, transparent);
    animation: tunnelPop 420ms cubic-bezier(.34, 1.56, .64, 1) both;
}

.tunnel-success__title {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--t-ink);
    margin: 0 0 .375rem;
}

.tunnel-success__text {
    margin: 0;
    font-size: .9375rem;
    color: var(--t-ink-muted);
}

@keyframes tunnelPop {
    from {
        opacity: 0;
        transform: scale(.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   10. RÉASSURANCE + MESSAGES
   ========================================================================== */

.tunnel-reassurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.75rem;
    margin-top: 1.5rem;
    font-size: .8125rem;
    color: var(--t-ink-muted);
}

.tunnel-reassurance span {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.tunnel-note {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .875rem 1.125rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: var(--t-radius-sm);
    background: var(--t-accent-soft);
    color: var(--t-ink);
    border: 1px solid color-mix(in srgb, var(--t-accent) 20%, transparent);
}

.tunnel-note--success {
    background: var(--t-success-soft);
    border-color: color-mix(in srgb, var(--t-success) 22%, transparent);
}

/* Alertes Bootstrap héritées : même langage visuel */
.tunnel .alert {
    padding: .875rem 1.125rem;
    font-size: .875rem;
    border-radius: var(--t-radius-sm);
    border-width: 1px;
}

.tunnel .alert-info {
    background: var(--t-accent-soft);
    border-color: color-mix(in srgb, var(--t-accent) 20%, transparent);
    color: var(--t-ink);
}

.tunnel .alert-success {
    background: var(--t-success-soft);
    border-color: color-mix(in srgb, var(--t-success) 22%, transparent);
    color: var(--t-ink);
}

.tunnel .alert-danger {
    background: var(--t-danger-soft);
    border-color: color-mix(in srgb, var(--t-danger) 22%, transparent);
    color: var(--t-ink);
}

/* ==========================================================================
   11. PONT BOOTSTRAP — composants partagés non encore migrés
   ========================================================================== */

.tunnel .payment-selector-container .card,
.tunnel .payment-component-wrapper .card,
.tunnel .identification-step .card {
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: none;
}

.tunnel .payment-selector-container .card-header,
.tunnel .identification-step .card-header {
    background: var(--t-surface);
    border-bottom: 1px solid var(--t-border);
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.tunnel .payment-method-btn {
    min-height: var(--t-control-h);
    border-radius: var(--t-radius-sm);
    font-weight: 600;
}

.tunnel .btn-group > .btn:not(:first-child) {
    margin-left: .5rem;
}

.tunnel .btn-group {
    gap: .5rem;
    flex-wrap: wrap;
}

.tunnel .btn-group > .btn {
    border-radius: var(--t-radius-sm) !important;
}

/* ==========================================================================
   12. MOBILE — le CTA principal reste sous le pouce
   ========================================================================== */

@media (max-width: 767.98px) {
    .tunnel-panel {
        border-radius: var(--t-radius);
    }

    .tunnel-panel__footer {
        position: sticky;
        bottom: 0;
        z-index: var(--z-sticky, 1020);
        flex-direction: column-reverse;
        gap: .625rem;
        padding: .875rem var(--t-panel-px) calc(.875rem + env(safe-area-inset-bottom, 0px));
        background: var(--t-surface);
        box-shadow: 0 -8px 24px -16px rgba(15, 23, 42, .35);
    }

    .tunnel-panel__footer .tunnel-btn,
    .tunnel-panel__footer .btn {
        width: 100%;
    }

    .tunnel-summary--sticky {
        position: static;
    }
}

/* ==========================================================================
   13. DARK MODE + ACCESSIBILITÉ
   ========================================================================== */

:root[data-bs-theme="dark"] .tunnel {
    --t-page-bg: var(--background);
    --t-surface: var(--card-bg-color);
    --t-border: color-mix(in srgb, var(--text-600) 28%, transparent);
    --t-border-strong: color-mix(in srgb, var(--text-600) 45%, transparent);
    --t-success: #4ade80;
    --t-danger: #f87171;
    --t-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -20px rgba(0, 0, 0, .7);
    --t-shadow-raised: 0 2px 4px rgba(0, 0, 0, .35), 0 20px 44px -22px rgba(0, 0, 0, .8);
}

@media (prefers-reduced-motion: reduce) {
    .tunnel *,
    .tunnel *::before,
    .tunnel *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .tunnel-choice:hover:not(:disabled),
    .tunnel .btn-primary:hover:not(:disabled) {
        transform: none;
    }
}