/* Events (events.js): Upcoming (the Submit an event card, My Events, the list), the Calendar, Past Recordings, an
   event's sheet with its flyer and Add to calendar, the form for sending one in, and My Events. The client's light
   look: white cards, navy text, blue accents; each event's date on a light square, the month in red. Only the theme
   tokens from style.css; the pills, headings and sections are library.css's. */
.ev-page { max-width: 640px; margin: 0 auto; padding-bottom: 8px; }
.ev-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ev-title-row > div { min-width: 0; }

/* Admins only: Add event. Dashed, so it reads as a tool, not part of the page. */
.ev-admin-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; padding: 0 14px;
  border: 1.5px dashed var(--clay); border-radius: 999px; background: var(--paper); color: var(--clay-dark);
  font: 600 14px var(--sans); white-space: nowrap; text-decoration: none;
}
.ev-admin-btn:active { transform: translateY(1px); }
.btn.ev-first { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 12px 22px; }

/* ---------- Submit an event: a light blue card; My Events under it ---------- */
.ev-submit {
  display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 16px 10px 16px 16px;
  border-radius: 16px; background: color-mix(in srgb, var(--clay) 13%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--clay) 25%, transparent);
  color: var(--ink); text-decoration: none;
}
.ev-submit-ico {
  flex: 0 0 auto; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px;
  background: var(--clay); color: #fff;
}
.ev-submit-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ev-submit-text b { font: 700 17px/1.3 var(--sans); }
.ev-submit-text small { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.ev-mine-link {
  display: flex; align-items: center; gap: 12px; min-height: 60px; margin-top: 10px; padding: 10px 10px 10px 16px;
  border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
}
.ev-mine-link > svg:first-child { flex: 0 0 auto; color: var(--clay-dark); }
.ev-mine-link > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ev-mine-link b { font: 600 16px/1.3 var(--sans); }
.ev-mine-link small { font-size: 14px; color: var(--ink-2); }
.ev-mine-link > svg:last-child { flex: 0 0 auto; color: var(--ink-2); }

/* ---------- The events: rows in a white card, each with its date on a light square ---------- */
.ev-list { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.ev-row + .ev-row { border-top: 1px solid var(--line); }
.ev-row-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 12px 10px 12px 12px;
  border: 0; background: none; color: var(--ink); text-align: left; text-decoration: none; font: inherit;
}
button.ev-row-btn:active, a.ev-row-btn:active { background: var(--paper-2); }
@media (hover: hover) { button.ev-row-btn:hover, a.ev-row-btn:hover { background: var(--paper-2); } }
.ev-date {
  flex: 0 0 auto; display: grid; justify-items: center; align-content: center; width: 60px; height: 64px;
  border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}
.ev-date b { font: 700 13px/1.1 var(--sans); letter-spacing: 0.06em; color: var(--help); }
.ev-date i { font: 700 27px/1.05 var(--sans); font-style: normal; color: var(--ink); }
.ev-date.past b { color: var(--clay-dark); }
.ev-date.past i { margin-top: 2px; font-size: 20px; }
/* Past Recordings: the album's cover (its own image, or its landscape) where the date would be */
.ev-cover { flex: 0 0 auto; display: block; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.ev-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ev-row-text > b { font: 700 16.5px/1.3 var(--sans); color: var(--ink); }
.ev-row-text > small { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.ev-row-text > em {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  font: 600 13px var(--sans); font-style: normal; color: var(--mint-ink);
}
.ev-row-go { flex: 0 0 auto; display: grid; color: var(--ink-2); }

/* ---------- The Calendar: a month, a dot under the days with events, today circled ---------- */
.cal { padding: 12px 10px 14px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }
.cal-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 6px; }
.cal-head h2 { margin: 0; text-align: center; font: 700 19px/1.2 var(--sans); color: var(--ink); }
.cal-nav {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--clay-dark);
}
.cal-nav:active { background: var(--paper-2); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.cal-dow { padding: 4px 0 6px; text-align: center; font: 600 13px var(--sans); color: var(--ink-2); }
.cal-day {
  position: relative; display: grid; place-items: center; height: 46px; padding: 0;
  border: 0; background: none; color: var(--ink); font: 500 16px var(--sans); font-variant-numeric: tabular-nums;
}
.cal-day > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.cal-day.today > span { box-shadow: inset 0 0 0 2px var(--clay); color: var(--clay-dark); font-weight: 700; }
.cal-day.on > span { background: var(--clay); color: #fff; font-weight: 700; box-shadow: none; }
.cal-day.has::after {
  content: ''; position: absolute; bottom: 1px; left: 50%; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--help);
}
.cal-day:not(.on):active > span { background: var(--paper-2); }
.cal .loading { padding: 12px 0 0; }
.cal-list { margin-top: 18px; }
.cal-list > .hint { margin: 4px 4px 0; text-align: center; }
@media (max-width: 350px) { .cal-day > span { width: 34px; height: 34px; } .cal-day { font-size: 15px; } }

/* ---------- One event: its sheet ---------- */
.ev-detail { display: grid; gap: 12px; padding: 6px 0 4px; }
.ev-detail-flyer {
  position: relative; display: block; width: min(100%, 300px); margin: 0 auto; padding: 0; border: 0; border-radius: 14px;
  overflow: hidden; background: none; box-shadow: 0 10px 26px rgba(11, 31, 59, 0.25); cursor: zoom-in;
}
.ev-detail-flyer img { display: block; width: 100%; height: auto; }
.ev-zoom {
  position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(11, 31, 59, 0.6); color: #fff;
}
.ev-when { margin: 0; font: 700 16px/1.4 var(--sans); color: var(--clay-dark); }
.ev-desc { margin: 0; white-space: pre-line; line-height: 1.55; }
.ev-addr { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 15.5px; color: var(--ink-2); }
.ev-addr svg { flex: 0 0 auto; margin-top: 2px; color: var(--clay-dark); }
.btn.ev-site { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; justify-self: start; padding: 11px 20px; }
.cal-ways { display: grid; gap: 10px; margin-top: 4px; }
.cal-ways .btn + .btn { margin-top: 0; }
.btn.cal-way { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; }
.btn.cal-way:not(.ghost) { border-color: var(--clay); background: var(--clay); color: #fff; }

/* ---------- A flyer, full screen (a tap anywhere, Close, or a swipe down puts it away) ---------- */
/* A dialog.sheet (so the Shell's swipe-down closes it), drawn edge to edge: no handle, no rounded top. */
.ev-full, .sheet.ev-full {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: #0b1424; box-shadow: none; overflow: hidden;
}
.sheet.ev-full::before { display: none; }
.ev-full::backdrop { background: #0b1424; }
.ev-full img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  padding: calc(env(safe-area-inset-top) + 68px) 8px calc(env(safe-area-inset-bottom) + 16px);
  -webkit-user-drag: none; user-select: none;
}
.ev-full-close {
  position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 12px; display: grid; place-items: center;
  width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(248, 244, 233, 0.16); color: #fff;
}

/* ---------- Submit an event: the form ---------- */
.ev-form { display: grid; gap: 16px; padding: 18px 16px 8px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }
.ev-field { display: grid; gap: 6px; min-width: 0; }
.ev-label { font: 600 15.5px/1.3 var(--sans); color: var(--ink); }
.ev-label small { font-weight: 400; color: var(--ink-2); }
.ev-help { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.ev-form :is(input[type=text], input[type=url], input[type=date], input[type=time], select, textarea) {
  display: block; width: 100%; min-height: 50px; margin: 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background-color: var(--paper-2); color: var(--ink);
  font: 16px/1.4 var(--sans); -webkit-appearance: none; appearance: none;
}
/* The time zone: a small arrow on the right, so it reads as a list to pick from. */
.ev-form .ev-field select {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}
.ev-form textarea { min-height: 120px; resize: vertical; }
.ev-form :is(input, select, textarea):focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 22%, transparent); }
.ev-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 340px) { .ev-two { grid-template-columns: 1fr; } }
/* All day: a switch */
.ev-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 600 16px var(--sans); color: var(--ink); cursor: pointer; justify-self: start; }
.ev-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ev-switch-track {
  position: relative; flex: 0 0 auto; width: 52px; height: 32px; border-radius: 999px; background: var(--line-strong);
  transition: background-color 150ms;
}
.ev-switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(11, 31, 59, 0.3); transition: transform 150ms;
}
.ev-switch input:checked + .ev-switch-track { background: var(--clay); }
.ev-switch input:checked + .ev-switch-track::after { transform: translateX(20px); }
.ev-switch input:focus-visible + .ev-switch-track { outline: 2px solid var(--clay); outline-offset: 2px; }
/* The flyer: a preview, Choose a photo, Remove */
.ev-flyer-pick { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 14px; }
.ev-flyer-preview {
  display: grid; place-items: center; width: 96px; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden;
  background: var(--paper-2); border: 1px dashed var(--line-strong); color: var(--ink-2); text-align: center;
}
.ev-flyer-preview > span { display: grid; justify-items: center; gap: 4px; font-size: 12.5px; }
.ev-flyer-preview img { width: 100%; height: 100%; object-fit: cover; }
.ev-flyer-tools { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.btn.ev-file-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0; padding: 11px 18px; cursor: pointer; }
.ev-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.ev-file-btn:focus-within { outline: 2px solid var(--clay); outline-offset: 2px; }
.ev-flyer-tools .link-btn { margin: 0; padding: 10px 0; }
.btn.ev-send { margin-top: 4px; border-color: var(--clay); background: var(--clay); color: #fff; }
.ev-form .error { margin: 0; }
.ev-form .fineprint { margin: 0 0 8px; }

/* ---------- Sent ---------- */
.ev-sent { display: grid; justify-items: center; gap: 10px; padding: 26px 18px 20px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.ev-sent-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--mint); color: var(--mint-ink); }
.ev-sent h2 { margin: 6px 0 0; font: 700 21px/1.3 var(--sans); color: var(--ink); }
.ev-sent p { margin: 0 0 8px; max-width: 420px; color: var(--ink-2); line-height: 1.5; }
.ev-sent .btn { max-width: 320px; }

