/* action ai · Events + Debrief (REDESIGN-R5-EVENTS-DEBRIEF-2026-10-07).
   LIFTED from BUILD HANDOVER 2026-10-05 mockups/Events + Debrief (29 states) (review round 4).html, page CSS
   from src/areas/events/events.py and the kit parts it uses (src/kit/kit.css: .hd .eb .ib .sec .field .ln .panel
   .edge .stats .stat .pc .tag .sl .link .empty .PA .sheet .grab .scrim .dialog .check .cta .seg .full .wm .orb).
   A RESKIN: every element, behaviour and string the app has stays; only the look changes. Every value is the
   mockup's; only the SELECTORS change to the app's own classes (WIRING.md §5), the way R4's people.css does:
   .hd -> .learn-header, .ib -> .ev-new / .dash-back, .sec -> .ev-multi-btn, .field -> .ev-join-bar,
   .ln.on -> .ev-join-btn, .panel -> .ev-hero, .pc.evc -> .ev-card, .stat -> .ev-outcome, .sl -> .ev-bucket-label,
   .tag -> .ev-tier, .empty -> .ev-empty, .check -> .ev-pick-box.
   Scoped to the opt-in roots this step adds (.scene-events.ev5 on the list; the sheets, dialog and public pages
   carry their own ev5- class). The E03 cascade reads the kit's own fxin keyframe and tokens (fx3.css); the E08
   sheet and E09 dialog read fxsheet / fxfade / fxdlg. Reduced motion: no animation, every value shows at once. */

