/* ewent_app.css - the logged-in app shell (html/include/_chrome.php), PERF-04.
   Moved out of the inline <style> so it is cached once (ewent_asset_url ?v=,
   immutable) instead of re-shipped on every page. Loads after ewent_tokens /
   base / components and after the inline reset + brand_root_css(), so the
   cascade order is the same as when it was inline. No PHP in here: per-page
   values (event palette) still come from palette_render_style_block(). */
/* Sprint 4.1 - AI Concierge floating action button (FAB) - bottom-right, always-on */
.v2-cf{position:fixed;bottom:22px;right:22px;width:58px;height:58px;border-radius:50%;background:var(--card);color:var(--ink);border:1px solid var(--rule);cursor:pointer;box-shadow:var(--sh-lg),0 0 0 4px rgba(188,21,88,.06);display:flex;align-items:center;justify-content:center;z-index:var(--ewent-z-fab);font-family:inherit;transition:transform .15s,box-shadow .15s}
.v2-cf:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 36px rgba(188,21,88,.20),0 0 0 6px rgba(188,21,88,.10);border-color:var(--ewent-color-brand)}
.v2-cf-emoji{font-size:26px;line-height:1}
.v2-cf-pulse{position:absolute;width:58px;height:58px;border-radius:50%;background:var(--ewent-color-brand);opacity:.32;animation:v2CfPulse 2.6s infinite;pointer-events:none}
@keyframes v2CfPulse{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(1.5);opacity:0}}
@media(max-width:520px){.v2-cf{bottom:16px;right:16px;width:52px;height:52px}.v2-cf-emoji{font-size:23px}}