/* ---------- My Events: each with how it's going ---------- */
.btn.ev-new-btn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; border-color: var(--clay); background: var(--clay); color: #fff; }
.ev-list.mine div.ev-row-btn { cursor: default; }
.ev-status {
  justify-self: start; display: inline-block; margin-top: 4px; padding: 4px 10px; border-radius: 999px;
  font: 700 13px/1.3 var(--sans);
}
.ev-status.wait { background: color-mix(in srgb, var(--gold) 30%, var(--paper)); color: #6b4e0f; }
.ev-status.ok { background: var(--mint); color: var(--mint-ink); }
.ev-status.no { background: color-mix(in srgb, var(--help) 12%, var(--paper)); color: var(--help); }
:root[data-theme="dark"] .ev-status.wait { color: var(--gold); }
.ev-note { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.ev-note b { font-weight: 600; }

/* The three parts all in view on a phone (they scroll sideways only on the narrowest screens) */
.pills.ev-fit .pill-tab { flex: 1 0 auto; justify-content: center; padding: 0 10px; }

/* ---------- Check-ins (round 16): the Check in button, the checked-in cards, the sheet ---------- */
.ev-ci-block { margin: -6px 0 16px; }
.ev-ci-block:empty { display: none; margin: 0; }
.btn.ev-ci-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 48px; margin: 0;
  padding: 0 22px; border-color: var(--clay); background: var(--clay); color: #fff;
}
.btn.ev-ci-btn svg { flex: 0 0 auto; }
.ev-ci-hint { margin: 8px 2px 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.ev-ci-soon { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; font-size: 15px; color: var(--ink-2); }
.ev-ci-soon svg { flex: 0 0 auto; }
/* You're at … / You're in …: a white card with the pin, the words, and Check out */
.ev-ci-card {
  display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 10px 10px 14px;
  border-radius: 16px; background: var(--paper); box-shadow: var(--shadow);
}
.ev-ci-card + .ev-ci-card { margin-top: 10px; }
.ev-ci-ico {
  flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--clay) 14%, var(--paper)); color: var(--clay-dark);
}
.ev-ci-card.here .ev-ci-ico { background: var(--mint); color: var(--mint-ink); }
.ev-ci-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ev-ci-text b { font: 700 16.5px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.ev-ci-text small { font-size: 14px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.btn.ev-ci-out { flex: 0 0 auto; width: auto; min-height: 48px; margin: 0; padding: 0 16px; white-space: nowrap; }
.link-btn.ev-ci-more { margin: 10px auto 0; min-height: 44px; }
.link-btn.ev-inline-link { display: inline; margin: 0; padding: 0; font-size: inherit; }

/* The sheet: a Back arrow before the title on a later step; the two ways in as big rows */
.ev-ci-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ev-ci-head h3 { min-width: 0; overflow-wrap: anywhere; }
.ev-ci-back {
  flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--clay-dark);
}
.ev-ci-back:active { background: var(--paper-2); }
.ev-ci-body { padding-top: 12px; }
.ev-ci-ways { display: grid; gap: 10px; }
.ev-ci-way {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 10px 12px 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); color: var(--ink); text-align: left; font: inherit;
}
.ev-ci-way:active { background: color-mix(in srgb, var(--clay) 12%, var(--paper-2)); }
.ev-ci-way .ev-ci-ico { width: 48px; height: 48px; background: var(--clay); color: #fff; }
.ev-ci-sheet .fineprint { margin: 18px 0 4px; }
/* Which event: a search box, This week · Coming up, compact rows */
.ev-ci-search {
  display: block; width: 100%; min-height: 50px; margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background-color: var(--paper-2); color: var(--ink);
  font: 16px/1.4 var(--sans); -webkit-appearance: none; appearance: none;
}
.ev-ci-search:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 22%, transparent); }
.ev-ci-list { max-height: 52dvh; overflow-y: auto; overscroll-behavior: contain; }
.ev-ci-group { margin: 10px 2px 6px; font: 600 14px/1.3 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.ev-ci-group:first-child { margin-top: 0; }
.ev-ci-events { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--paper-2); overflow: hidden; }
.ev-ci-events li + li { border-top: 1px solid var(--line); }
.ev-ci-ev {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 8px 8px 10px;
  border: 0; background: none; color: var(--ink); text-align: left; font: inherit;
}
.ev-ci-ev:active { background: color-mix(in srgb, var(--clay) 12%, var(--paper-2)); }
.ev-ci-ev .ev-date { width: 50px; height: 52px; background: var(--paper); }
.ev-ci-ev .ev-date i { font-size: 22px; }
.ev-ci-none { margin: 8px 2px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
/* The form: inside the sheet, no card of its own; the picked event as a summary line with Change */
.ev-form.ev-ci-form { padding: 0; background: none; box-shadow: none; }
.ev-ci-sheet .ev-form.ev-ci-form { gap: 14px; }
.ev-ci-sum { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px 8px 12px; border-radius: 16px; background: var(--paper-2); }
.ev-ci-sum .link-btn { flex: 0 0 auto; margin: 0; min-height: 44px; }
.ev-ci-form .ev-help { margin: -4px 2px 0; }
.ev-ci-form .btn.ev-send { margin-top: 0; }

/* ---------- Who's around: faces and a row per event or place ---------- */
.ev-around { margin: 0 0 18px; }
.ev-around .sec-head { min-height: 40px; }
.ev-around-list { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.ev-around-list li + li { border-top: 1px solid var(--line); }
.ev-around-row {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 10px 10px 14px;
  color: var(--ink); text-decoration: none;
}
.ev-around-row:active { background: var(--paper-2); }
@media (hover: hover) { .ev-around-row:hover { background: var(--paper-2); } }
.ev-around-none { margin: 4px 2px; min-height: 40px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
/* Faces side by side, each ringed in white so they read apart */
.ev-faces { flex: 0 0 auto; display: inline-flex; align-items: center; }
.ev-faces > * { box-shadow: 0 0 0 2px var(--paper); }
.ev-faces > * + * { margin-left: -9px; }
.ev-face-ini {
  display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--c, #1f6fb3); color: #fff;
  font-family: var(--sans); font-weight: 700; line-height: 1; letter-spacing: 0.02em; user-select: none; -webkit-user-select: none;
}
.ev-verified { display: inline-grid; place-items: center; margin-left: 4px; vertical-align: -3px; color: var(--clay-dark); }
.ev-verified svg { display: block; }

/* ---------- The people somewhere: an event's Here now, a place's Who's around ---------- */
.ev-here-count { margin: 0 2px 10px; font: 600 15px/1.4 var(--sans); color: var(--ink-2); }
.ev-here-btn:empty { display: none; }
.ev-here .ev-here-btn { margin: 0 0 12px; }
.ev-people { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.ev-people li + li { border-top: 1px solid var(--line); }
.ev-person { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 14px; }
.ev-person-face { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; margin-top: 2px; border-radius: 50%; }
.ev-person-face:focus-visible, .ev-person-name:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 8px; }
.ev-person-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.ev-person-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 28px; color: var(--ink); text-decoration: none; }
.ev-person-name b { font: 700 16.5px/1.3 var(--sans); overflow-wrap: anywhere; }
.ev-person-name small { font-size: 14.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.ev-person-note { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.ev-person-when { font-size: 13.5px; color: var(--ink-2); }
.ev-person-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.btn.ev-person-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 44px; margin: 0;
  padding: 0 16px; font-size: 15px; text-decoration: none; color: var(--ink);
}
.btn.ev-person-btn svg { flex: 0 0 auto; color: var(--clay-dark); }
.btn.ev-person-btn.on { border-color: transparent; background: var(--mint); color: var(--mint-ink); }
.btn.ev-person-btn.on svg { color: var(--mint-ink); }
.ev-signin { border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }

/* ---------- An event's own page: the details in a white card; in the sheet, the row to Who's here ---------- */
.ev-detail-page { padding: 16px 16px 6px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }
.ev-detail-page .fineprint { margin: 6px 0 8px; }
.ev-here-link {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 8px 6px 12px; margin: 0 0 4px;
  border-radius: 14px; background: var(--paper-2); color: var(--ink); text-decoration: none; font: 600 16px/1.3 var(--sans);
}
.ev-here-link > svg:first-child { flex: 0 0 auto; color: var(--clay-dark); }
.ev-here-link > span { flex: 1 1 auto; min-width: 0; }
.ev-here-link > svg:last-child { flex: 0 0 auto; color: var(--ink-2); }
.ev-here-link:active { background: color-mix(in srgb, var(--clay) 12%, var(--paper-2)); }