/* ── the list screen ─────────────────────────────────────────────────────────────────────────────────── */
.scene-events.ev5 { position: relative; color: #F4F4F5; font-family: 'Hanken Grotesk', system-ui, sans-serif; }
/* the screen's own blocks sit above the sky. Only these: the sheets and the debrief this root also mounts are
   position: fixed overlays and must stay in the page's own stacking order, above the tab bar (so the root makes
   no stacking context of its own) */
.scene-events.ev5 > .ev-multi-slot, .scene-events.ev5 > .ev-multi-hintbar,
.scene-events.ev5 > .ev-join-bar, .scene-events.ev5 > .result-body, .scene-events.ev5 > .ev-empty { position: relative; z-index: 1; }
.scene-events.ev5 > .lt-sentinel { position: absolute; }
/* E01 sky behind the top 460px (kit .hsky; fx3.js enter() adds the twinkling canvas) */
.scene-events.ev5 > .ev5-hsky { position: absolute; left: 0; right: 0; top: 0; height: 460px; z-index: 0; pointer-events: none; -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.ev5-hsky::before, .ev5-hsky::after { content: ""; position: absolute; inset: 0; background-repeat: repeat; }
.ev5-hsky::before { background-image: radial-gradient(.6px .6px at 150px 20px,#fff9,transparent),radial-gradient(.6px .6px at 280px 120px,#fff7,transparent),radial-gradient(1px 1px at 20px 30px,#fff8,transparent),radial-gradient(1px 1px at 120px 80px,#fff6,transparent),radial-gradient(1.4px 1.4px at 200px 160px,#fffa,transparent),radial-gradient(1px 1px at 300px 40px,#fff5,transparent),radial-gradient(1px 1px at 60px 200px,#fff7,transparent); background-size: 340px 240px; opacity: .28; }
.ev5-hsky::after { background-image: radial-gradient(1.6px 1.6px at 80px 60px,#C7C0FF,transparent),radial-gradient(1.2px 1.2px at 260px 190px,#FFE7B0,transparent),radial-gradient(1.2px 1.2px at 170px 120px,#B6F5E4,transparent); background-size: 360px 280px; opacity: .25; }

/* header: the small-caps title; the header box (its height and the account button's row) is the app's own,
   the same choice R4 made on People */
.scene-events.ev5 .learn-header > div[style] { display: none; }
.scene-events.ev5 .learn-header .dash-title { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); margin: 0; text-align: left; flex: 1; }
/* .ib: New event, the picker's x and its tick */
.scene-events.ev5 .learn-header .ev-new, .scene-events.ev5 .learn-header .dash-back { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; padding: 0; background: rgba(255,255,255,.06); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #F4F4F5; font-size: 22px; font-weight: 600; }
.scene-events.ev5 .learn-header .ev-new svg { width: 20px; height: 20px; }
.scene-events.ev5 .learn-header .dash-back { font-size: 22px !important; line-height: 1; color: #F4F4F5 !important; }

/* Debrief multiple events: .sec, 52px, "›" at 20px */
.scene-events.ev5 .ev-multi-slot { margin: var(--space-4) 16px 0; } /* SR-EVT-01: the 16px buffer under the header (EVENTS-BUFFER); the R5 4px override had put it back to glued */
.scene-events.ev5 .ev-multi-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 52px; padding: 0 16px; border-radius: 16px; background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: 16px; font-weight: 600; color: rgba(255,255,255,.75); }
.scene-events.ev5 .ev-multi-hint { font-size: 20px; font-weight: 400; color: rgba(255,255,255,.75); }
/* the picker's instruction line */
.scene-events.ev5 .ev-multi-hintbar { margin: 2px 16px 4px; padding: 0; background: none; border: 0; border-radius: 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.75); }

/* the join bar: one .field holding the 16px input and the Join pill */
.scene-events.ev5 .ev-join-bar { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 12px 16px 0; padding: 0 4px 0 14px; border-radius: 16px; background: rgba(20,20,24,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: box-shadow .2s cubic-bezier(.23,1,.32,1); }
.scene-events.ev5 .ev-join-bar:focus-within { box-shadow: inset 0 0 0 1px rgba(162,155,254,.55), 0 0 24px -8px rgba(162,155,254,.55); }
.scene-events.ev5 .ev-join-input { flex: 1; min-width: 0; min-height: 44px; height: auto; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; outline: 0; color: #fff; font-size: 16px; font-family: inherit; }
.scene-events.ev5 .ev-join-input:focus { border: 0; box-shadow: none; }
.scene-events.ev5 .ev-join-input::placeholder { color: rgba(255,255,255,.45); }
.scene-events.ev5 .ev-join-btn { flex: none; height: 44px; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 0; background: #F4F4F5; color: #0b0b0d; box-shadow: none; font-size: 14px; font-weight: 600; font-family: inherit; display: inline-flex; align-items: center; }

/* the list body */
.scene-events.ev5 .result-body { padding: 16px 0 0; gap: 0; display: block; }
.scene-events.ev5 .result-body > .ev-hero { margin: 0 16px; width: calc(100% - 32px); }
/* date and bucket labels: .sl, 14px spaced caps with the spectral hairline */
.scene-events.ev5 .ev-bucket-label { display: flex; align-items: center; gap: 12px; margin: 24px 16px 10px; padding: 0; font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); }
.scene-events.ev5 .ev-bucket-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.14), transparent); }
.scene-events.ev5 .ev-cards { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }

/* the hero: .panel (radius 22) */
.scene-events.ev5 .ev-hero { display: flex; flex-direction: column; gap: 12px; padding: 16px; margin-bottom: 0; border-radius: 22px; background-color: rgba(20,20,24,.55); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); overflow: hidden; color: #F4F4F5; text-align: left; }
.scene-events.ev5 .ev-hero::before { display: none; }
.scene-events.ev5 .ev-hero { background-image: none; }
/* the picked ring is the app's own inline outline (var(--accent)); the mockup's ring is periwinkle */
.scene-events.ev5 .ev-card, .scene-events.ev5 .ev-hero { --accent: #A29BFE; }
.scene-events.ev5 .ev-hero > * { margin: 0; }
.scene-events.ev5 .ev-hero-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); margin: 0 0 -8px; }
.scene-events.ev5 .ev-hero-name { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; letter-spacing: -.02em; font-size: 32px; line-height: 1.1; margin: -8px 0 -8px; padding-top: 4px; color: #F4F4F5; }
.scene-events.ev5 .ev-hero-meta { font-size: 14px; color: rgba(255,255,255,.75); margin: 0; }
.scene-events.ev5 .ev-hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.scene-events.ev5 .ev-hero-empty { font-size: 14px; font-weight: 600; color: #C7C0FF; opacity: 1; flex: 1; }
.scene-events.ev5 .ev-hero-cta { color: #C7C0FF; font-weight: 700; font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; border-radius: 0; }
/* the live event's spectral edge (.edge: 1.5px, the spectral gradient, at rest) */
.scene-events.ev5 .ev-live-edge::after { opacity: .8; animation: none; }

/* each event card: .pc as a column (gap 10px) */
.scene-events.ev5 .ev-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; border-radius: 18px; background-color: #111114; border: 1px solid rgba(255,255,255,.09); box-shadow: none; color: #F4F4F5; text-align: left; position: relative; isolation: isolate; transition: scale 120ms cubic-bezier(.23,1,.32,1); }
.scene-events.ev5 .ev-card:active { scale: .98; }
.scene-events.ev5 .ev-hero:active { scale: .98; }
.scene-events.ev5 .ev-card-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.scene-events.ev5 .ev-card-icon { width: 28px; height: 28px; display: grid; place-items: center; color: #C7C0FF; background: none; border-radius: 0; flex: none; }
.scene-events.ev5 .ev-card-icon svg { width: 18px; height: 18px; }
.scene-events.ev5 .ev-card-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #F4F4F5; }
.scene-events.ev5 .ev-card-chev { color: rgba(255,255,255,.56); display: grid; }
.scene-events.ev5 .ev-card-chev svg { width: 18px; height: 18px; }
.scene-events.ev5 .ev-card-meta { font-size: 14px; color: rgba(255,255,255,.56); display: flex; gap: 6px; }
.scene-events.ev5 .ev-card-meta .ev-sep { color: inherit; }
/* the Joinable / Official badge: .tag */
.scene-events.ev5 .ev-card-tier { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 99px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #C7C0FF; background: rgba(162,155,254,.14); border: 0; box-shadow: none; margin-left: 0; }

/* MET / OWE / SENT: three .stat tiles, min-height 56, OWE amber, SENT mint, each its own tap target */
.scene-events.ev5 .ev-card-outcomes, .scene-events.ev5 .ev-hero-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.scene-events.ev5 .ev-outcome { min-height: 56px; padding: 12px; border-radius: 14px; background: #16161a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); text-align: center; }
.scene-events.ev5 .ev-hero-outcomes .ev-outcome { background: #16161a; }
.scene-events.ev5 .ev-outcome .v { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.45; color: #F4F4F5; }
.scene-events.ev5 .ev-outcome .l { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.56); margin: 0; line-height: 1.45; }
.scene-events.ev5 .ev-outcome.owe .v { color: #FDCB6E; }
.scene-events.ev5 .ev-outcome.sent .v { color: #55EFC4; }

/* faces: 34px with a 2px card-colour ring, 6px apart; "N people" 14px */
.scene-events.ev5 .ev-card-faces { display: flex; align-items: center; gap: 10px; min-height: 44px; justify-content: flex-start; }
.scene-events.ev5 .face-stack { display: flex; align-items: center; gap: 6px; }
.scene-events.ev5 .face-stack > * { margin-left: 0; }
.scene-events.ev5 .face-stack .aa-avatar-initials { width: 34px !important; height: 34px !important; font-size: 14px !important; border: 0; box-shadow: 0 0 0 2px #111114; }
.scene-events.ev5 .face-more { width: 34px; height: 34px; border: 0; box-shadow: 0 0 0 2px #111114; background: #26262b; font-size: 14px; color: rgba(255,255,255,.75); box-sizing: border-box; }
.scene-events.ev5 .ev-card-count { font-size: 14px; color: rgba(255,255,255,.75); margin-left: 0; flex: 1; }
.scene-events.ev5 .ev-card-empty { font-size: 14px; font-weight: 600; color: #C7C0FF; flex: 1; }

/* pick mode: the kit's round .check (a 44px tap area holding a 24px circle; on = mint fill + tick); a picked
   card wears the 2px periwinkle inset ring (the app's own outline, offset inward) */
.scene-events.ev5 .ev-pick-box { width: 44px; height: 44px; margin: -8px -4px -8px -8px; border: 0; border-radius: 0; background: none; display: grid; place-items: center; flex: none; color: #07070a; font-size: 14px; font-weight: 800; line-height: 1; position: relative; z-index: 0; }
.scene-events.ev5 .ev-pick-box::before { content: ""; position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%; z-index: -1; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); transition: background .25s cubic-bezier(.23,1,.32,1), box-shadow .25s cubic-bezier(.23,1,.32,1); }
.scene-events.ev5 .ev-pick-box.on { background: none; border: 0; }
.scene-events.ev5 .ev-pick-box.on::before { background: #55EFC4; box-shadow: 0 0 12px rgba(85,239,196,.5); animation: fxpop .5s cubic-bezier(.34,1.56,.64,1); }
.scene-events.ev5 .ev-hero .ev-pick-box { margin: -8px 0 -8px -8px; }

/* empty state */
.scene-events.ev5 .ev-empty { margin: 0; padding: 48px 24px; background: none; border: 0; border-radius: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: rgba(255,255,255,.56); font-size: 16px; line-height: 1.45; }
.scene-events.ev5 .ev-empty strong { color: #fff; font-size: 16px; font-weight: 700; }
.scene-events.ev5 .ev-empty-icon { width: auto; height: auto; background: none; border-radius: 0; color: #C7C0FF; margin-bottom: 6px; display: block; }
.scene-events.ev5 .ev-empty-icon svg { width: 32px; height: 32px; }

/* E03 · entrance cascade on the hero and the cards (fx3.css fxin: 320ms, --out, --i x 50ms, capped at 8) */
.scene-events.ev5 .ev-hero, .scene-events.ev5 .ev-card { animation: fxin var(--fx-state) var(--out) both; animation-delay: calc(var(--i, 0) * var(--fx-stagger)); }
.scene-events.ev5 .ev-card:nth-child(2) { --i: 1; } .scene-events.ev5 .ev-card:nth-child(3) { --i: 2; }
.scene-events.ev5 .ev-card:nth-child(4) { --i: 3; } .scene-events.ev5 .ev-card:nth-child(5) { --i: 4; }
.scene-events.ev5 .ev-card:nth-child(6) { --i: 5; } .scene-events.ev5 .ev-card:nth-child(7) { --i: 6; }
.scene-events.ev5 .ev-card:nth-child(8) { --i: 7; } .scene-events.ev5 .ev-card:nth-child(n+9) { --i: 8; }

@media (prefers-reduced-motion: reduce) {
  .scene-events.ev5 .ev-hero, .scene-events.ev5 .ev-card, .scene-events.ev5 .ev-pick-box.on::before { animation: none !important; }
  .scene-events.ev5 .ev-card, .scene-events.ev5 .ev-hero { transition: none; }
}

/* ── sheets (E08): the scrim fades in over .35s, the sheet slides up from 105% over .55s on --sheet ─────────── */
.ev5-create, .ev5-msheet { display: contents; }
.ev5-create .modal-overlay, .ev5-msheet .sheet-overlay { background: rgba(3,3,5,.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: fxfade .35s var(--out) both; z-index: 7000; }
.ev5-create .event-sheet, .ev5-msheet .sheet { max-width: none; border: 0; border-radius: 28px 28px 0 0; background: #0f0f12; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); padding: 10px 16px 28px; color: #F4F4F5; font-family: 'Hanken Grotesk', system-ui, sans-serif; animation: fxsheet .55s var(--sheet) both; }
.ev5-create .sheet-grip, .ev5-msheet .sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin: 0 auto 12px; }
.ev5-create .sheet-head, .ev5-msheet .sheet-head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; margin: 0 0 6px; padding: 0; }
.ev5-create .sheet-close, .ev5-msheet .sheet-close { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; padding: 0; background: rgba(255,255,255,.06); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #F4F4F5; }
.ev5-create .sheet-close svg, .ev5-msheet .sheet-close svg { width: 20px; height: 20px; }

/* Start an event (EventModal) */
.ev5-create .event-sheet-title { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; letter-spacing: -.02em; font-size: 28px; line-height: 1.15; padding-top: 6px; color: #F4F4F5; }
.ev5-create .event-form { display: block; padding: 0; }
.ev5-create .event-field { display: block; }
.ev5-create .event-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.ev5-create .event-label { display: block; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.56); margin: 16px 0 8px; letter-spacing: 0; text-transform: none; }
.ev5-create .event-label-opt { font-weight: 500; color: rgba(255,255,255,.45); }
.ev5-create .event-input, .ev5-create .event-datefield { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 14px; border-radius: 16px; background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #fff; font-size: 16px; font-family: inherit; transition: box-shadow .2s var(--out); }
.ev5-create .event-input:focus, .ev5-create .event-datefield:focus-within { outline: 0; border: 0; box-shadow: inset 0 0 0 1px rgba(162,155,254,.55), 0 0 24px -8px rgba(162,155,254,.55); }
.ev5-create .event-input::placeholder { color: rgba(255,255,255,.45); }
.ev5-create .event-textarea { min-height: 52px; padding: 14px; resize: none; line-height: 1.5; display: block; }
.ev5-create .event-datefield-icon { display: grid; color: rgba(255,255,255,.56); }
.ev5-create .event-datefield-icon svg { width: 18px; height: 18px; }
.ev5-create .event-datefield-text { font-size: 16px; color: #fff; }
/* Today / Tomorrow: a 44px .seg */
.ev5-create .event-datequick { display: flex; margin-top: 8px; padding: 3px; gap: 0; border-radius: 14px; background: #121215; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.ev5-create .event-datequick button { flex: 1; height: 44px; min-height: 44px; padding: 0 6px; border-radius: 11px; border: 0; background: none; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.56); font-family: inherit; }
.ev5-create .event-datequick button.on { background: #26262b; color: #fff; }
/* Cancel quiet, Create event the one .cta */
.ev5-create .sheet-actions { display: flex; gap: 10px; margin-top: 20px; align-items: center; padding: 0; border: 0; }
.ev5-create .sheet-actions > * { flex: 1; }
.ev5-create .sheet-actions .btn-ghost { min-height: 44px; padding: 0 12px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.56); background: none; border: 0; box-shadow: none; }
.ev5-create .sheet-actions .btn-primary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 18px; border-radius: 18px; border: 0; background: #fff; color: #0b0b12; font-weight: 800; font-size: 17px; font-family: inherit; position: relative; isolation: isolate; box-shadow: 0 0 0 2px #07070a, 0 18px 40px -16px rgba(162,155,254,.6); }
.ev5-create .sheet-actions .btn-primary::after { content: ""; position: absolute; inset: -3px; border-radius: 21px; padding: 2.5px; background: var(--conic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kx-spin 4s linear infinite; pointer-events: none; }
.ev5-create .sheet-actions .btn-primary:disabled { opacity: .5; }
.ev5-create .sheet-actions .btn-primary svg { width: 18px; height: 18px; }

/* the metric sheet (EventMetricSheet) */
.ev5-msheet .ev-metric-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.45; color: #F4F4F5; }
.ev5-msheet .ev-metric-sub { font-size: 14px; color: rgba(255,255,255,.56); margin-top: 2px; }
.ev5-msheet .ev-metric-list { margin-top: 14px; display: block; }
.ev5-msheet .ev-metric-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 18px; background: #111114; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); text-align: left; color: #F4F4F5; font-family: inherit; position: relative; isolation: isolate; transition: scale 120ms var(--out); }
.ev5-msheet .ev-metric-row:active { scale: .98; }
.ev5-msheet .ev-metric-row + .ev-metric-row { margin-top: 10px; }
.ev5-msheet .ev-metric-main { flex: 1; min-width: 0; display: block; }
.ev5-msheet .ev-metric-task { display: block; font-size: 16px; font-weight: 700; color: #fff; }
.ev5-msheet .ev-metric-who { display: block; font-size: 14px; color: rgba(255,255,255,.56); margin-top: 1px; }
.ev5-msheet .ev-metric-flag { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 99px; font-size: 14px; font-weight: 700; color: #FDCB6E; background: rgba(253,203,110,.14); text-transform: none; letter-spacing: 0; border: 0; }
.ev5-msheet .ev-metric-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 8px; font-size: 16px; color: rgba(255,255,255,.56); line-height: 1.45; }
.ev5-msheet .aa-avatar-initials.PA, .ev5-create .aa-avatar-initials.PA { font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .ev5-create .modal-overlay, .ev5-msheet .sheet-overlay, .ev5-create .event-sheet, .ev5-msheet .sheet, .ev5-create .sheet-actions .btn-primary::after { animation: none !important; }
}

/* ── the Debrief sheet (DebriefModal, on screen only) ─────────────────────────────────────────────────────── */
.ev5-dbf { position: fixed; inset: 0; z-index: 7000; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(3,3,5,.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: fxfade .35s var(--out) both; font-family: 'Hanken Grotesk', system-ui, sans-serif; color: #F4F4F5; }
.ev5-dbf-sheet { width: 100%; max-width: 760px; height: 94%; display: flex; flex-direction: column; border-radius: 28px 28px 0 0; background-color: #0f0f12; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); padding: 10px 16px 0; animation: fxsheet .55s var(--sheet) both; overflow: hidden; }
.ev5-dbf-grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin: 0 auto 12px; flex: none; }
.ev5-dbf-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 6px; flex: none; }
.ev5-dbf-hm { flex: 1; min-width: 0; }
.ev5-dbf-title { font-size: 16px; font-weight: 700; }
.ev5-dbf-sub { font-size: 14px; color: rgba(255,255,255,.56); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev5-dbf .debrief-close { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; padding: 0; background: rgba(255,255,255,.06); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #F4F4F5; font-size: 22px; font-weight: 600; cursor: pointer; }
/* Copy text and Email: quiet .sec side by side; Download .doc: the one .cta */
.ev5-dbf-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 0 12px; box-shadow: 0 1px 0 rgba(255,255,255,.09); flex: none; }
.ev5-dbf-acts .btn-ghost { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px; border-radius: 16px; background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: 16px; font-weight: 600; color: rgba(255,255,255,.75); }
.ev5-dbf-acts .btn-primary { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 18px; border-radius: 18px; border: 0; background: #fff; color: #0b0b12; font-weight: 800; font-size: 17px; position: relative; isolation: isolate; box-shadow: 0 0 0 2px #07070a, 0 18px 40px -16px rgba(162,155,254,.6); }
.ev5-dbf-acts .btn-primary::after { content: ""; position: absolute; inset: -3px; border-radius: 21px; padding: 2.5px; background: var(--conic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kx-spin 4s linear infinite; pointer-events: none; }
.ev5-dbf-body { flex: 1; overflow: auto; padding: 18px 0 40px; background: none; }
.ev5-dbf-doc { color: #F4F4F5; font-size: 16px; line-height: 1.45; }
.ev5-dbf-dhead { padding-bottom: 6px; margin-bottom: 18px; }
.ev5-dbf-eb { font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); }
.ev5-dbf-h1 { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; letter-spacing: -.02em; font-size: 30px; line-height: 1.1; margin: 6px 0; color: #F4F4F5; }
.ev5-dbf-meta { font-size: 14px; color: rgba(255,255,255,.75); }
/* the per-event chips: .ln pills */
.ev5-dbf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ev5-dbf-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 99px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.ev5-dbf-chip em { font-style: normal; color: rgba(255,255,255,.45); }
.ev5-dbf-pchips { margin-top: 8px; }
/* Executive summary / Full debrief / Both: a 44px .seg */
.ev5-dbf-seg { display: flex; padding: 3px; gap: 0; margin-bottom: 16px; border-radius: 14px; background: #121215; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.ev5-dbf-seg .btn { flex: 1; height: 44px; min-height: 44px; padding: 0 8px; border-radius: 11px; border: 0; background: none; box-shadow: none; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.56); }
.ev5-dbf-seg .btn.btn-primary { background: #26262b; color: #fff; }
/* the summary's four numbers: .stat tiles */
.ev5-dbf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.ev5-dbf-stat { padding: 12px; border-radius: 14px; background: #16161a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); min-height: 56px; }
.ev5-dbf-stat b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ev5-dbf-stat span { font-size: 14px; color: rgba(255,255,255,.56); }
/* section heads: .sl */
.ev5-dbf .dbf-sec { margin-bottom: 0; }
.ev5-dbf .dbf-sec-head { display: flex; align-items: center; gap: 12px; margin: 24px 0 10px; padding: 0; border: 0; }
.ev5-dbf .dbf-sec-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.14), transparent); order: 3; }
.ev5-dbf .dbf-sec-title { font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); }
.ev5-dbf .dbf-sec-count { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 99px; font-size: 14px; font-weight: 700; color: #C7C0FF; background: rgba(162,155,254,.14); order: 2; }
/* every person card: .pc */
.ev5-dbf .dbf-card { position: relative; padding: 14px; border-radius: 18px; background: #111114; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); margin: 0; }
.ev5-dbf .dbf-card + .dbf-card { margin-top: 10px; }
.ev5-dbf .dbf-person-name { font-size: 16px; font-weight: 700; color: #fff; }
.ev5-dbf .dbf-person-sub { font-size: 14px; color: rgba(255,255,255,.56); }
.ev5-dbf .dbf-note { font-size: 16px; font-style: normal; color: rgba(255,255,255,.75); border-left: 2px solid rgba(255,255,255,.09); line-height: 1.5; }
.ev5-dbf .dbf-person-links { font-size: 14px; }
.ev5-dbf .dbf-person-links a { min-height: 44px; display: inline-flex; align-items: center; }
/* bin and status tags: coral / amber / mint .tag */
.ev5-dbf .dbf-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 99px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #FDCB6E; background: rgba(253,203,110,.14); }
/* the Next row: the kit's round check (.task-check keeps its name), "Do this now" the row's .go pill */
.ev5-dbf .dbf-row { border-left: 0; margin-top: 10px; padding-top: 10px; box-shadow: 0 -1px 0 rgba(255,255,255,.09); align-items: flex-start; gap: 2px; }
.ev5-dbf-next { color: #55EFC4; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .09em; margin-right: 6px; }
.ev5-dbf .dbf-row-title { font-size: 16px; font-weight: 700; color: #fff; }
.ev5-dbf .dbf-row .task-check { width: 44px; height: 44px; margin: -10px -6px 0 -10px; border: 0; border-radius: 0; background: none; display: grid; place-items: center; flex: none; color: #07070a; position: relative; z-index: 1; }
.ev5-dbf .dbf-row .task-check::after { content: none; }
.ev5-dbf .dbf-row .task-check::before { content: ""; position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%; z-index: -1; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); transition: background .25s var(--out), box-shadow .25s var(--out); }
.ev5-dbf .dbf-row .task-check.on { background: none; border: 0; }
.ev5-dbf .dbf-row .task-check.on::before { background: #55EFC4; box-shadow: 0 0 12px rgba(85,239,196,.5); animation: fxpop .5s var(--spring); }
.ev5-dbf .dbf-row .task-check svg { width: 14px; height: 14px; }
.ev5-dbf .dbf-row-line2 { justify-content: flex-end; margin-top: 8px; }
.ev5-dbf .dbf-row-line2 .btn { flex: none; min-width: 76px; height: 44px; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 0; background: #F4F4F5; color: #0b0b12; font-weight: 800; font-size: 15px; position: relative; isolation: isolate; box-shadow: none; }
.ev5-dbf .dbf-row-line2 .btn::before { content: ""; position: absolute; inset: -4px; border-radius: 99px; padding: 1.5px; background: var(--conic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kx-spin 12s linear infinite; opacity: .75; }
/* footer: "Remembered with action ai · actionai.club", 14px, the link a 44px target */
.ev5-dbf-foot { margin-top: 28px; padding-top: 14px; box-shadow: 0 -1px 0 rgba(255,255,255,.09); text-align: center; font-size: 14px; color: rgba(255,255,255,.56); }
/* the footer link keeps the app's own locked markup (M-BRAND-NAME-FOOTER-URL); restyled from the footer only */
.ev5-dbf-foot a { min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .ev5-dbf, .ev5-dbf-sheet, .ev5-dbf .dbf-row .task-check.on::before, .ev5-dbf-acts .btn-primary::after, .ev5-dbf .dbf-row-line2 .btn::before { animation: none !important; }
}

/* ── the Joinable / Official / Private badge (EventStatusBadge) inside the restyled screens: .tag ─────────── */
.scene-events.ev5 .ev-tier, .ev5-att .ev-tier, .ev5-nl .ev-tier, .ev5-verify .ev-tier { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 99px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; border: 0; color: #C7C0FF; background: rgba(162,155,254,.14); }
.scene-events.ev5 .ev-tier.official, .ev5-att .ev-tier.official, .ev5-nl .ev-tier.official { color: #55EFC4; background: rgba(85,239,196,.14); }
.scene-events.ev5 .ev-tier.private, .ev5-att .ev-tier.private { color: rgba(255,255,255,.56); background: rgba(255,255,255,.06); }

/* ── the attendee view (AttendeeEventView) ────────────────────────────────────────────────────────────────── */
.ev5-att { font-family: 'Hanken Grotesk', system-ui, sans-serif; color: #F4F4F5; position: relative; }
/* the kit sky behind the top 460px (kit .hsky, drawn as the page's own backdrop: no element is added) */
.ev5-att::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 460px; pointer-events: none; z-index: 0; opacity: .5; background-repeat: repeat; -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent);
  background-image: radial-gradient(.6px .6px at 150px 20px,#fff9,transparent),radial-gradient(.6px .6px at 280px 120px,#fff7,transparent),radial-gradient(1px 1px at 20px 30px,#fff8,transparent),radial-gradient(1px 1px at 120px 80px,#fff6,transparent),radial-gradient(1.4px 1.4px at 200px 160px,#fffa,transparent),radial-gradient(1px 1px at 300px 40px,#fff5,transparent),radial-gradient(1px 1px at 60px 200px,#fff7,transparent),radial-gradient(1.6px 1.6px at 80px 60px,#C7C0FF,transparent),radial-gradient(1.2px 1.2px at 260px 190px,#FFE7B0,transparent); background-size: 340px 240px; }
.ev5-att > * { position: relative; z-index: 1; }
.ev5-att .ev-brand-hero { margin: 12px 16px 0; padding: 16px; border-radius: 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.ev5-att .ev-brand-hero-plain { background: rgba(20,20,24,.55); }
.ev5-att .ev-brand-hero-plain .ev-brand-scrim { display: none; }
.ev5-att .ev-brand-wordmark { position: relative; inset: auto; z-index: 2; margin: 0; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ev5-att .ev-brand-wordmark .aai-wordmark { font-size: 19px !important; }
.ev5-att .ev-brand-row { width: 100%; justify-content: space-between; }
.ev5-att .ev-brand-row .ev-brand-back { width: 44px; height: 44px; margin: 0; border-radius: 50%; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #F4F4F5; }
.ev5-att .ev-brand-back::before { display: none; }
.ev5-att .ev-brand-back svg { width: 20px; height: 20px; }
.ev5-att .ev-brand-logo { width: 72px; height: 72px; border-radius: 50%; box-shadow: none; object-fit: contain; }
.ev5-att .ev-brand-logo-letters { display: grid; place-items: center; font-weight: 700; font-size: 24px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, #A29BFE 33%, transparent), #26262b); }
.ev5-att .ev-tier-onhero { position: relative; top: auto; left: auto; }
.ev5-att .ev-brand-title { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; letter-spacing: -.02em; font-size: 34px; line-height: 1.05; margin: 0; color: #fff; text-shadow: none; }
.ev5-att .ev-brand-meta { display: flex; gap: 14px; font: 400 14px/1.45 'Hanken Grotesk', system-ui, sans-serif; color: rgba(255,255,255,.75); }
.ev5-att .ev-brand-meta span:not(:last-child)::after { content: none; }
.ev5-att .ev-attendee-body { margin-top: 20px; padding: 0 16px; display: flex; flex-direction: column; gap: 14px; }
.ev5-att .ev-attendee-note { font-size: 16px; color: rgba(255,255,255,.75); }
.ev5-att .ev-attendee-cta { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 18px; border-radius: 18px; border: 0; background: #fff; color: #0b0b12; font-weight: 800; font-size: 17px; position: relative; isolation: isolate; box-shadow: 0 0 0 2px #07070a, 0 18px 40px -16px rgba(162,155,254,.6); }
.ev5-att .ev-attendee-cta::after { content: ""; position: absolute; inset: -3px; border-radius: 21px; padding: 2.5px; background: var(--conic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kx-spin 4s linear infinite; pointer-events: none; }
.ev5-att .ev-attendee-count { font-size: 14px; color: rgba(255,255,255,.56); text-align: center; }
.ev5-att > .nl-loading { min-height: 700px; display: grid; place-items: center; }
.ev5-att .chroma-orb, .ev5-nl .nl-loading .chroma-orb { width: 96px !important; height: 96px !important; }

/* ── Verify your domain (DomainVerifyModal): the kit .sheet ──────────────────────────────────────────────── */
.evverify-scrim.ev5-verify { align-items: flex-end; padding: 0; background: rgba(3,3,5,.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: fxfade .35s var(--out) both; z-index: 7000; font-family: 'Hanken Grotesk', system-ui, sans-serif; color: #F4F4F5; }
.evverify-scrim.ev5-verify .evverify-sheet { max-width: none; max-height: 92%; border: 0; border-radius: 28px 28px 0 0; background: #0f0f12; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); padding: 10px 16px 28px; animation: fxsheet .55s var(--sheet) both; }
.evverify-scrim.ev5-verify .evverify-sheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin: 0 auto 12px; }
.evverify-scrim.ev5-verify .evverify-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: #F4F4F5; }
.evverify-scrim.ev5-verify .evverify-help, .evverify-scrim.ev5-verify .evverify-body { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.75); margin: 10px 0 0; }
.evverify-scrim.ev5-verify .evverify-body strong { color: #fff; }
.evverify-scrim.ev5-verify .evverify-label { display: block; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.56); margin: 16px 0 8px; }
.evverify-scrim.ev5-verify .evverify-input { display: block; width: 100%; min-height: 52px; padding: 0 14px; border-radius: 16px; background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #fff; font-size: 16px; font-family: inherit; }
.evverify-scrim.ev5-verify .evverify-input:focus { outline: 0; box-shadow: inset 0 0 0 1px rgba(162,155,254,.55), 0 0 24px -8px rgba(162,155,254,.55); }
.evverify-scrim.ev5-verify .evverify-input::placeholder { color: rgba(255,255,255,.45); }
.evverify-scrim.ev5-verify .evverify-methods { display: flex; margin: 14px 0 0; padding: 3px; gap: 0; border-radius: 14px; background: #121215; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.evverify-scrim.ev5-verify .evverify-method { flex: 1; height: 44px; min-height: 44px; padding: 0 12px; border-radius: 11px; border: 0; background: none; box-shadow: none; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.56); }
.evverify-scrim.ev5-verify .evverify-method.on { background: #26262b; color: #fff; border: 0; }
.evverify-scrim.ev5-verify .evverify-actions { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.evverify-scrim.ev5-verify .evverify-actions > * { flex: 1; }
.evverify-scrim.ev5-verify .btn-secondary:not(.evverify-method) { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 16px; border-radius: 16px; background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: 16px; font-weight: 600; color: rgba(255,255,255,.75); }
.evverify-scrim.ev5-verify .btn-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 18px; border-radius: 18px; border: 0; background: #fff; color: #0b0b12; font-weight: 800; font-size: 17px; position: relative; isolation: isolate; box-shadow: 0 0 0 2px #07070a, 0 18px 40px -16px rgba(162,155,254,.6); }
.evverify-scrim.ev5-verify .btn-primary::after { content: ""; position: absolute; inset: -3px; border-radius: 21px; padding: 2.5px; background: var(--conic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kx-spin 4s linear infinite; pointer-events: none; }
.evverify-scrim.ev5-verify .evverify-cta, .evverify-scrim.ev5-verify .evverify-code + .btn-primary { margin-top: 20px; }
.evverify-scrim.ev5-verify .evverify-code { display: flex; align-items: center; min-height: 52px; margin: 8px 0 0; padding: 0 14px; border-radius: 16px; background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-family: inherit; font-size: 16px; font-weight: 700; color: #fff; word-break: break-all; }
.evverify-scrim.ev5-verify .evverify-foot { font-size: 16px; color: rgba(255,255,255,.56); margin-top: 12px; text-align: left; }
.evverify-scrim.ev5-verify .evverify-outcome { text-align: center; padding: 10px 0 0; }
/* the email / no-email / already-claimed outcomes read as left-aligned help lines (events.py .dvh); only the verified state centres (.dvo) */
.evverify-scrim.ev5-verify .evverify-outcome:not(:has(.evverify-tick)) { text-align: left; padding: 0; }
.evverify-scrim.ev5-verify .evverify-tick { width: 56px; height: 56px; border-radius: 50%; margin: 8px auto 10px; display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #55EFC4; background: rgba(85,239,196,.14); }
.evverify-scrim.ev5-verify .evverify-headline { font-size: 20px; font-weight: 800; margin: 0; }

/* ── the public pages (JoinPage, VerifyDomainConfirmPage): the .full night page, one centred .panel ──────── */
.ev5-nl { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(80% 60% at 50% 35%, rgba(162,155,254,.14), transparent 70%), #06060a; font-family: 'Hanken Grotesk', system-ui, sans-serif; color: #F4F4F5; }
.ev5-nl .nl-card { width: 100%; max-width: 430px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 20px; border: 0; border-radius: 22px; background: rgba(20,20,24,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); animation: fxin var(--fx-state) var(--out) both; }
.ev5-nl .nl-wordmark { margin: 0 0 6px; }
.ev5-nl .nl-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); margin: 0; }
.ev5-nl .ev-tier-stack { margin: 0; }
.ev5-nl .nl-title { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-style: normal; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin: 0; color: #F4F4F5; }
/* the event's name, on the join screen only, is the page's one Fraunces phrase */
.ev5-nl .nl-card:has(.nl-what) .nl-title { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 34px; line-height: 1.05; }
.ev5-nl .nl-sub { font-size: 16px; color: rgba(255,255,255,.75); line-height: 1.5; margin: 0; }
.ev5-nl .nl-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 8px; padding: 0 18px; border-radius: 18px; border: 0; background: #fff; color: #0b0b12; font-weight: 800; font-size: 17px; text-decoration: none; position: relative; isolation: isolate; box-shadow: 0 0 0 2px #07070a, 0 18px 40px -16px rgba(162,155,254,.6); }
.ev5-nl .nl-cta::after { content: ""; position: absolute; inset: -3px; border-radius: 21px; padding: 2.5px; background: var(--conic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kx-spin 4s linear infinite; pointer-events: none; }
.ev5-nl .nl-card:has(.nl-sub b) .nl-cta { font-size: 16px; line-height: 1.3; padding: 10px 18px; } /* the offline Continue sentence wraps (events.py .nlwrap) */
.ev5-nl .nl-what { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; min-height: 44px; margin: 0; padding: 0; color: #C7C0FF; font-weight: 700; font-size: 16px; text-decoration: none; background: none; border: 0; }
.ev5-nl .nl-what-panel { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ev5-nl .nl-foot, .ev5-nl .nl-what-panel .nl-foot { font-size: 16px; color: rgba(255,255,255,.56); line-height: 1.5; margin: 0; }
.ev5-nl .nl-loading { padding: 30px 0; }

@media (prefers-reduced-motion: reduce) {
  .ev5-att .ev-attendee-cta::after, .evverify-scrim.ev5-verify, .evverify-scrim.ev5-verify .evverify-sheet, .evverify-scrim.ev5-verify .btn-primary::after, .ev5-nl .nl-card, .ev5-nl .nl-cta::after { animation: none !important; }
}

/* ── the event page (EV-11; no locked mockup state shows it): the same kit parts the locked Events states use ── */
.scene-events[data-ev5] { font-family: 'Hanken Grotesk', system-ui, sans-serif; color: #F4F4F5; }
/* the event's name: the page's one Fraunces phrase (Fraunces italic = display / event name only) */
.scene-events[data-ev5] .ev-detail-header .dash-title, .scene-events[data-ev5] .ev-brand-title { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; letter-spacing: -.02em; }
.scene-events[data-ev5] .ev-detail-header .dash-title { font-size: 28px; line-height: 1.15; }
.scene-events[data-ev5] .ev-brand-title { font-size: 34px; line-height: 1.05; text-shadow: none; }
.scene-events[data-ev5] .ev-brand-meta { font: 400 14px/1.45 'Hanken Grotesk', system-ui, sans-serif; color: rgba(255,255,255,.75); }
/* .ib: back and the menu */
.scene-events[data-ev5] .ev-detail-header .dash-back, .scene-events[data-ev5] .ev-brand-back { width: 44px; height: 44px; min-width: 44px; margin: 0; border-radius: 50%; display: grid; place-items: center; flex: none; padding: 0; background: rgba(255,255,255,.06); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #F4F4F5; }
.scene-events[data-ev5] .ev-detail-header .dash-back::before, .scene-events[data-ev5] .ev-brand-back::before { display: none; }
.scene-events[data-ev5] .ev-detail-header .dash-back svg, .scene-events[data-ev5] .ev-brand-back svg { width: 20px; height: 20px; position: relative; }
.scene-events[data-ev5] .ev-detail-meta { font-size: 14px; color: rgba(255,255,255,.56); }
.scene-events[data-ev5] .ev-detail-notes { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.75); border-radius: 18px; background: #111114; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
/* cards: .pc (radius 18, #111114, 9% hairline) */
.scene-events[data-ev5] .ev-invite, .scene-events[data-ev5] .ev-organiser-entry, .scene-events[data-ev5] .ev-organiser-lapsed, .scene-events[data-ev5] .ev-make-joinable,
.scene-events[data-ev5] .ev-loadout, .scene-events[data-ev5] .ev-live, .scene-events[data-ev5] .att-row, .scene-events[data-ev5] .prio-event-top, .scene-events[data-ev5] .ev-nextedition { border-radius: 18px; background-color: #111114; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); color: #F4F4F5; }
.scene-events[data-ev5] .att-row + .att-row { margin-top: 10px; }
.scene-events[data-ev5] .ev-invite-title, .scene-events[data-ev5] .ev-organiser-entry-title, .scene-events[data-ev5] .ev-organiser-lapsed-title, .scene-events[data-ev5] .ev-make-joinable-title, .scene-events[data-ev5] .ev-loadout-title, .scene-events[data-ev5] .att-name { font-size: 16px; font-weight: 700; color: #fff; }
.scene-events[data-ev5] .ev-organiser-entry-sub, .scene-events[data-ev5] .ev-organiser-lapsed-sub, .scene-events[data-ev5] .att-sub, .scene-events[data-ev5] .ev-loadout-role, .scene-events[data-ev5] .ev-loadout-when, .scene-events[data-ev5] .ev-trust-line { font-size: 14px; color: rgba(255,255,255,.56); }
.scene-events[data-ev5] .ev-invite-code { min-height: 52px; border-radius: 16px; background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: 16px; font-weight: 700; color: #fff; }
/* section labels: .sl */
.scene-events[data-ev5] .ev-section-label { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); }
.scene-events[data-ev5] .ev-section-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.14), transparent); }
/* the replay's three numbers: .stat tiles */
.scene-events[data-ev5] .ev-replay-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scene-events[data-ev5] .ev-replay-stat { min-height: 56px; padding: 12px; border-radius: 14px; background: #16161a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); text-align: center; }
.scene-events[data-ev5] .ev-replay-num { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #F4F4F5; }
.scene-events[data-ev5] .ev-replay-stat.owe .ev-replay-num { color: #FDCB6E; }
.scene-events[data-ev5] .ev-replay-stat.sent .ev-replay-num { color: #55EFC4; }
.scene-events[data-ev5] .ev-replay-lbl { font-size: 14px; color: rgba(255,255,255,.56); letter-spacing: 0; text-transform: none; font-weight: 400; }
/* quiet controls: .sec / .ln at 44px; the page's one primary action: .cta */
.scene-events[data-ev5] .btn-secondary, .scene-events[data-ev5] .c1-btn-quiet, .scene-events[data-ev5] .ev-status-btn { min-height: 44px; border-radius: 16px; background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: 16px; font-weight: 600; color: rgba(255,255,255,.75); }
.scene-events[data-ev5] .ev-status-btn { border-radius: 99px; font-size: 14px; padding: 0 12px; }
.scene-events[data-ev5] .ev-debrief-btn { min-height: 52px; }
.scene-events[data-ev5] .ev-primary-cta .btn-primary { min-height: 56px; border-radius: 18px; border: 0; background: #fff; color: #0b0b12; font-weight: 800; font-size: 17px; position: relative; isolation: isolate; box-shadow: 0 0 0 2px #07070a, 0 18px 40px -16px rgba(162,155,254,.6); }
.scene-events[data-ev5] .ev-primary-cta .btn-primary::after { content: ""; position: absolute; inset: -3px; border-radius: 21px; padding: 2.5px; background: var(--conic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kx-spin 4s linear infinite; pointer-events: none; }
.scene-events[data-ev5] .att-count-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 99px; font-size: 14px; font-weight: 700; color: #FDCB6E; background: rgba(253,203,110,.14); }
/* the page's sheets (menu, visibility, organiser tools): the kit .sheet with E08 */
.scene-events[data-ev5] .sheet-overlay { background: rgba(3,3,5,.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: fxfade .35s var(--out) both; }
.scene-events[data-ev5] .sheet-overlay .sheet { border: 0; border-radius: 28px 28px 0 0; background: #0f0f12; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); padding: 10px 16px 28px; animation: fxsheet .55s var(--sheet) both; }
.scene-events[data-ev5] .sheet-overlay .sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin: 0 auto 12px; }
.scene-events[data-ev5] .sheet-title, .scene-events[data-ev5] .ev-organiser-sheet-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #F4F4F5; }
.scene-events[data-ev5] .sheet .btn-primary { min-height: 56px; border-radius: 18px; border: 0; background: #fff; color: #0b0b12; font-weight: 800; font-size: 17px; }
.scene-events[data-ev5] .sheet .btn-ghost { min-height: 44px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.56); background: none; border: 0; }
.scene-events[data-ev5] .ev-status-row { border-radius: 18px; background: #111114; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.scene-events[data-ev5] .ev-status-row.now { box-shadow: inset 0 0 0 2px #A29BFE; }
.scene-events[data-ev5] .ev-status-row-name { font-size: 16px; font-weight: 700; }
.scene-events[data-ev5] .ev-status-row-sub, .scene-events[data-ev5] .ev-status-row-price { font-size: 14px; color: rgba(255,255,255,.56); }
.scene-events[data-ev5] .ev-organiser-tile { border-radius: 14px; background: #16161a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.scene-events[data-ev5] .ev-organiser-tile-n { font-size: 22px; font-weight: 800; }
.scene-events[data-ev5] .ev-organiser-tile-l { font-size: 14px; color: rgba(255,255,255,.56); }
.scene-events[data-ev5] .ev-organiser-manage-row { min-height: 52px; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) {
  .scene-events[data-ev5] .sheet-overlay, .scene-events[data-ev5] .sheet-overlay .sheet, .scene-events[data-ev5] .ev-primary-cta .btn-primary::after { animation: none !important; }
}

/* ── R5-FINISH-2026-10-09 · the parts R5's scope could not reach ───────────────────────────────────────── */
/* RF-1 · the event's mini constellation on each card and on the hero (mini-sky.js, the renderer People uses;
   events.py .frow .mc / .hbot .mc / .mc): 92x40, overflow visible, the drop-shadow ALWAYS on (EFFECTS.md §D),
   lit stars bloom 3.6s (E14, People's own keyframe) */
.scene-events.ev5 .ev5-mc { flex: none; display: inline-flex; margin-left: auto; }
.scene-events.ev5 .ev5-mc svg.mc { width: 92px; height: 40px; overflow: visible; filter: drop-shadow(0 0 6px rgba(162,155,254,.6)); }
.scene-events.ev5 .ev5-mc .star { animation: pp4-bloom 3.6s ease-in-out infinite; }
.scene-events.ev5 .ev-hero-faces { flex: 1; }
/* RF-3 · the tile's kit .stat wrapper has no box of its own: the tile stays the .stat-looking box above */
.scene-events.ev5 .ev5-stat { display: contents; }
/* RF-2 · 34px kit-tone faces (Avatar's opt-in .PA), the lit ring 2px out (events.py .fs .PA.on::after{inset:-2px}) */
.scene-events.ev5 .face-stack .PA.on::after { inset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .scene-events.ev5 .ev5-mc .star, .scene-events.ev5 .face-stack .PA.on::after { animation: none !important; }
}

/* RF-4 · EV-5 · the event delete confirm as the kit .dialog (ConfirmHost's `kit` opt-in; kit.css .scrim .dialog
   .check .ghost .sec .danger; events.py .cmsg .csub .chk .acts). E09 (.55s from scale .86 on --spring) and the
   scrim's .35s fade come from fx3.css's .dialog / .scrim rules. Above the tab bar, as the app's confirm is. */
.ev5-dlg .scrim { position: fixed; inset: 0; z-index: 1000000; background: rgba(3,3,5,.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ev5-dlg .dialog { position: fixed; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); z-index: 1000001; border-radius: 24px; background: #141418; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -20px #000; padding: 20px; color: #F4F4F5; font-family: 'Hanken Grotesk', system-ui, sans-serif; text-align: left; }
.ev5-dlg .cmsg { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.ev5-dlg .csub { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.75); }
.ev5-dlg .chk { display: flex; gap: 2px; align-items: flex-start; margin-top: 16px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.75); min-height: 44px; position: relative; cursor: pointer; }
.ev5-dlg .chk input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ev5-dlg .chk .check { width: 44px; height: 44px; flex: none; display: grid; place-items: center; margin: -10px 0 0 -10px; }
.ev5-dlg .check i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); color: #07070a; transition: background .25s var(--out), box-shadow .25s var(--out); }
.ev5-dlg .check i svg { width: 14px; height: 14px; opacity: 0; }
.ev5-dlg .chk input:checked + .check i { background: #55EFC4; box-shadow: 0 0 12px rgba(85,239,196,.5); animation: fxpop .5s var(--spring); }
.ev5-dlg .chk input:checked + .check i svg { opacity: 1; }
.ev5-dlg .chk input:focus-visible + .check i { outline: 2px solid #A29BFE; outline-offset: 2px; }
.ev5-dlg .acts { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.ev5-dlg .acts > * { flex: 1; }
.ev5-dlg .acts .ghost { min-height: 44px; padding: 0 12px; border: 0; background: none; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.56); font-family: inherit; }
.ev5-dlg .acts .sec { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin: 0; padding: 0 16px; border: 0; border-radius: 16px; background: rgba(20,20,24,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: 16px; font-weight: 600; font-family: inherit; color: rgba(255,255,255,.75); }
.ev5-dlg .acts .sec.danger { color: #FF7676; }
@media (prefers-reduced-motion: reduce) {
  .ev5-dlg .scrim, .ev5-dlg .dialog, .ev5-dlg .check i { animation: none !important; transition: none; }
}

/* ── DISCUSSION-POINTS-2026-10-09 · what the room talked about (Event Discussion Points v6 2026-10-08) ───────── */
/* LIFTED from the v6 mockup's page CSS (.seg .sl .panel .rt .rth .rtn .tp .tpl .tpn .tpc .bar.tb .tph .lk .spr .spl
   .bd .bdn .bdr .empty.fl .ringwrap.big .ring.amber .ghostbars), every value kept, renamed .evdp- so nothing collides
   with the kit. The section sits in the Organiser tools sheet (always the dark kit sheet) and in the sponsor report
   (var(--surface)); its colours are the mockup's own, never a tier skin's tokens, and only the light theme's report
   swaps them for light ones. 14px text floor, 44px taps. */
.evdp { --evdp-t1: #F4F4F5; --evdp-t2: rgba(255,255,255,.75); --evdp-t3: rgba(255,255,255,.56); --evdp-t4: rgba(255,255,255,.45); --evdp-strong: #fff; --evdp-line: rgba(255,255,255,.09); --evdp-line2: rgba(255,255,255,.14); --evdp-panel: rgba(20,20,24,.55); --evdp-track: rgba(255,255,255,.08); --evdp-tile: #1c1c22; --evdp-dash: rgba(255,255,255,.07); --evdp-ghost: rgba(255,255,255,.12); color: var(--evdp-t1); font: 400 16px/1.45 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-align: left; }
[data-theme="light"] .evsponsor-sheet .evdp { --evdp-t1: var(--text, #1a1a2e); --evdp-t2: var(--text-2, rgba(26,26,46,.72)); --evdp-t3: var(--text-3, rgba(26,26,46,.78)); --evdp-line: rgba(40,36,80,.10); --evdp-t4: rgba(26,26,46,.55); --evdp-strong: var(--text, #1a1a2e); --evdp-line2: rgba(40,36,80,.16); --evdp-panel: rgba(40,36,80,.04); --evdp-track: rgba(40,36,80,.08); --evdp-tile: rgba(40,36,80,.06); --evdp-dash: rgba(40,36,80,.10); --evdp-ghost: rgba(40,36,80,.14); }
.evdp-seg { display: flex; padding: 3px; margin-top: 16px; border-radius: 14px; background: #121215; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.evdp-seg button { flex: 1; height: 44px; padding: 0 12px; border: 0; border-radius: 11px; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--evdp-t3); cursor: pointer; transition: transform .14s cubic-bezier(.2,.8,.2,1); }
.evdp-seg button:active { transform: scale(.96); }
.evdp-seg button.on { background: #26262b; color: #fff; }
.evdp-sl { display: flex; align-items: center; gap: 12px; margin: 24px 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--evdp-t3); }
.evdp-sl::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--evdp-line2), transparent); }
.evdp-panel { position: relative; border-radius: 22px; overflow: hidden; background: var(--evdp-panel); box-shadow: inset 0 0 0 1px var(--evdp-line); padding: 16px; }
.evdp-rth { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.evdp-rtn { font-size: 16px; color: var(--evdp-t2); }
.evdp-rtn b { font-size: 22px; font-weight: 800; color: var(--evdp-strong); letter-spacing: -.02em; margin-right: 4px; }
.evdp-tp { padding: 12px 0; }
.evdp-tp + .evdp-tp { border-top: 1px solid var(--evdp-line); }
.evdp-tpl { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.evdp-tpn { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: var(--evdp-strong); display: flex; align-items: center; gap: 6px; }
.evdp-tpc { display: flex; align-items: baseline; gap: 8px; font-size: 16px; }
.evdp-tpc b { font-weight: 800; }
.evdp-tpc em { font-style: normal; font-size: 14px; color: var(--evdp-t3); min-width: 34px; text-align: right; }
.evdp-bar { height: 8px; border-radius: 99px; background: var(--evdp-track); overflow: hidden; }
.evdp-bar i { display: block; height: 100%; width: var(--evdp-v, 0%); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--evdp-c) 55%, transparent), var(--evdp-c)); box-shadow: 0 0 12px color-mix(in srgb, var(--evdp-c) 50%, transparent); }
.evdp-bar.first i { background: linear-gradient(95deg, #FF7676, #FDCB6E, #55EFC4, #74B9FF, #A29BFE); }
.evdp-hidden .evdp-tpn { color: var(--evdp-t4); font-weight: 600; }
.evdp-hidden .evdp-tpc em { min-width: 0; }
.evdp-bar.dim i { background: repeating-linear-gradient(90deg, var(--evdp-dash) 0 6px, transparent 6px 10px); box-shadow: none; }
.evdp-lk { display: grid; color: var(--evdp-t4); }
.evdp-lk svg { width: 16px; height: 16px; }
.evdp-spr { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.evdp-spr + .evdp-spr { border-top: 1px solid var(--evdp-line); }
.evdp-m { flex: 1; min-width: 0; }
.evdp-spl { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 18px; background: var(--evdp-tile); box-shadow: inset 0 0 0 1px var(--evdp-line2); color: var(--evdp-t2); }
.evdp-spl svg { width: 16px; height: 16px; }
.evdp-hidden .evdp-spl { color: var(--evdp-t4); }
.evdp-bd + .evdp-bd { border-top: 1px solid var(--evdp-line); margin-top: 12px; padding-top: 12px; }
.evdp-bdn { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.evdp-bdr { display: grid; grid-template-columns: 52px 1fr 34px; align-items: center; gap: 10px; font-size: 14px; color: var(--evdp-t3); min-height: 24px; }
.evdp-bdr b { color: var(--evdp-strong); text-align: right; font-size: 14px; }
.evdp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 16px 8px 12px; font-size: 16px; color: var(--evdp-t3); }
.evdp-empty strong { color: var(--evdp-strong); font-size: 16px; }
.evdp-ringwrap { position: relative; width: 84px; height: 84px; flex: none; margin-bottom: 8px; }
.evdp-ringwrap > span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.evdp-ring { --evdp-v: 0; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(#FDCB6E calc(var(--evdp-v) * 1%), var(--evdp-track) 0); -webkit-mask: radial-gradient(circle, transparent 0 33px, #000 34px); mask: radial-gradient(circle, transparent 0 33px, #000 34px); }
.evdp-ghost { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 4px; opacity: .5; }
.evdp-gbar { height: 8px; border-radius: 99px; background: var(--evdp-track); overflow: hidden; }
.evdp-gbar i { display: block; height: 100%; border-radius: inherit; background: repeating-linear-gradient(90deg, var(--evdp-ghost) 0 6px, transparent 6px 10px); }
@media (prefers-reduced-motion: reduce) {
  .evdp-seg button { transition: none; }
}