/* Concierge sheet */
.v2-cs{position:fixed;inset:0;background:rgba(15,15,14,.55);z-index:var(--ewent-z-sheet);display:flex;align-items:flex-end;justify-content:center;animation:fade .18s ease}
@media(min-width:600px){.v2-cs{align-items:flex-end;justify-content:flex-end;padding:0 22px 22px 0}}
.v2-cs-card{background:var(--card);width:100%;max-width:440px;max-height:80vh;border-radius:24px 24px 0 0;display:flex;flex-direction:column;animation:slideUp .26s cubic-bezier(.34,1.56,.64,1);overflow:hidden;box-shadow:var(--sh-lg)}
@media(min-width:600px){.v2-cs-card{border-radius:22px;max-height:78vh}}
.v2-cs-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rule);flex-shrink:0}
.v2-cs-ava{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--rule);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.v2-cs-title{flex:1;font-size:14px;font-weight:600;color:var(--ink);line-height:1.2}
.v2-cs-title small{font-size:11px;font-weight:500;color:var(--green);display:block;margin-top:1px}
.v2-cs-x{background:none;border:none;color:var(--subtle);font-size:22px;cursor:pointer;font-family:inherit;padding:4px 8px;border-radius:6px;line-height:1}
.v2-cs-x:hover{color:var(--accent);background:var(--accent-light)}
.v2-cs-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.v2-cs-msg{padding:12px 14px;border-radius:14px;font-size:13.5px;line-height:1.55;max-width:88%}
.v2-cs-msg.bot{background:var(--bg-soft);color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px}
.v2-cs-msg.user{background:var(--ink);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.v2-cs-msg.bot strong{color:var(--accent)}
.v2-cs-sugs{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 14px}
.v2-cs-sugs button{background:var(--card);border:1px solid var(--rule);border-radius:99px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;text-align:left}
.v2-cs-sugs button:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.v2-cs-foot{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--rule);background:var(--card);flex-shrink:0}
.v2-cs-foot input{flex:1;padding:10px 14px;font-family:inherit;font-size:13.5px;border:1px solid var(--rule);border-radius:99px;}
.v2-cs-foot input:focus{border-color:var(--accent)}
.v2-cs-foot button{padding:10px 16px;background:var(--ink);color:#fff;border:none;border-radius:99px;font-family:inherit;font-weight:600;cursor:pointer}

/* Sprint 4.2 - TLDR info chip + slide-in side-sheet */
.tldr{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--accent-light);color:var(--accent);border:none;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;margin-left:4px;vertical-align:middle;line-height:1}
.tldr:hover{background:var(--accent);color:#fff}
.v2-tldr-sheet{position:fixed;inset:0;background:rgba(15,15,14,.4);z-index:calc(var(--ewent-z-sheet) + 10);display:flex;justify-content:flex-end;animation:fade .18s ease}
.v2-tldr-sheet .v2-tlx{background:var(--card);width:100%;max-width:380px;height:100vh;padding:24px;box-shadow:var(--sh-lg);animation:v2SlideRight .26s cubic-bezier(.34,1.56,.64,1);overflow-y:auto}
@keyframes v2SlideRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.v2-tldr-sheet .v2-tlx h3{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.v2-tldr-sheet .v2-tlx h3::before{content:'TLDR';font-size:9.5px;font-weight:600;background:var(--accent);color:#fff;padding:3px 7px;border-radius:99px;letter-spacing:.04em}
.v2-tldr-sheet .v2-tlx p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:12px}
.v2-tldr-sheet .v2-tlx button{margin-top:8px;background:var(--ink);color:#fff;border:none;padding:10px 22px;border-radius:99px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer}



body{background:var(--bg);font-size:16px;min-height:100vh}

/* Full-width layout - topbar and footer go edge to edge, content centers
   at a desktop-friendly width. Phone-frame look removed per feedback. */
/* ONE content track for the whole app. The topbar, the page body and the footer
   each used to carry their own width (edge-to-edge / 920 / 560), so the logo,
   the content and the footer text all began at a different x on any wide screen.
   Every shell now measures from these two tokens — change the width in one place
   and header, body and footer move together. Matches how v/home.html aligns its
   nav, sections and footer to --max-w. */
:root{--ewent-track:920px;--ewent-gutter:1.25rem}
.shell{background:var(--bg);min-height:100vh;position:relative}

.topbar{display:flex;align-items:center;padding:.9rem 0;background:var(--card);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:var(--ewent-z-sticky)}
/* The bar stays edge-to-edge (its border + blur must reach both sides); only
   its CONTENTS ride the track. */
.topbar-inner{width:100%;max-width:var(--ewent-track);margin:0 auto;padding:0 var(--ewent-gutter);display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.topbar .logo{display:flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none;font-weight:600}
.topbar .logo img{height:28px;width:auto;display:block}
.topbar .who{display:flex;align-items:center;gap:.6rem;font-size:.78rem;margin-left:auto}
.topbar .now-clock{display:inline-flex;align-items:center;gap:.4rem;font-size:11px;color:var(--muted);background:var(--bg-soft);border:1px solid var(--rule);border-radius:99px;padding:.3rem .7rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.topbar .now-clock .nc-dot{width:6px;height:6px;background:var(--green);border-radius:50%;flex-shrink:0;animation:nowDot 2s ease-in-out infinite}
@keyframes nowDot{0%,100%{opacity:1}50%{opacity:.35}}
.topbar .who-profile{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;padding:.2rem .55rem .2rem .25rem;border-radius:99px;transition:background .14s}
.topbar .who-profile:hover{background:var(--bg-soft);text-decoration:none}
.topbar .who-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--bg-soft);flex-shrink:0}
.topbar .who-avatar-fallback{width:28px;height:28px;border-radius:50%;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
.topbar .who-email{color:var(--muted);max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .who strong{color:var(--ink);font-weight:600}
.topbar .logout{background:none;line-height:inherit;font-size:11px;color:var(--accent);font-weight:500;border:1px solid var(--accent-light);border-radius:99px;padding:.28rem .9rem;cursor:pointer;font-family:inherit;text-decoration:none}
.topbar .logout:hover{background:var(--accent);color:#fff;text-decoration:none}

@keyframes slideUp{from{transform:translateY(20%);opacity:0}to{transform:translateY(0);opacity:1}}
/* ≤360px (the width the partner's padded column leaves on a phone): logo +
   clock + Login/Register no longer fit; the clock is the least useful of the
   three here, so it goes first and the sign-in pill stays on one line. */
@media(max-width:360px){.topbar .now-clock{display:none}}
@media(max-width:520px){
  .topbar{padding:.7rem 0}
  .topbar .who-email{max-width:120px}
}

/* Site footer - matches dash chrome */
.site-footer{background:var(--card);border-top:1px solid var(--rule);padding:1.75rem 0;margin-top:2.5rem;text-align:center}
.site-footer-inner{max-width:var(--ewent-track);margin:0 auto;padding:0 var(--ewent-gutter)}
.sf-brand{display:flex;align-items:center;justify-content:center;gap:.55rem;font-size:.85rem;color:var(--muted);font-weight:500;margin-bottom:.55rem}
.sf-brand img{height:22px;width:auto;opacity:.85}
.sf-brand a{color:var(--accent);text-decoration:none;font-weight:600}
.sf-brand a:hover{text-decoration:underline}
.sf-links{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-bottom:.55rem;font-size:.78rem}
.sf-links a{color:var(--muted);text-decoration:none}
.sf-links a:hover{color:var(--accent);text-decoration:underline}
.sf-copy{font-size:.72rem;color:var(--subtle);letter-spacing:.01em}

/* Content container - centers content at 760px max */
/* 760px was tight for the content this page now carries — agenda rows with a
   thumb + time + speakers, attendee rows, the exhibitor grid. 920 gives those
   room without turning body copy into an unreadable full-width measure. The
   widget embed keeps its own 1040 cap (widgets/event/embed.php). */
.screen{max-width:var(--ewent-track);margin:0 auto;padding:32px var(--ewent-gutter) 80px}
@media(min-width:900px){.screen{padding-top:44px}}

/* Hero - full-width gradient strip with content centered */
.hero{padding:44px 1.25rem 32px;background:var(--grad-soft);position:relative;overflow:hidden;text-align:left}
.hero::before{content:'';position:absolute;top:-60%;right:-30%;width:300px;height:300px;background:radial-gradient(circle,rgba(188,21,88,.10),transparent 70%);pointer-events:none}
.hero .tag{display:inline-block;background:rgba(255,255,255,.65);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);padding:5px 12px;border-radius:99px;margin-bottom:14px}
.hero h1{font-size:32px;font-weight:600;color:var(--ink);margin-bottom:10px;line-height:1.1}
.hero h1 .grad{background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:15px;color:var(--muted);max-width:380px;line-height:1.55}

/* Buttons live in assets/css/ewent_components.css only (UI-08): .btn, .btn-accent,
   .btn-grad, .btn-outline, .btn-soft, .btn-block and .btn-sm are aliases there of the
   .ewent-btn variants. The primary CTA is --ewent-color-brand (the fixed brand pink),
   deliberately NOT --accent: --accent follows the event banner. This file may only
   place a button (layout), never restyle it (CI TOK-BTN). */

/* Pill-style segmented controls (Fewer/Normal/More, Auto/Light/Dark) */
.tab-pill{padding:7px 14px;border-radius:99px;border:1px solid var(--rule);background:var(--card);color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tab-pill:hover{border-color:var(--accent);color:var(--accent)}
/* Active state — uses var(--ink) which is dark in light mode (white text
   reads fine) but FLIPS to near-white cream in dark mode → white-on-cream
   was invisible. Override active state per-theme so the active pill
   stays high-contrast on both themes. */
.tab-pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Event-description card with collapse/expand. When collapsed, the text
   is clamped to ~4 lines with a soft fade at the bottom; "Show more"
   reveals the rest. */
.v2-evt-desc{position:relative}
/* Same body type as the Announcements tab (.v2-ann-body) — the description used
   to inherit the 16px page size, so the two tabs read as different documents
   (user 2026-09-24). The sanitiser already strips every inline style from the
   club's rich-text HTML, so this size is the only thing that decides it. */
.v2-evt-desc-text{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
/* ppapi sends rich HTML — give the nested elements room to breathe. */
/* WHAT THE EDITOR SHOWS, THE PAGE SHOWS (user 2026-10-15): same spacing as the
   description editor (.rte-body in v/dash/create_page.php) — one <div> per line,
   every <br> kept (two <br> = a blank line), browser paragraph gaps. No <br>
   is hidden or merged any more (the old `br + br{display:none}` hid real lines). */
.v2-evt-desc-text div{margin:0}
.v2-evt-desc-text p{margin:1em 0}
.v2-evt-desc-text > :first-child{margin-top:0}
.v2-evt-desc-text > :last-child{margin-bottom:0}
.v2-evt-desc-text h1,.v2-evt-desc-text h2,.v2-evt-desc-text h3,.v2-evt-desc-text h4{font-weight:600;line-height:1.3;color:var(--ink)}
.v2-evt-desc-text h1{font-size:1.6em;margin:.67em 0}
.v2-evt-desc-text h2{font-size:19px;font-weight:600;margin:8px 0 4px}
.v2-evt-desc-text h3{font-size:1.17em;margin:1em 0}
.v2-evt-desc-text h4{font-size:1em;margin:1.33em 0}
.v2-evt-desc-text ul,.v2-evt-desc-text ol{margin:6px 0;padding-left:22px}
.v2-evt-desc-text li{margin:0}
.v2-evt-desc-text blockquote{margin:6px 0;padding:4px 12px;border-left:3px solid var(--accent);color:var(--muted)}
.v2-evt-desc-text strong,.v2-evt-desc-text b{font-weight:600;color:var(--ink)}
.v2-evt-desc-collapsed .v2-evt-desc-text{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;
  /* Soft fade at the bottom edge so the cutoff doesn't look abrupt. */
  mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
}
.v2-evt-desc-toggle{
  display:inline-block;margin-top:8px;padding:6px 14px;border-radius:99px;
  border:1px solid var(--rule);background:var(--card);color:var(--accent);
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
}
.v2-evt-desc-toggle:hover{border-color:var(--accent);background:var(--accent-light)}

/* iOS-style toggle row inside .info-card on the Me page */
.toggle-row{display:flex;justify-content:space-between;align-items:center;cursor:pointer;width:100%}
.toggle-row input[type=checkbox]{appearance:none;-webkit-appearance:none;width:42px;height:24px;background:var(--rule);border-radius:99px;position:relative;cursor:pointer;transition:background .15s;margin:0;flex-shrink:0}
.toggle-row input[type=checkbox]::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:left .15s}
.toggle-row input[type=checkbox]:checked{background:var(--accent)}
.toggle-row input[type=checkbox]:checked::after{left:20px}

/* Event card */
/* content-visibility:auto + contain-intrinsic-size lets the browser skip
   rendering AND skip loading the background-image for cards below the
   viewport until the user scrolls near. Big win on the events grid where
   each card pulls a third-party banner from thumbs.dreamstime.com or
   i.postimg.cc (some of which are 500–1500ms to respond). Visible cards
   render instantly; off-screen cards stay placeholder-sized until needed. */
.evt{display:flex;gap:12px;padding:14px;background:var(--card);border:1px solid var(--rule);border-radius:14px;text-decoration:none;color:inherit;transition:border-color .14s,transform .12s,box-shadow .14s;cursor:pointer;content-visibility:auto;contain-intrinsic-size:0 104px}
.evt:hover{border-color:var(--accent-light);transform:translateY(-1px);box-shadow:var(--sh-sm);text-decoration:none}
.evt-img{width:72px;height:72px;border-radius:11px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;overflow:hidden;background-size:cover;background-position:center}
.evt-body{flex:1;min-width:0}
.evt-title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:3px;line-height:1.3}
.evt-meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.evt-meta .dot{color:var(--rule)}
.evt-tag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:99px;margin-top:6px}
.evt-tag.live{background:var(--accent-light);color:var(--accent)}
.evt-tag.upcoming{background:var(--secondary-light);color:var(--secondary)}
.evt-tag.virtual{background:var(--cyan-soft);color:var(--green)}

/* Per-event progress ring (right side of card, when RSVP'd) - enlarged 46→56px per audit */
.evt-progress{flex-shrink:0;display:flex;align-items:center;margin-left:auto;padding-left:8px}
.ep-ring{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--accent) 0%,var(--rule) 0)}
.ep-inner{width:44px;height:44px;background:var(--card);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink);line-height:1.05;flex-direction:row;gap:1px}
.ep-inner strong{font-weight:600;color:var(--accent);font-size:15px}
.ep-inner span{color:var(--subtle);font-size:10.5px;font-weight:600}

/* Live-pulse keyframes - used by view/events_list.php (.evc-live i) */
@keyframes v2LivePulse{0%,100%{box-shadow:0 0 0 0 rgba(188,21,88,.55);opacity:1}50%{box-shadow:0 0 0 5px rgba(188,21,88,0);opacity:.6}}

/* Card flex layout - when a progress ring is present it goes to the right */
.evt{align-items:center}

/* Poster on event detail */
/* Poster — extra top padding (60px) so the absolute .poster-top-row pills
   (LIVE NOW / FREE / VIRTUAL at top:18px) don't collide with the H1 below.
   Pills row is ~24px tall + 18px top offset = 42px → 60px clears with margin. */
.poster{background:var(--grad-hero);color:#fff;border-radius:22px;padding:60px 22px 28px;margin-bottom:18px;position:relative;overflow:hidden;box-shadow:var(--sh-md);background-size:cover;background-position:center}

/* ── Event hero v2 (2026-08-21) — replaces the dark cover-cropped banner ─────
   The old .poster used the banner as a background-size:cover image under a 78%
   black wash, so the artwork was cropped AND muddied and the title needed white
   text. This shows the banner WHOLE beside the text and tints the surface with
   --event-accent-soft: the 12% dominant colour palette.php already extracts from
   that same image (client-side, in <head>, so it is set before paint). Same
   source that already colours the buttons — no new colour work.
   .poster is left defined above: emails and any older caller still use it. */
.poster-v2{display:flex;gap:26px;align-items:center;background:var(--event-accent-soft,var(--accent-light));
  color:var(--ink);border-radius:22px;padding:24px 26px;margin-bottom:18px;position:relative;
  overflow:hidden;box-shadow:var(--sh-sm)}
.poster-v2-main{flex:1 1 320px;min-width:0;position:relative}
.poster-v2-art{flex:0 0 40%;max-width:400px;position:relative;padding-top:6px}
.poster-v2-art img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--sh-md)}
/* Softer than pure --ink (#18181B): full-strength near-black on a pale tint reads
   harsh, especially at 800 weight. Mixed toward white so it stays clearly the
   heading without the hard edge. Size scales with the viewport, and a LONG title
   wraps to at most 3 lines then ellipsises instead of shoving the art column off
   the row — titles here run to 80+ characters ("EduConnect - Virtual Job
   Networking Event for Educational Services Professionals"). */
