/* The event pages an attendee walks through — landing (EventLanding), register (EventBand over the
   registration.css form) and confirmation (EventConfirmation) — public and member portal alike.
   The hero is the member home's language (navy band, PulseBackdrop, Instrument Serif title arriving
   word by word, a glass card with a border light); the body is its card language (white 16px
   cards, soft teal tiles, lift on hover).

   Global, not scoped: the glass card's actions and the confirmation's parts are passed in as
   RenderFragments by the pages, and a scoped sheet never reaches markup another component renders.
   Every class is `evt-`.

   Motion is gated on prefers-reduced-motion throughout; fill mode is `backwards`, never `both` — a
   held transform makes every card a stacking context (see the card-animation note in app.css). The
   running pulse is for arriving (landing) and finishing (confirmation); the register band's trace
   stands still, because nothing should move beside a field someone is typing into. */

@property --evt-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* The public layout's warm off-white gives way to the portal's cool ground on event pages. */
.public-page:has(.evt-page) { background: #F4F6FB; }

.evt-page {
    --evt-ease: cubic-bezier(.2, .8, .2, 1);
    --evt-spring: cubic-bezier(.34, 1.5, .64, 1);
    --evt-soft: rgba(var(--crm-teal-rgb, 0, 197, 168), .14);
    --evt-ink: color-mix(in oklab, var(--crm-teal, #00C5A8) 55%, #06131F);
    --evt-lift: 0 22px 50px -12px rgba(13, 36, 71, .22);
    --evt-line: var(--crm-border, #DCE5F0);
    --evt-text: var(--crm-text, #0D2447);
    --evt-text-2: var(--crm-text-2, #4A5B78);
    --evt-serif: 'Instrument Serif', Georgia, serif;
    color: var(--evt-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Preview notice ────────────────────────────────── */
.evt-preview { background: #FFF4D6; color: #5C4300; border-bottom: 1px solid #F0DDA0; font-size: .92rem; }
.evt-preview-inner { display: flex; align-items: center; gap: .6rem; padding-top: .7rem; padding-bottom: .7rem; }

/* ── Hero ──────────────────────────────────────────── */
.evt-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--crm-navy, #0D2447);
    color: #fff;
    min-height: 532px;
    /* The foot is the pulse's lane: the trace's spikes reach ~180px up from the bottom edge
       (PulseBackdrop's desktop drawing), so the text stops above them. */
    padding: 3.25rem 0 12rem;
}

/* A cover photo sits under the pulse, washed navy from the text side and from the foot so the
   title stays legible and the trace keeps a clean baseline to run along. */
.evt-cover { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }

.evt-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, var(--crm-navy, #0D2447) 0%, transparent 45%),
        linear-gradient(90deg,
            color-mix(in srgb, var(--crm-navy, #0D2447) 94%, transparent) 0%,
            color-mix(in srgb, var(--crm-navy, #0D2447) 80%, transparent) 50%,
            color-mix(in srgb, var(--crm-navy, #0D2447) 55%, transparent) 100%);
}

.evt-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.75rem;
    font-size: .86rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .2s;
}

.evt-back:hover { color: #fff; }
.evt-back .bi { transition: transform .3s var(--evt-ease); }
.evt-back:hover .bi { transform: translateX(-3px); }

.evt-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 3.5rem; align-items: center; }

.evt-eyebrow { font-size: .88rem; font-weight: 500; color: rgba(255, 255, 255, .72); margin-bottom: .75rem; }

.evt-title {
    margin: 0;
    font-family: var(--evt-serif);
    font-weight: 400;
    letter-spacing: -.01em;
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    line-height: 1.02;
    color: #fff;
    max-width: 20ch;
    text-wrap: balance;
}

.evt-w { display: inline-block; }

.evt-lede {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    font-size: 1.06rem;
    color: rgba(255, 255, 255, .8);
    margin: 1rem 0 0;
    max-width: 560px;
}

.evt-lede .bi { color: var(--crm-teal, #00C5A8); }

.evt-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; margin-top: 1.9rem; }
.evt-stat { display: flex; align-items: center; gap: .75rem; }
.evt-num { font-family: var(--evt-serif); font-size: 2.25rem; line-height: 1; font-variant-numeric: tabular-nums; }
.evt-lab { font-size: .8rem; color: rgba(255, 255, 255, .72); line-height: 1.25; }
.evt-div { width: 1px; height: 40px; background: rgba(255, 255, 255, .18); }

/* ── Glass card ────────────────────────────────────── */
.evt-glass {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .6s var(--evt-ease);
}

.evt-glass.is-hot { transition: transform .1s linear; }
.evt-glass > * { position: relative; }

/* A light sweeps across the card once as the page arrives. */
.evt-glass::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
}

.evt-glare {
    position: absolute !important;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .16), transparent 45%);
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
}

.evt-glass.is-hot .evt-glare { opacity: 1; }

/* The border light the pulse "feeds" — the member home's Next-up beam (.mh-beam), same geometry
   and the same loop as PulseBackdrop.razor.css. Change the three together. */
.evt-beam {
    position: absolute !important;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    pointer-events: none;
    background: conic-gradient(from var(--evt-ang), transparent 0 64%, #fff 71%,
        rgba(var(--crm-teal-rgb, 0, 197, 168), .8) 75%, transparent 90%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
}

.evt-glass-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.evt-glass-eb { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--crm-teal, #00C5A8); }

.evt-chip-glass {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    height: 22px;
    padding: 0 .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: .72rem;
    font-weight: 600;
}

.evt-glass-main { display: flex; align-items: center; gap: 1.1rem; }

.evt-cd { position: relative; width: 68px; height: 68px; flex: none; }
.evt-cd-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.evt-cd-in b { font-size: 1.4rem; font-weight: 600; }
.evt-cd-in .evt-cd-now { font-size: .85rem; }
.evt-cd-in span { font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-top: 2px; }

.evt-ring { transform: rotate(-90deg); flex: none; }
.evt-ring-track { stroke: rgba(255, 255, 255, .14); }
.evt-ring-value { stroke: var(--crm-teal, #00C5A8); stroke-dashoffset: var(--o); }

.evt-glass-text { min-width: 0; }
.evt-glass-date { display: block; font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.evt-glass-meta { font-size: .86rem; color: rgba(255, 255, 255, .76); margin-top: .2rem; }

.evt-glass-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.evt-glass-actions:not(:has(*)) { display: none; }   /* an ended event offers nothing to do */
.evt-glass-status { margin: 0; font-size: .84rem; line-height: 1.45; color: rgba(255, 255, 255, .72); }

/* ── Buttons ───────────────────────────────────────── */
.evt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 44px;
    padding: 0 1.2rem;
    border-radius: 11px;
    border: 0;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s var(--evt-ease), filter .2s, background-color .2s, box-shadow .25s;
}

.evt-btn:active { transform: scale(.97); }
.evt-btn .bi-arrow-right { transition: transform .3s var(--evt-ease); }
.evt-btn:hover .bi-arrow-right { transform: translateX(3px); }
.evt-btn-accent { background: var(--crm-teal, #00C5A8); color: #081627; }
.evt-btn-accent:hover { filter: brightness(1.07); color: #081627; }
.evt-btn-ghost { background: none; border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-weight: 500; }
.evt-btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.evt-btn-navy { background: var(--crm-navy, #0D2447); color: #fff; }
.evt-btn-navy:hover { background: color-mix(in srgb, var(--crm-navy, #0D2447) 85%, var(--crm-teal, #00C5A8)); color: #fff; box-shadow: 0 10px 26px -12px rgba(13, 36, 71, .6); }

.evt-btn:focus-visible { outline: 2px solid var(--crm-teal, #00C5A8); outline-offset: 3px; }
.evt-btn-navy:focus-visible { outline-color: var(--crm-navy, #0D2447); }

/* ── Body ──────────────────────────────────────────── */
.evt-body { padding-top: 2.75rem; padding-bottom: 4rem; }
.evt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.75rem; align-items: start; }
.evt-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.evt-card {
    background: #fff;
    border: 1px solid var(--evt-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(13, 36, 71, .05), 0 6px 20px rgba(13, 36, 71, .05);
    color: var(--evt-text);
}

.evt-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem .8rem; }
.evt-card-h h2 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--evt-text); }
.evt-meta { font-size: .8rem; color: var(--evt-text-2); }

.evt-about-text {
    padding: 0 1.4rem 1.4rem;
    white-space: pre-line;
    font-size: 1rem;
    line-height: 1.7;
    color: color-mix(in srgb, var(--evt-text) 82%, #fff);
    max-width: 70ch;
    text-wrap: pretty;
}

/* Agenda: rows, with a teal rule that draws down the left edge of the one under the pointer. */
.evt-day {
    margin: 0;
    padding: 1rem 1.4rem .45rem;
    border-top: 1px solid var(--evt-line);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--evt-ink);
}

.evt-agenda { list-style: none; margin: 0; padding: 0; }

.evt-slot {
    position: relative;
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--evt-line);
    transition: background-color .25s;
}

.evt-day + .evt-agenda > .evt-slot:first-child { border-top: 0; }

.evt-slot::before {
    content: "";
    position: absolute;
    left: 0;
    top: .8rem;
    bottom: .8rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--crm-teal, #00C5A8);
    transform: scaleY(0);
    transition: transform .35s var(--evt-ease);
}

.evt-slot:hover { background: var(--crm-bg, #F2F6FC); }
.evt-slot:hover::before { transform: scaleY(1); }
.evt-card > .evt-agenda:last-child > .evt-slot:last-child { border-radius: 0 0 16px 16px; }

.evt-slot-time { font-family: var(--evt-serif); font-size: 1.4rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.evt-slot-end { display: block; font-family: 'Inter', system-ui, sans-serif; font-size: .75rem; color: var(--evt-text-2); margin-top: .25rem; }
.evt-slot-title { font-weight: 600; font-size: .98rem; line-height: 1.35; }
.evt-slot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin-top: .3rem; font-size: .82rem; color: var(--evt-text-2); }

.evt-slot-desc {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--evt-text-2);
    max-width: 62ch;
    margin: .45rem 0 0;
    white-space: pre-line;
}

.evt-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 22px;
    padding: 0 .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--evt-soft);
    color: var(--evt-ink);
}

/* Location */
.evt-place { display: flex; flex-direction: column; gap: 1.25rem; padding: 0 1.4rem 1.4rem; }
.evt-place-row { display: flex; align-items: flex-start; gap: 1rem; }
.evt-grow { flex: 1; min-width: 0; }

.evt-tile {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 12px;
    background: var(--evt-soft);
    color: var(--evt-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: transform .45s var(--evt-spring), background-color .3s, color .3s;
}

.evt-place-row:hover .evt-tile { transform: rotate(-8deg) scale(1.06); background: var(--crm-teal, #00C5A8); color: #081627; }

.evt-venue-name { font-weight: 600; font-size: 1rem; line-height: 1.35; }
.evt-venue-address { font-style: normal; font-size: .92rem; line-height: 1.55; color: var(--evt-text-2); margin: .15rem 0 0; }
.evt-venue-address span { display: block; }
.evt-online { margin: .15rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--evt-text-2); }

.evt-go {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .6rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--evt-ink);
    text-decoration: none;
}

.evt-go .bi { transition: transform .3s var(--evt-ease); }
.evt-go:hover { color: var(--evt-ink); }
.evt-go:hover .bi { transform: translate(2px, -2px); }

/* ── Tickets card ──────────────────────────────────── */
/* Sticky on the aside itself: the card is the aside's only child, so sticking the card would
   pin it inside a box exactly its own height. */
.evt-aside { position: sticky; top: 5.5rem; min-width: 0; }

.evt-card-empty { margin: 0; padding: 0 1.4rem 1.2rem; font-size: .9rem; color: var(--evt-text-2); }

.evt-tickets { list-style: none; margin: 0; padding: 0; }

.evt-ticket {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .9rem 1.4rem;
    border-top: 1px solid var(--evt-line);
}

.evt-ticket-text { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-width: 0; }
.evt-ticket-name { font-size: .95rem; font-weight: 600; }
.evt-ticket-desc { font-size: .82rem; line-height: 1.45; color: var(--evt-text-2); }

.evt-ticket-flag {
    font-size: .72rem;
    font-weight: 600;
    color: var(--evt-ink);
    background: var(--evt-soft);
    padding: .12rem .55rem;
    border-radius: 999px;
    margin-top: .2rem;
}

.evt-ticket-flag--muted { color: var(--evt-text-2); background: var(--crm-bg, #F2F6FC); }

.evt-ticket-price { font-family: var(--evt-serif); font-size: 1.6rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.evt-ticket--off .evt-ticket-name,
.evt-ticket--off .evt-ticket-price { color: var(--evt-text-2); }
.evt-ticket--off .evt-ticket-price { text-decoration: line-through; }

.evt-offers {
    list-style: none;
    margin: 0;
    padding: .9rem 1.4rem;
    border-top: 1px solid var(--evt-line);
    display: grid;
    gap: .45rem;
    font-size: .86rem;
    line-height: 1.45;
}

.evt-offers .bi { color: var(--evt-ink); margin-right: .3rem; }

.evt-note {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 0;
    padding: .85rem 1.4rem;
    border-top: 1px solid var(--evt-line);
    font-size: .86rem;
    line-height: 1.45;
    color: var(--evt-text-2);
}

.evt-note .bi { color: var(--evt-ink); }
.evt-note a { color: var(--crm-navy, #0D2447); font-weight: 600; }

.evt-card-cta { display: flex; margin: .4rem 1.4rem 0; height: 48px; }
.evt-card-status { margin: .75rem 1.4rem 0; font-size: .84rem; line-height: 1.45; color: var(--evt-text-2); }

.evt-card-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: 1.1rem;
    padding: .9rem 1.4rem 1.1rem;
    border-top: 1px solid var(--evt-line);
}

.evt-tool {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: none;
    padding: .2rem 0;
    font-size: .88rem;
    font-weight: 500;
    color: var(--evt-text-2);
    cursor: pointer;
    transition: color .2s;
}

.evt-tool:hover { color: var(--crm-navy, #0D2447); }
.evt-tool:focus-visible, .evt-go:focus-visible, .evt-back:focus-visible { outline: 2px solid var(--crm-teal, #00C5A8); outline-offset: 3px; border-radius: 4px; }

/* Loading: the hero band and its pulse appear at once; two soft bars stand in for the text. */
.evt-skel { height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .1); margin-bottom: 1rem; }
.evt-skel-a { width: 220px; }
.evt-skel-b { width: min(620px, 80%); height: 64px; border-radius: 14px; }

/* ── Mobile register bar ───────────────────────────── */
.evt-bar { display: none; }

/* ── Motion ────────────────────────────────────────── */
@keyframes evt-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes evt-word { from { opacity: 0; transform: translateY(.4em); filter: blur(10px); } }
@keyframes evt-draw { from { stroke-dashoffset: var(--c); } }
@keyframes evt-sheen { to { transform: translateX(260%) skewX(-18deg); } }
@keyframes evt-pulse-skel { 50% { opacity: .5; } }

/* Desktop 6.4s / phone 5.4s — PulseBackdrop.razor.css's loops; the head leaves the right edge at
   46.6% / 38.9%, and that is when this light sets off round the card. */
@keyframes evt-beam-d {
    0%, 46.5% { --evt-ang: -133.6deg; opacity: 0; }
    47.5% { --evt-ang: -145.6deg; opacity: 1; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
    65% { --evt-ang: -493.6deg; opacity: 1; }
    68%, 100% { --evt-ang: -493.6deg; opacity: 0; }
}

@keyframes evt-beam-p {
    0%, 38.9% { --evt-ang: -165.6deg; opacity: 0; }
    39.9% { --evt-ang: -177.6deg; opacity: 1; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
    57% { --evt-ang: -525.6deg; opacity: 1; }
    60%, 100% { --evt-ang: -525.6deg; opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    .evt-beam { animation: evt-beam-d 6.4s linear 1.2s infinite; }
    .evt-hero-loading .evt-skel { animation: evt-pulse-skel 1.4s ease-in-out infinite; }

    /* A landing page is arrived at, not returned to, so the full entrance plays every time. */
    .evt-up { animation: evt-rise .8s var(--evt-ease) backwards; animation-delay: calc(var(--d, 0) * 70ms + 200ms); }
    .evt-w { animation: evt-word .9s var(--evt-ease) backwards; animation-delay: calc(var(--d, 0) * 90ms + 150ms); }
    .evt-ring-value { animation: evt-draw 1.6s var(--evt-ease) .7s backwards; }
    .evt-glass::after { animation: evt-sheen 1.5s var(--evt-ease) 1.3s backwards; }
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 1060px) {
    .evt-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .evt-hero-grid > :last-child { max-width: 560px; }
}

@media (max-width: 880px) {
    .evt-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

    /* After the details, as the old page had it: the fixed bar below carries the register button. */
    .evt-aside { position: static; }

    .evt-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--evt-line);
        box-shadow: 0 -16px 32px -24px rgba(13, 36, 71, .35);
        padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
    }

    .evt-bar-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
    .evt-bar-title { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .evt-bar-label { font-size: .78rem; color: var(--evt-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .evt-bar-amount { font-family: var(--evt-serif); font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
    .evt-bar-cta { flex: none; }
    .evt-bar-cta:disabled { opacity: .4; cursor: not-allowed; }
    .evt-body--with-bar { padding-bottom: 6.5rem; }
}

@media (max-width: 720px) {
    .evt-hero { min-height: 0; padding: 1.75rem 0 2.75rem; }
    .evt-back { margin-bottom: 1.1rem; }
    .evt-stats { gap: 1rem 1.25rem; margin-top: 1.4rem; }
    .evt-div { display: none; }
    .evt-glass { padding: 1.1rem; backdrop-filter: blur(8px); }
    .evt-glass-actions .evt-btn { flex: 1; padding: 0 .8rem; white-space: nowrap; }
    .evt-body { padding-top: 1.75rem; }
    .evt-card-h, .evt-slot, .evt-ticket, .evt-day, .evt-offers, .evt-note, .evt-card-tools { padding-left: 1.1rem; padding-right: 1.1rem; }
    .evt-about-text, .evt-place { padding-left: 1.1rem; padding-right: 1.1rem; }
    .evt-card-cta, .evt-card-status { margin-left: 1.1rem; margin-right: 1.1rem; }
    .evt-slot { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
    .evt-slot-time { font-size: 1.2rem; }
    .evt-slot-end { display: inline; margin-left: .4rem; }
}

@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
    .evt-beam { animation-name: evt-beam-p; animation-duration: 5.4s; }
}

/* ── Register band (EventBand) ─────────────────────── */
/* The event page's hero at a third of the height, so the form leads. Grid and trace as the hero
   has them, but the trace stands still: one beat picked out in teal, the pulse paused. */
.evt-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--crm-navy, #0D2447);
    color: #fff;
    padding: 2rem 0 3.5rem;
}

.evt-band-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask: radial-gradient(120% 120% at 70% 90%, #000 20%, transparent 75%);
    mask: radial-gradient(120% 120% at 70% 90%, #000 20%, transparent 75%);
}

/* The drawing keeps its own proportions at the right; its baseline (y=76 of 96) runs on to the
   left edge as a plain rule, so nothing is ever squeezed into needles. */
.evt-band-trace { position: absolute; right: 0; bottom: 0; z-index: -1; }
.evt-band::after {
    content: "";
    position: absolute;
    left: 0;
    right: 720px;
    bottom: 20px;
    height: 1.6px;
    background: rgba(255, 255, 255, .1);
    z-index: -1;
}
.evt-band-base { stroke: rgba(255, 255, 255, .1); }
.evt-band-glow { stroke: var(--crm-teal, #00C5A8); opacity: .75; filter: drop-shadow(0 0 6px var(--crm-teal, #00C5A8)); }

.evt-band-title {
    margin: 0;
    font-family: var(--evt-serif);
    font-weight: 400;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.01em;
    color: #fff;
    max-width: 28ch;
    text-wrap: balance;
}

.evt-band-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
    margin-top: .9rem;
    font-size: .95rem;
    color: rgba(255, 255, 255, .8);
}

.evt-band-meta .bi { color: var(--crm-teal, #00C5A8); margin-right: .35rem; }
.evt-band .evt-back { margin-bottom: 1.25rem; }

@media (max-width: 720px) {
    /* Narrow screens put the beats under the text: draw the trace at three-quarters (a spike then
       reaches ~53px up, baseline 15px) and clear it. */
    .evt-band { padding: 1.4rem 0 4.5rem; }
    .evt-band-trace { width: 540px; height: 72px; }
    .evt-band::after { right: 540px; bottom: 15px; }
    .evt-band .evt-back { margin-bottom: .9rem; }
    .evt-band-meta { font-size: .88rem; flex-direction: column; }
}

/* ── Confirmation (EventConfirmation) ──────────────── */
.evt-hero--confirm { min-height: 500px; padding-top: 3.5rem; }

.evt-check { width: 60px; height: 60px; margin-bottom: 1.1rem; display: block; }
.evt-check-ring { fill: none; stroke: rgba(var(--crm-teal-rgb, 0, 197, 168), .3); stroke-width: 2.5; }
.evt-check-tick {
    fill: none;
    stroke: var(--crm-teal, #00C5A8);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    filter: drop-shadow(0 0 8px rgba(var(--crm-teal-rgb, 0, 197, 168), .7));
}

.evt-lede--plain { display: block; max-width: 520px; }

.evt-ref { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-weight: 600; font-size: .85em; color: var(--evt-text); }

.evt-people { display: flex; gap: 1rem; align-items: flex-start; padding: 0 1.4rem 1.1rem; }

.evt-lines { display: grid; gap: .5rem; padding: 1rem 1.4rem 1.2rem; border-top: 1px solid var(--evt-line); font-variant-numeric: tabular-nums; }
.evt-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; }
.evt-line--discount { color: var(--evt-ink); font-weight: 600; }
.evt-line--total { align-items: baseline; padding-top: .6rem; margin-top: .15rem; border-top: 1px solid var(--evt-line); font-weight: 600; }
.evt-line-amount { font-family: var(--evt-serif); font-weight: 400; font-size: 1.9rem; line-height: 1; }

.evt-links { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.evt-links .evt-go { margin-top: .35rem; background: none; border: 0; padding: 0; cursor: pointer; }

@keyframes evt-tick { from { stroke-dashoffset: 48; } }
@keyframes evt-ring-in { from { opacity: 0; transform: scale(.6); } }

@media (prefers-reduced-motion: no-preference) {
    .evt-check-ring { transform-box: fill-box; transform-origin: center; animation: evt-ring-in .6s var(--evt-ease) .15s backwards; }
    .evt-check-tick { animation: evt-tick .7s var(--evt-ease) .55s backwards; }
}

@media (max-width: 720px) {
    .evt-hero--confirm { min-height: 0; padding-top: 2rem; }
    .evt-check { width: 48px; height: 48px; margin-bottom: .8rem; }
    .evt-people, .evt-lines { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* ── Page transitions (wwwroot/js/event-transitions.js) ─────────────────────────────────────────
   Names are given only while a morph runs (html[data-evt-vt="morph"]), so nothing else on the
   page is affected. The pairs, landing ⇄ register ⇄ registered:
     evt-stage   hero ⇄ band ⇄ hero    — clipped as it folds, so the hero tucks up into the band
     evt-title   big title ⇄ band title ⇄ "See you on…"
     evt-eyebrow, evt-meta, evt-back   — the small lines glide to their new places
     evt-glass   the glass card: fades out to the register page, fades in on the confirmation
     evt-body    everything below, sliding up as the hero folds (down as it opens)
   A crossfade (data-evt-vt="fade") names nothing: the root's own crossfade does it. */

html[data-evt-vt="morph"] .evt-hero,
html[data-evt-vt="morph"] .evt-band { view-transition-name: evt-stage; }
html[data-evt-vt="morph"] .evt-title,
html[data-evt-vt="morph"] .evt-band-title { view-transition-name: evt-title; }
html[data-evt-vt="morph"] .evt-hero .evt-eyebrow,
html[data-evt-vt="morph"] .evt-band .evt-eyebrow { view-transition-name: evt-eyebrow; }
html[data-evt-vt="morph"] .evt-hero .evt-lede,
html[data-evt-vt="morph"] .evt-band-meta { view-transition-name: evt-meta; }
html[data-evt-vt="morph"] .evt-back { view-transition-name: evt-back; }
html[data-evt-vt="morph"] .evt-glass { view-transition-name: evt-glass; }
html[data-evt-vt="morph"] .evt-body,
html[data-evt-vt="morph"] .reg-body { view-transition-name: evt-body; }
/* The portal's sticky bar stays on top of everything that moves. */
html[data-evt-vt="morph"] header.ptb,
html[data-evt-vt="morph"] .public-header { view-transition-name: evt-header; }

::view-transition-group(evt-stage),
::view-transition-group(evt-title),
::view-transition-group(evt-eyebrow),
::view-transition-group(evt-meta),
::view-transition-group(evt-back),
::view-transition-group(evt-glass),
::view-transition-group(evt-body) {
    animation-duration: .55s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

::view-transition-group(evt-header) { z-index: 10; animation: none; }

/* The hero and band at their natural size, top-aligned and clipped by the folding box: no
   squashing, and the taller one is simply cut off as the box closes over it. */
::view-transition-group(evt-stage) { overflow: clip; }
::view-transition-image-pair(evt-stage) { overflow: clip; }
::view-transition-old(evt-stage),
::view-transition-new(evt-stage) {
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: center top;
    /* No fade: the arriving one paints over the leaving one and the box's clip does the rest —
       the hero folds up under the band, or unfolds out of it. A crossfade washed the half of
       the box the band doesn't cover in grey. */
    animation: none;
}

/* Text keeps its proportions and its left edge while it changes size. */
::view-transition-old(evt-title), ::view-transition-new(evt-title),
::view-transition-old(evt-eyebrow), ::view-transition-new(evt-eyebrow),
::view-transition-old(evt-meta), ::view-transition-new(evt-meta),
::view-transition-old(evt-back), ::view-transition-new(evt-back) {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: left top;
    animation-duration: .4s;
}

::view-transition-old(evt-body), ::view-transition-new(evt-body) {
    width: 100%;
    height: auto;
    object-fit: none;
    object-position: center top;
    animation-duration: .35s;
}

/* Old text and body go early, new ones arrive late: an even crossfade left two titles (and two
   bodies) legible over each other through the middle of the move. */
::view-transition-old(evt-title), ::view-transition-old(evt-eyebrow), ::view-transition-old(evt-meta),
::view-transition-old(evt-back), ::view-transition-old(evt-body) { animation: .18s ease-out both evt-vt-fade-out; }
::view-transition-new(evt-title), ::view-transition-new(evt-eyebrow), ::view-transition-new(evt-meta),
::view-transition-new(evt-back) { animation: .3s ease .14s both evt-vt-fade-in; }
::view-transition-new(evt-body) { animation: .4s cubic-bezier(.2, .8, .2, 1) .1s both evt-vt-in; }

@keyframes evt-vt-fade-out { to { opacity: 0; } }
@keyframes evt-vt-fade-in { from { opacity: 0; } }

::view-transition-old(evt-glass) { animation: .25s ease both evt-vt-out; }
::view-transition-new(evt-glass) { animation: .45s cubic-bezier(.2, .8, .2, 1) .1s both evt-vt-in; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

@keyframes evt-vt-out { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes evt-vt-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* Arrived by a morph: the morph was the entrance, so the page's own doesn't play on top of it.
   Set once, on the page as it mounts (EventTransition.TakeArriving), so it never re-triggers. */
.evt-page--arrived .evt-up,
.evt-page--arrived .evt-w,
.evt-page--arrived .evt-ring-value,
.evt-page--arrived .evt-glass::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}