.poster-v2 h1{font-size:clamp(21px,2.5vw,31px);font-weight:600;line-height:1.14;letter-spacing:-.02em;
  color:color-mix(in srgb, var(--ink) 82%, #ffffff);margin:12px 0 8px;position:relative;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.poster-v2 .pmeta{font-size:13.5px;line-height:1.6;color:var(--muted);opacity:1}
.poster-v2 .pmeta strong{color:color-mix(in srgb, var(--ink) 74%, #ffffff);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;font-size:12.5px}
/* The badge helpers bake in white-on-translucent inline styles for the dark
   hero, which vanish on a light surface — override them here. */
.poster-v2 .poster-top-row{position:static;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.poster-v2 .poster-badge{background:rgba(0,0,0,.06) !important;color:var(--ink) !important;
  backdrop-filter:none}
.poster-v2 .live-pill{backdrop-filter:none}
.poster-v2 .poster-official{background:var(--card);color:var(--ink);border:1px solid var(--rule);
  backdrop-filter:none;box-shadow:var(--sh-sm)}
/* Share (view/event_detail.php → view/_share_widget.php): a labelled pill in the
   hero card's top-right corner, above the banner image (user 2026-10-14). */
.poster-v2 .ev-share{position:absolute;top:14px;right:18px;z-index:4;display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:99px;border:1px solid var(--rule);background:var(--card);color:var(--ink);
  font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.2;cursor:pointer;box-shadow:var(--sh-sm);
  transition:background .12s,transform .12s}
.poster-v2 .ev-share:hover{background:var(--bg-soft);transform:translateY(-1px)}
.poster-v2 .ev-share:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.poster-v2 .ev-share svg{flex-shrink:0}
/* Room for it above the banner, so it never sits on the image. */
.poster-v2:has(> .ev-share) .poster-v2-art{margin-top:30px}
/* Badges read as one quiet meta line rather than three hard chips — the partner
   shows plain muted caps, and solid pills fight the tinted surface. Uppercase,
   letter-spaced, separated by hairline dividers; only the live pill keeps colour,
   because "happening now" is the one worth shouting. */
.poster-v2 .poster-top-row{gap:0;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.poster-v2 .poster-badge{background:transparent !important;color:var(--subtle) !important;
  padding:0 10px;border-radius:0;border-left:1px solid var(--rule);font-size:11.5px}
/* Flush-left for the first PLAIN badge only — the live pill is a filled chip and
   keeps its own padding, or its dot sits on the pill's rounded edge. */
.poster-v2 .poster-top-row > :first-child{border-left:none}
.poster-v2 .poster-top-row > :first-child:not(.live-pill){padding-left:0}
.poster-v2 .live-pill{padding:3px 10px;border-radius:99px}
/* Countdown */
.poster-v2-cd{margin:16px 0 4px}
.poster-v2-cd-lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--subtle);margin-bottom:7px}
.poster-v2-cd-units{display:flex;gap:8px}
.poster-v2-cd-units span{display:flex;flex-direction:column;align-items:center;min-width:52px;
  padding:7px 4px;background:var(--card);border:1px solid var(--rule);border-radius:10px}
.poster-v2-cd-units b{font-size:19px;font-weight:600;color:color-mix(in srgb, var(--ink) 80%, #ffffff);
  line-height:1.1;font-variant-numeric:tabular-nums}
.poster-v2-cd-units i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--subtle);margin-top:2px}
/* Action row now lives inside the hero */
.poster-v2-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:stretch;margin-top:16px}
/* The CTA group is wrapped so the whole set can be withdrawn at once
   (data-phase-hide). display:contents keeps the buttons as direct flex items of
   .poster-v2-actions, so wrapping them changes nothing visually — and the
   [hidden] rule is restated because an author display: always beats the UA one. */
.poster-v2-ctas{display:contents}
.poster-v2-ctas[hidden]{display:none}
/* Safety net for the phase engine. hidePastElements() sets el.hidden, but the UA
   [hidden] rule loses to ANY author display — and the tagged elements mostly have
   one (.btn is inline-flex, .poster-v2-actions is flex). So "Registered ✓" (a
   .btn) and the Add-buttons row (a .poster-v2-actions) carried the attribute and
   never actually vanished when the event went live; only the .poster-v2-ctas
   wrappers, restated above, worked. Cover every phase-tagged element once here so
   a new one can never be silently inert (user 2026-09-29). */
[data-phase-hide][hidden]{display:none!important}
/* One size for every action here. "Add Speaker"/"Add Exhibitor" carry .btn-sm
   (8px/12.5px) while Configure and Become an Exhibitor use the full .btn
   (12px/14px), so they sat visibly shorter next to each other. Equal min-height
   and padding makes them one row of equal buttons; a longer label makes a button
   WIDER, never taller. */
/* "Visit official event site" stands in the same row, so it takes the same
   shape and height as the buttons beside it (it was a shorter 99px pill). */
.poster-v2-actions .poster-official{margin-top:0;min-height:44px;padding:11px 20px;
  border-radius:10px;font-size:13.5px;font-weight:600;justify-content:center}
@media(max-width:760px){.poster-v2-cd-units span{min-width:46px}.poster-v2-cd-units b{font-size:17px}}
@media(max-width:760px){
  .poster-v2{flex-direction:column-reverse;align-items:stretch;gap:16px;padding:18px}
  .poster-v2-art{flex:none;max-width:none}
  /* Desktop gives .poster-v2-main flex-basis:320px for its WIDTH. Once the poster
     is a column that same basis becomes a minimum HEIGHT, which is the ~120px of
     empty tinted space under the buttons on a phone. Size to content here. */
  .poster-v2-main{flex:none}
}
/* The partner frames the widget in a padded column, so on a phone it can be
   ~280–320px wide — narrower than the phone itself. Three side-by-side CTAs at
   that width shrank into unreadable slivers; stack them full-width instead. */
@media(max-width:380px){
  .poster-v2-actions .btn,.poster-v2-actions .poster-official{flex:1 1 100%;justify-content:center;text-align:center}
  .poster-v2 h1{font-size:25px}
}
.poster::before{content:'';position:absolute;top:-50%;right:-30%;width:300px;height:300px;background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%);pointer-events:none}
.poster .ptag{display:inline-block;background:rgba(255,255,255,.22);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:99px;margin-bottom:14px}
.poster h1{font-size:26px;font-weight:600;line-height:1.15;margin-bottom:10px;color:#fff;position:relative}
.poster .pmeta{font-size:13.5px;line-height:1.6;opacity:.95;position:relative}
.poster .pmeta strong{display:block;font-weight:600}
/* Pill chip on top of the colorful poster gradient — chip stays near-white
   in both themes (the poster background is purple regardless of theme),
   so we force the ink colour dark to keep readable contrast. */
.poster-official{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:rgba(255,255,255,.92);color:#18181B;font-size:13px;font-weight:600;padding:9px 16px;border-radius:99px;text-decoration:none;position:relative;transition:transform .12s,background .12s}
.poster-official:hover{background:#fff;transform:translateY(-1px);text-decoration:none}
.poster .live-pill{background:rgba(255,255,255,.92);color:var(--accent);display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.poster .poster-top-row{position:absolute;top:18px;left:18px;display:flex;gap:6px;align-items:center;z-index:2}
.poster .poster-badge{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:99px;line-height:1.2}

/* FAQ accordion on event detail */
.v2-faq{padding:0;margin-bottom:6px;border-bottom:1px solid var(--rule)}
.v2-faq:last-of-type{border-bottom:none}
.v2-faq summary{font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;padding:10px 0;list-style:none;position:relative;padding-right:22px}
.v2-faq summary::-webkit-details-marker{display:none}
.v2-faq summary::after{content:'+';position:absolute;right:0;top:8px;font-size:18px;color:var(--subtle);font-weight:400;transition:transform .15s}
.v2-faq[open] summary::after{content:'-'}
.v2-faq p{font-size:13px;color:var(--muted);line-height:1.6;padding:0 0 12px}

/* Organiser-profile modal */
.v2-org-modal{position:fixed;inset:0;background:rgba(15,15,14,.55);z-index:var(--ewent-z-modal);display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .18s ease}
.v2-org-card{background:var(--card);width:100%;max-width:380px;border-radius:24px;padding:28px;text-align:center;position:relative;animation:slideUp .25s cubic-bezier(.34,1.56,.64,1)}
.v2-org-x{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--subtle);font-size:22px;cursor:pointer;padding:4px 8px;border-radius:6px;font-family:inherit;line-height:1}
.v2-org-x:hover{color:var(--accent);background:var(--accent-light)}
.v2-org-avatar{width:64px;height:64px;border-radius:50%;background:var(--grad-soft);color:var(--accent);font-size:22px;font-weight:600;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.v2-org-card h3{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:4px}

/* Sprint 3.2 - Who's going avatar stack */
.who-going{transition:border-color .14s}

/* Info cards */
.info-card{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:18px;margin-bottom:12px}
.info-card h3{font-size:15px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.info-card p{font-size:14px;color:var(--muted);line-height:1.6}
.info-card .kv{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:13.5px}
/* Labels use --muted (darker) instead of --subtle - some palettes map --subtle
   to a near-bg colour that's hard to read against the card. Also bump weight + size
   slightly so dt feels deliberate, not faded. */
.info-card .kv dt{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.info-card .kv dd{color:var(--ink);font-weight:500}

/* Description tab: ONE type scale. Everything here is already Figtree — the
   description's own inline "Google Sans" is stripped by the sanitiser — and The
   Details and FAQ used to be 12-13.5px, uppercase or semibold, which read as a
   different font. Scoped to the Description pane so other pages sharing .kv /
   .v2-faq are untouched. Hierarchy is kept by weight and colour.
   SIZE = 14px (user 2026-10-14). Was 13.5px to match announcements /
   exhibitors / agenda; this pane was on a 16px scale with 18px headings and looked
   bigger than every other tab (user 2026-09-30). Headings keep the shared
   .info-card h3 size. */
[data-v2-tab="description"] .v2-evt-desc-text,
[data-v2-tab="description"] .v2-evt-desc-text p,
[data-v2-tab="description"] .v2-evt-desc-text li{font-size:14px;line-height:1.55;color:var(--ink)}
/* Body copy is INK, not --muted: `.info-card p{color:var(--muted)}` caught every <p> in the
   description, so paragraphs came out grey next to near-black lines (slab 2026-10-16). */
[data-v2-tab="description"] .info-card .kv{font-size:14px;line-height:1.55;gap:10px 18px}
[data-v2-tab="description"] .info-card .kv dt{font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
[data-v2-tab="description"] .info-card .kv dd{font-size:14px;font-weight:500;color:var(--ink)}
[data-v2-tab="description"] .v2-faq summary{font-size:14px;line-height:1.55;font-weight:600}
[data-v2-tab="description"] .v2-faq p{font-size:14px;line-height:1.55;color:var(--muted)}

/* Status banners */
.banner{padding:14px 16px;border-radius:14px;margin-bottom:14px;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5}
.banner-icon{font-size:18px;line-height:1;flex-shrink:0;margin-top:1px}
.banner-info{background:var(--secondary-light);color:#15406F}
.banner-warn{background:var(--amber-bg);border:1px solid var(--amber-border);color:var(--amber-text)}
.banner-ok{background:var(--green-bg);border:1px solid var(--green-border);color:#0E5C53}
.banner strong{font-weight:600;display:block;margin-bottom:2px}

/* Checklist items */
.checklist{display:flex;flex-direction:column;gap:8px}
.check-item{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 14px;background:var(--card);border:1px solid var(--rule);border-radius:13px;cursor:pointer;transition:color .14s,background-color .14s,border-color .14s,box-shadow .14s,opacity .14s,transform .14s;-webkit-tap-highlight-color:transparent}
.ci-phase-corner{position:absolute;top:10px;right:12px;z-index:1}
/* Title needs to clear the corner chip so it doesn't wrap underneath. */
.check-item .ci-title{padding-right:64px}

/* Phase section header — separates "Before / During / After" groups
   visually so the user can scan the natural event flow without reading
   every row. Slim underline keeps it as a divider, not a heavy header. */
.cl-section{font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);padding:14px 4px 6px;margin:6px 0 0;border-bottom:1px solid var(--rule)}
.cl-section:first-child{padding-top:0;margin-top:0}
.cl-section[data-phase="prep"]{color:var(--secondary)}
.cl-section[data-phase="live"]{color:var(--accent)}
.cl-section[data-phase="post"]{color:var(--green)}
.check-item:hover{border-color:var(--accent-light);transform:translateY(-1px);box-shadow:var(--sh-sm)}
/* DONE state — same WHITE card as every other row; the ✓ carries the meaning.
   This used to be `background:var(--bg-soft); opacity:.65`, which dimmed the row
   including its TEXT — and since the title is an accent-coloured link, on an
   image-palette event that became pale teal at 65% over a pale teal wash
   (1.6:1 contrast, effectively invisible). Tinting the surface was no better:
   --bg-soft IS the page's own tint on those events, so the row never separated.
   Keep the surface identical, keep the words readable, let the filled circle say
   "done" — which is how the partner's own checklist reads. */
.check-item.done{background:var(--card);opacity:1}
.check-item.done .ci-title,
.check-item.done .ci-sub,
.check-item.done .ci-meta{color:var(--muted)}
.ci-circle{width:24px;height:24px;border:2px solid var(--rule);border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;transition:color .15s,background-color .15s,border-color .15s,box-shadow .15s,opacity .15s,transform .15s;margin-top:1px}
.check-item.done .ci-circle{background:var(--accent);border-color:var(--accent);color:#fff}

/* /v2/dash - organiser dashboard styled like the demo's admin mode */
.v2-dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
@media(max-width:520px){.v2-dash-stats{grid-template-columns:1fr 1fr}}
.v2-ds-tile{background:var(--bg-soft);border:1px solid var(--rule);border-radius:12px;padding:14px 16px}
.v2-ds-tile strong{display:block;font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.v2-ds-tile span{font-size:10.5px;color:var(--subtle);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:4px;display:block}
/* Overall stats (top of /dash): one tint per tile — Events · Total RSVPs ·
   Engagement · At-risk. Per-event tiles (.v2-ae-stats) stay neutral. */
.v2-dash-stats .v2-ds-tile:nth-child(1){background:#eef3ff;border-color:#d6e0fb}
.v2-dash-stats .v2-ds-tile:nth-child(1) strong{color:#2b4c9b}
.v2-dash-stats .v2-ds-tile:nth-child(2){background:#e9f6ee;border-color:#cbe8d6}
.v2-dash-stats .v2-ds-tile:nth-child(2) strong{color:#16734a}
.v2-dash-stats .v2-ds-tile:nth-child(3){background:#f4edfb;border-color:#e2d3f3}
.v2-dash-stats .v2-ds-tile:nth-child(3) strong{color:#8E0F42}
.v2-dash-stats .v2-ds-tile:nth-child(4){background:#fff3e8;border-color:#f7dcc2}
.v2-dash-stats .v2-ds-tile:nth-child(4) strong{color:#b4530f}

.v2-admin-evt{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:0;margin-bottom:12px;overflow:hidden}
/* Collapsed card = title + ⌄ (view/dash.php); the bar opens .v2-ae-more. */
.v2-ae-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 16px;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:inherit}
.v2-ae-bar:hover{background:var(--bg-soft)}
.v2-ae-bar:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.v2-ae-bar .v2-ae-title,.v2-ae-bar .v2-ae-meta,.v2-ae-bar .v2-ae-status{display:block}
.v2-ae-bar .v2-ae-status{margin-top:6px}
/* Where the event was created (view/dash.php): club (managed there) or ewent. */
.v2-ae-src{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 9px;border-radius:99px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.v2-ae-src.club{background:#eef3ff;color:#2b4c9b;border:1px solid #d6e0fb}
.v2-ae-src.ewent{background:#f4edfb;color:#8E0F42;border:1px solid #e2d3f3}
.v2-ae-head{position:relative}
.v2-ae-head .v2-ae-body{padding-right:118px}
.v2-ae-dash{position:absolute;top:50%;right:58px;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:1.5px solid var(--rule);border-radius:10px;background:var(--card);color:var(--ink);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.v2-ae-dash:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:600px){.v2-ae-dash span{display:none}.v2-ae-dash{padding:6px 8px}.v2-ae-head .v2-ae-body{padding-right:46px}}
.v2-ae-chev{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);background:var(--card);display:inline-flex;align-items:center;justify-content:center}
.v2-ae-chev::before{content:'';width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .18s}
.v2-ae-bar[aria-expanded="true"] .v2-ae-chev::before{transform:translateY(2px) rotate(-135deg)}
/* Open card: tinted strip + accent outline, so it stands apart from the closed ones. */
.v2-ae-bar[aria-expanded="true"],.v2-ae-bar[aria-expanded="true"]:hover{background:var(--accent-light)}
.v2-ae-bar[aria-expanded="true"] .v2-ae-chev{border-color:var(--accent)}
.v2-ae-bar[aria-expanded="true"] .v2-ae-chev::before{border-color:var(--accent)}
.v2-admin-evt:has(.v2-ae-bar[aria-expanded="true"]){border-color:var(--accent);box-shadow:0 4px 14px rgba(24,24,27,.08)}
.v2-ae-more{padding:12px 16px 16px;border-top:1px solid var(--rule)}
.v2-ae-more[hidden]{display:none}
.v2-ae-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.v2-ae-emoji{font-size:30px;flex-shrink:0;line-height:1}
.v2-ae-body{flex:1;min-width:0}
.v2-ae-title{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:3px;line-height:1.3}
.v2-ae-meta{font-size:12.5px;color:var(--muted)}
.v2-ae-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
@media(max-width:520px){.v2-ae-stats{grid-template-columns:1fr 1fr}}
.v2-ae-stats .v2-ds-tile{padding:10px 12px}
.v2-ae-stats .v2-ds-tile strong{font-size:17px}
.v2-ae-stats .v2-ds-tile span{font-size:9.5px}
.v2-ae-actions{display:flex;gap:6px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--rule)}
/* RSVPs by date (view/dash.php): the RSVPs tile opens it; a date opens its people */
.v2-rd-tile{font:inherit;text-align:left;cursor:pointer;color:inherit;transition:border-color .14s,background .14s}
.v2-rd-tile:hover,.v2-rd-tile[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-light)}
.v2-rd-tile:focus-visible,.v2-rd-date:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.v2-rd-caret{display:inline-block;width:6px;height:6px;margin-left:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s}
[aria-expanded="true"] .v2-rd-caret{transform:translateY(1px) rotate(-135deg)}
.v2-rd{margin:0 0 12px;border:1px solid var(--rule);border-radius:12px;background:var(--card);overflow:hidden}
.v2-rd-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule);font-size:13px}
.v2-rd-head span{color:var(--muted);font-size:12px}
.v2-rd-row{border-bottom:1px solid var(--rule)}
.v2-rd-line{display:flex;align-items:center;gap:10px;padding:0 0 0 14px}
.v2-rd-line:hover{background:var(--bg-soft)}
.v2-rd-when{flex:1;min-width:0;padding:9px 0;font-size:13px;color:var(--ink);text-decoration:none}
/* The date is a link to that date's event page (new tab) — make it LOOK like one. */
a.v2-rd-when{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px}
a.v2-rd-when em{color:var(--muted);font-weight:400}
a.v2-rd-when:hover{color:var(--accent-dark,var(--accent));text-decoration-color:currentColor}
a.v2-rd-when .v2-rd-open{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--accent-light);font-size:11px;font-weight:600;text-decoration:none;vertical-align:1px}
a.v2-rd-when:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.v2-rd-date{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:9px 14px 9px 4px;border:0;background:none;font:inherit;font-size:13px;text-align:left;color:var(--ink);cursor:pointer}
.v2-rd-date:disabled{cursor:default;color:var(--muted)}
.v2-rd-when em{font-style:normal;color:var(--subtle);font-size:11.5px}
.v2-rd-pill{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap}
.v2-rd-pill.live{background:#e6f4ec;color:#16875a}.v2-rd-pill.up{background:#eef3ff;color:#2b4c9b}.v2-rd-pill.end{background:var(--bg-soft);color:var(--muted)}
.v2-rd-cap{font-size:11.5px;color:var(--subtle);white-space:nowrap}
.v2-rd-n{white-space:nowrap;font-size:12.5px;color:var(--muted)}.v2-rd-n b{color:var(--ink);font-size:14px}
.v2-rd-people{padding:4px 14px 12px;background:var(--bg-soft)}
.v2-rd-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.v2-rd-tbl th{text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--subtle);padding:6px 6px 4px}
.v2-rd-tbl td{padding:6px;border-top:1px solid var(--rule);color:var(--ink);word-break:break-word}
.v2-rd-foot{display:flex;gap:14px;flex-wrap:wrap;padding:9px 14px}
.v2-rd-link{border:0;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer}
.v2-rd-empty{padding:12px 14px;font-size:12.5px;color:var(--muted)}.v2-rd-empty.is-err{color:#b3261e}
@media(max-width:560px){.v2-rd-line{flex-wrap:wrap}.v2-rd-when{flex-basis:100%;padding-bottom:0}.v2-rd-tbl th:nth-child(3),.v2-rd-tbl td:nth-child(3){display:none}}

/* Sprint 3.1 - "Do this right now" hero task card (Duolingo-style next-task) */
/* Hero "next up" card — high contrast: white surface, brand-purple accent rail,
   strong black text. The previous pink-cream gradient washed out on bright
   screens and made the title hard to read. */
.hero-task{background:#FFFFFF;border:1px solid #E8E8EC;border-left:5px solid #8E0F42;border-radius:14px;padding:22px 22px 22px 24px;margin-bottom:14px;box-shadow:0 4px 16px rgba(15,15,14,.06);position:relative}
.hero-task[data-phase="live"]{border-left-color:#BC1558;box-shadow:0 8px 24px rgba(188,21,88,.12)}
.hero-task .ht-eyebrow{display:flex;gap:8px;align-items:center;font-size:11.5px;color:#555F77;font-weight:600;margin-bottom:10px;flex-wrap:wrap}
.hero-task .ht-eyebrow .ht-when{font-size:10.5px;color:#646B78;font-weight:600}
.hero-task .ht-eyebrow .ht-rest{margin-left:auto;font-size:10.5px;color:#646B78;font-weight:600}
.hero-task h2{font-size:22px;font-weight:600;color:#0F0F0E;line-height:1.25;margin-bottom:8px;letter-spacing:-.01em}
.hero-task p{font-size:14.5px;color:#3d3d39;line-height:1.55}
.hero-task .ht-skip{display:block;width:100%;background:none;border:none;color:var(--subtle);font-size:11.5px;font-family:inherit;cursor:pointer;padding:10px 0 0;text-align:center}
.hero-task .ht-skip:hover{color:var(--accent)}
.ht-rest-acc{margin-top:8px}
.ht-rest-acc summary{font-size:13px;color:var(--muted);cursor:pointer;padding:10px 14px;background:var(--bg-soft);border:1px solid var(--rule);border-radius:10px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
.ht-rest-acc summary::-webkit-details-marker{display:none}
.ht-rest-acc summary::after{content:'↓';transition:transform .15s;color:var(--subtle)}
.ht-rest-acc[open] summary::after{transform:rotate(180deg)}
.ht-rest-acc[open] summary{margin-bottom:10px}
.check-item.just-marked{animation:justMarked 2.6s ease-out;border-color:var(--accent)}
@keyframes justMarked{0%{box-shadow:0 0 0 0 rgba(188,21,88,.55);transform:scale(1)}20%{box-shadow:0 0 0 8px rgba(188,21,88,.18);transform:scale(1.015)}60%{box-shadow:0 0 0 14px rgba(188,21,88,0);transform:scale(1)}100%{box-shadow:0 0 0 0 rgba(188,21,88,0)}}
.check-item.just-marked{animation:justMarked 2.6s ease-out;border-color:var(--accent)}
@keyframes justMarked{
  0%   {box-shadow:0 0 0 0 rgba(188,21,88,.55);transform:scale(1)}
  20%  {box-shadow:0 0 0 8px rgba(188,21,88,.18);transform:scale(1.015)}
  60%  {box-shadow:0 0 0 14px rgba(188,21,88,0);transform:scale(1)}
  100% {box-shadow:0 0 0 0 rgba(188,21,88,0)}
}
.ci-body{flex:1;min-width:0}
.ci-title{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:2px}
.ci-sub{font-size:14px;color:var(--ink);line-height:1.55}
.ci-meta{display:flex;gap:8px;margin-top:6px;font-size:14px;color:var(--muted);align-items:center}
/* Phase chip — its OWN row above the title now, so it reads as a clear
   "this step happens BEFORE/DURING/AFTER" eyebrow rather than getting
   buried in the meta line. Bigger padding + slightly bigger font so the
   chip carries its own weight on the page. */
.ci-phase{display:inline-block;padding:3px 10px;border-radius:99px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
/* Phase chips - each phase gets a distinct hue so time-state reads at a glance.
   Audit feedback: all three were too pastel-similar; now blue/pink/green with
   1px borders so they pop on white cards. */
.ci-phase.prep{background:var(--secondary-light);color:#15406F;border:1px solid rgba(37,87,167,.22)}     /* Blue - Before */
.ci-phase.live{background:var(--accent-light);color:var(--accent);border:1px solid rgba(188,21,88,.22)} /* Pink - During */
.ci-phase.post{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}     /* Green - After */

/* RSVP-style CTA card */
.rsvp-card{background:linear-gradient(135deg,#FFFCFD,#FCE8F4);border:1.5px solid var(--accent-light);border-radius:18px;padding:22px;text-align:center;margin-bottom:18px}
.rsvp-card .emoji{font-size:42px;margin-bottom:8px;display:block}
.rsvp-card h2{font-size:20px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.rsvp-card p{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:14px;max-width:340px;margin-left:auto;margin-right:auto}

/* Magic-link form */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.field input[type=text],.field input[type=email]{font-family:inherit;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:11px;padding:12px 14px;width:100%;transition:border-color .14s,box-shadow .14s}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}

/* Live status pill */
.live-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:99px;line-height:1.2}
.live-pill.live{background:var(--accent-light);color:var(--accent)}
/* The pulse ring is the dot's OWN colour (background:inherit), so it follows the
   event palette's accent — it used to be a fixed pink ring round a blue dot. */
.live-pill.live .pulse{position:relative;flex:none;width:6px;height:6px;background:var(--accent);border-radius:50%}
.live-pill.live .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:livePulse 1.2s ease-out infinite}
@keyframes livePulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion: reduce){.live-pill.live .pulse::after{animation:none}}
.live-pill.soon{background:var(--secondary-light);color:var(--secondary)}
.live-pill.upcoming{background:#F2F2F5;color:var(--muted)}
.live-pill.ended{background:var(--bg-soft);color:var(--subtle)}


/* Toast (save confirmation) */
.toast-wrap{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:var(--ewent-z-toast);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:11px 18px;border-radius:99px;font-size:13.5px;font-weight:600;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:8px;animation:toastIn .22s cubic-bezier(.34,1.56,.64,1),toastOut .25s ease 1.6s forwards;max-width:90vw}
.toast .t-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--cyan);color:var(--ink);border-radius:50%;font-size:11px;font-weight:600}
@keyframes toastIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes toastOut{to{transform:translateY(20px);opacity:0}}

/* Dojo coach */
.dojo{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:var(--ewent-z-sheet);width:calc(100% - 32px);max-width:380px;background:var(--card);border:1px solid var(--rule);border-radius:18px;box-shadow:var(--sh-lg);padding:14px 16px 14px 14px;display:flex;gap:12px;align-items:flex-start;animation:dojoIn .32s cubic-bezier(.34,1.56,.64,1)}
@media(min-width:600px){.dojo{left:auto;right:24px;transform:none}}
@keyframes dojoIn{from{transform:translateX(-50%) translateY(110%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
@media(min-width:600px){@keyframes dojoIn{from{transform:translateY(110%);opacity:0}to{transform:translateY(0);opacity:1}}}
.dojo.out{animation:dojoOut .28s ease forwards}
@keyframes dojoOut{to{transform:translateX(-50%) translateY(110%);opacity:0}}
.dojo .d-ava{width:42px;height:42px;background:var(--grad-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;animation:bounce 1.6s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.dojo .d-body{flex:1;min-width:0}
.dojo .d-title{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:2px}
.dojo .d-msg{font-size:12.5px;color:var(--muted);line-height:1.45;margin-bottom:8px}
.dojo .d-actions{display:flex;gap:6px;flex-wrap:wrap}
.dojo .d-btn{font-family:inherit;font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:99px;cursor:pointer;border:1px solid transparent;line-height:1.2;background:var(--ink);color:#fff;text-decoration:none}
.dojo .d-btn.ghost{background:transparent;color:var(--muted);border-color:var(--rule)}
.dojo .d-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--subtle);font-size:18px;cursor:pointer;font-family:inherit;line-height:1;padding:2px 6px;border-radius:6px}

/* Celebration modal */
.modal{position:fixed;inset:0;background:rgba(15,15,14,.55);display:flex;align-items:center;justify-content:center;padding:24px;z-index:var(--ewent-z-modal);animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{background:var(--card);border-radius:24px;padding:32px 26px;max-width:380px;width:100%;text-align:center;box-shadow:var(--sh-lg);animation:pop .25s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.modal-card .emoji-big{font-size:64px;margin-bottom:6px;display:inline-block;animation:wiggle .6s ease}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.modal-card h2{font-size:22px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.modal-card p{font-size:14.5px;color:var(--muted);line-height:1.55;margin-bottom:18px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:170;overflow:hidden}
.confetti span{position:absolute;width:8px;height:14px;top:-20px;animation:fall 2.6s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* Misc */
.back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:14px;cursor:pointer;text-decoration:none}
.back:hover{color:var(--accent);text-decoration:none}
.progress-ring{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--rule);border-radius:13px;padding:12px 16px;margin-bottom:14px}
.progress-ring .ring-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.progress-ring .ring{width:36px;height:36px;border-radius:50%;background:conic-gradient(var(--accent) var(--pct,0%),var(--rule) 0);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.progress-ring .ring::after{content:'';width:26px;height:26px;background:var(--card);border-radius:50%}
.progress-ring .ring-wrap span{position:absolute;font-size:10.5px;font-weight:600;color:var(--ink)}
.progress-ring .pr-text{flex:1;min-width:0;font-size:13px}
.progress-ring .pr-text strong{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.progress-ring .pr-text small{color:var(--muted);font-size:12px}

.foot{text-align:center;font-size:11.5px;color:var(--subtle);padding:18px 0 28px}
.foot a{color:var(--muted)}