/* Deep Field view styles: events. Companion to deep-field.css (tokens/components live there).
   Owned by the events view(s); keep everything token-driven, flat, AA in both themes.

   Covers:
   - #/meetings (.events-page)   — hero band, toolbar, filter row, saved chips,
                                    day-grouped EXPANDING ROWS (owner decision
                                    2026-07-07): collapsed rows stay clean; the
                                    header is a stretched button opening an
                                    inset panel with the gesture switch, Join
                                    meeting link and per-guest table.
   - #/meetings/:id (.event-detail-page) — hero band + flat panels.

   COLOUR RESTRAINT (blocking): controls are Ink/neutral + hairlines. Lime
   appears only on a switched-ON gesture toggle (deep-field.css owns that).
   Status chips/badges are neutral grounds (var(--chip-none-bg) + Ink text)
   with a small dot in the theme-flipping --num-* tokens — never literal
   bright fills on light. The bright .chip fills from deep-field.css are
   overridden below, scoped to these two pages only. */

/* ===== Hero band placement ================================================
   Views render inside #app-root, which sits within .app-main's padding.
   Pull the hero back out to full-bleed; the negative margins must track
   .app-main's padding at every breakpoint (deep-field.css). */
.events-page > .hero,
.event-detail-page > .hero {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-5)) 22px;
}
@media (min-width: 900px) {
  .events-page > .hero,
  .event-detail-page > .hero {
    margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 26px;
  }
}
@media (max-width: 480px) {
  .events-page > .hero,
  .event-detail-page > .hero {
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-3)) 18px;
  }
}

/* Back link inside the hero (detail page) — sits on the constant dark green */
.hero-backlink {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--paper); opacity: 0.85;
  font-weight: 700; font-size: 13px;
  margin-bottom: 16px;
}
.hero-backlink:hover { opacity: 1; text-decoration: underline; }
.hero-backlink:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
.hero-backlink svg { flex: none; }

/* ===== Day headers (owner-directed 2026-07-09): days must stand out =====
   The shared .day-label is a quiet uppercase micro-label (deep-field.css);
   on the Events list the day word becomes a real heading with a hairline
   separating each day. Scoped to this page — the dashboard keeps the quiet
   version. */
.events-page .day-group { margin-top: 26px; }
.events-page .day-label {
  text-transform: none; letter-spacing: -0.01em;
  font-size: 18px; font-weight: 900; color: var(--text);
  padding-top: 18px; border-top: 1px solid var(--border);
  margin-bottom: 12px;
}
.events-page .day-group:first-of-type .day-label { padding-top: 0; border-top: 0; }
.events-page .day-date { font-size: 13px; font-weight: 600; color: var(--ink-62); }

/* ===== Scope row: date-range select + hide-disabled switch =====
   Sits BELOW the search/filter row, left-aligned — mirrors the Guests page's
   .att-scope-row (search first, then a quiet line of controls). */
.events-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  align-items: center;
  margin-bottom: 14px;
}
.select-wrap { position: relative; display: inline-flex; }
.select-wrap > svg {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-62); pointer-events: none;
}
.field-select {
  appearance: none; -webkit-appearance: none;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border-14); border-radius: 12px;
  padding: 10px 38px 10px 14px; font: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer;
}
.field-select:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }

/* ===== Filter row: search input + Save / Reset ===== */
.events-page .events-filter-row { margin-bottom: 12px; }
.events-page .events-filter-input-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.search-wrap { position: relative; flex: 1 1 auto; min-width: 200px; }
.search-wrap > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-62); pointer-events: none;
}
.events-page .search-input {
  width: 100%; background: var(--panel); color: var(--text);
  border: 1px solid var(--border-14); border-radius: 12px;
  padding: 12px 14px 12px 42px; font: inherit; font-weight: 500; font-size: 14px;
}
.events-page .search-input::placeholder { color: var(--ink-62); }
.events-page .search-input:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.events-page .btn-sm {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 16px; border-radius: 12px; font-weight: 700; font-size: 14px;
  border: 1px solid var(--border-14); background: var(--panel); color: var(--text);
  cursor: pointer;
}
.events-page .btn-sm:hover { background: var(--panel-2); }
.events-page .btn-sm:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }

/* Saved filter chips row (chip styles themselves live in deep-field.css) */
.saved-chips-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-40);
  margin-right: 2px; align-self: center;
}

/* Count line above the list */
.events-count { color: var(--ink-62); font-weight: 500; font-size: 13px; margin: 0 0 6px; }
.events-count:empty { display: none; }

/* =========================================================================
   Expanding rows — per-event controls surfaced onto the list rows.
   The card carries BOTH vocabularies (.event-row for Deep Field, .event-card
   for the pre-reskin contract), so neutralise the .event-card conflicts here.
   ========================================================================= */
.events-page .event-row {
  flex-wrap: wrap; align-items: flex-start;
  padding: 15px 16px; gap: 14px;
  cursor: default;
}
/* The card is no longer one big click target (the header button is), so the
   card-wide .event-card hover tint is wrong here. Cue the header instead. */
.events-page .event-row:hover { background: var(--panel); border-color: var(--border); }
.events-page .ev-head:hover .ev-chevron { color: var(--text); }
/* Reference look: a disabled row stays readable; state is carried by the
   neutral flag + chip, not by dimming the whole card. */
.events-page .event-row.is-disabled { opacity: 1; background: var(--panel); }
.events-page .event-row.is-disabled .event-title { color: var(--text); }

/* Quiet the status chips (colour restraint): neutral ground + Ink text,
   colour kept only as a small dot in the theme-flipping --num-* tokens. */
.events-page .chip.funded,
.events-page .chip.claimed,
.events-page .chip.pending { background: var(--chip-none-bg); color: var(--text); }
.events-page .chip.funded .dot  { background: var(--num-green); }
.events-page .chip.claimed .dot { background: var(--num-teal); }
.events-page .chip.pending .dot { background: var(--num-amber); }
.events-page .chip .dot { width: 7px; height: 7px; }

/* Clickable summary head. A transparent button stretches over the summary so
   the whole header toggles, while the title (a real link to the detail page)
   and the chip x buttons sit ABOVE it and keep their own actions. */
.events-page .ev-head { position: relative; }
.events-page .ev-toggle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent;
  cursor: pointer; z-index: 2; border-radius: 12px;
}
.events-page .ev-toggle:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 3px; }
.events-page .event-row-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.events-page .event-title {
  position: relative; z-index: 3;
  flex: 1; min-width: 0;
  color: var(--text); font-weight: 700; font-size: 15px; margin: 0;
  white-space: normal; overflow: visible; text-overflow: clip;
}
.events-page .event-title:hover { text-decoration: underline; }
.events-page .event-title:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; border-radius: 6px; }
.events-page .ev-head-right { display: inline-flex; align-items: center; gap: 12px; flex: none; }
/* The header gesture toggle must float above the stretched .ev-toggle expand
   overlay (z-index 2) to stay clickable; its own handler stops propagation. */
.events-page .ev-head-right .gesture-toggle { position: relative; z-index: 3; }
/* "More detail" + chevron: the visual face of the stretched expand button.
   NOT lifted above the overlay — clicks here fall through and expand. */
.ev-more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--ink-62); flex: none;
}
.events-page .ev-head:hover .ev-more { color: var(--text); }
.ev-chevron { width: 18px; height: 18px; color: var(--ink-40); flex: none; transition: transform 0.2s ease; }
.events-page .event-row.is-open .ev-chevron { transform: rotate(180deg); }
.events-page .event-meta { margin: 0 0 9px; }

/* Guest chips on the collapsed head (avatar initials + admin-only x) */
.events-page .att-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px;
}
.events-page .att-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--inset); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px 3px 3px; font-weight: 600; font-size: 12px; color: var(--text);
  max-width: 100%;
}
.events-page .att-chip.has-x { padding-right: 3px; }
.events-page .att-avatar {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 800; font-size: 9px;
  background: var(--green); color: var(--lime);
}
.events-page .att-chip .attendee-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.events-page .att-x {
  position: relative; z-index: 3; /* stays clickable above the stretched toggle */
  border: 0; background: transparent; color: var(--ink-40);
  font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 50%;
  cursor: pointer;
}
.events-page .att-x:hover { color: var(--text); background: var(--border); }
.events-page .att-x:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 1px; }
.events-page .att-more { align-self: center; color: var(--ink-62); font-weight: 600; font-size: 12px; padding-left: 2px; }

/* Inset controls panel — full card width, hairline top rule, quiet ground. */
.events-page .ev-panel {
  flex-basis: 100%; width: calc(100% + 32px); /* bleed over the card's 16px side padding */
  margin: 0 -16px -15px; padding: 15px 16px;
  background: var(--inset); border-top: 1px solid var(--border);
  border-radius: 0 0 14px 14px;
}
.events-page .ev-panel[hidden] { display: none; }
.ev-controls { display: flex; flex-direction: column; gap: 18px; }

/* Left cluster: "Gesture emails" mini-heading + state line + quiet Join
   meeting link. (The gesture toggle itself lives on the Guests heading row —
   .ev-guests-head — since the 2026-07-09 owner directive.) */
.ev-controls-left { display: flex; flex-direction: column; gap: 12px; flex: none; }
.ev-switch-label { color: var(--text); font-weight: 700; font-size: 14px; }
.ev-switch-state { color: var(--ink-62); font-weight: 500; font-size: 13px; }
.ev-ghost-link {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 9px 14px; border: 1px solid var(--border-14); border-radius: 12px;
  background: var(--panel); color: var(--text); font-weight: 700; font-size: 13px;
}
.ev-ghost-link:hover { background: var(--panel-2); }
.ev-ghost-link:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.ev-ghost-link svg { width: 16px; height: 16px; color: var(--ink-62); flex: none; }

/* Right: per-guest mini-table (name, claim state as dot+word, quiet text actions). */
.ev-guests { flex: 1; min-width: 0; }
/* Heading row: "Guests" title left, gesture toggle button right, one line. */
.ev-guests-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 12px;
}
.ev-guests-head .ev-guests-title { margin: 0; }
/* Gestures off: guests aren't eligible — grey the names (the row keeps its
   full-opacity panel so the toggle itself stays prominent). Deactivated Send
   now buttons take the existing .ev-textbtn:disabled treatment below. */
.events-page .event-row.is-disabled .ev-guest-name { color: var(--ink-40); }
.events-page .event-row.is-disabled .ev-claim { color: var(--ink-40); }
.ev-guests-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-40); margin: 0 0 4px;
}
.ev-guest {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px; padding: 9px 0; border-top: 1px solid var(--border);
}
.ev-guest-name { font-weight: 600; font-size: 13px; color: var(--text); flex: 1 1 44%; min-width: 96px; overflow-wrap: anywhere; }
.ev-claim {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-62); flex: none; width: 84px;
}
.ev-claim .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-40); }
.ev-claim.claimed .dot { background: var(--num-green); }
.ev-claim.pending .dot { background: var(--num-amber); }
.ev-claim.notsent .dot { background: var(--ink-40); }
.ev-actions { display: inline-flex; gap: 2px; flex: none; margin-left: auto; }
.ev-textbtn {
  border: 0; background: transparent; color: var(--ink-62);
  font: inherit; font-weight: 700; font-size: 12px;
  padding: 6px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.ev-textbtn:hover { background: var(--panel-2); color: var(--text); }
.ev-textbtn:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.ev-textbtn:disabled { color: var(--ink-40); cursor: default; background: transparent; }
.ev-textbtn.exclude { color: var(--ink-40); }
.ev-textbtn.exclude:hover { color: var(--text); }
/* Guest-table Actions cell (DEF-045): Send now above the per-guest Gestures
   On / Off / Always Off control (.incl-control, styled in deep-field.attendees.css). */
.ev-actions-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Send now reads as a proper (pill) button here, not a bare text link, so the
   primary row action is obvious. Scoped to the detail page only. */
.ev-actions-col .js-resend-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 7px 18px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.ev-actions-col .js-resend-btn:hover:not(:disabled) { background: var(--inset); border-color: var(--num-teal); color: var(--text); }
.ev-actions-col .js-resend-btn:disabled { opacity: 0.5; background: var(--panel-2); }
.ev-guest-note { font-size: 13px; font-weight: 500; color: var(--ink-62); padding: 8px 0 2px; margin: 0; }

@media (min-width: 760px) {
  .ev-controls { flex-direction: row; align-items: flex-start; gap: 28px; }
  .ev-controls-left { width: 208px; }
  .events-page .ev-guests { border-left: 1px solid var(--border); padding-left: 24px; }
}

/* =========================================================================
   Event detail (#/meetings/:id)
   ========================================================================= */
.event-detail-page { padding-bottom: 32px; }

/* Meta + gesture controls panel */
.event-detail-header { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.event-detail-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px; color: var(--ink-62); font-size: 14px; font-weight: 500;
}
.event-detail-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.event-detail-meta-item svg { color: var(--ink-62); flex: none; }
.event-detail-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 14px;
}

/* Quiet the status badges (colour restraint): neutral ground + Ink text,
   identity kept as a small dot in the theme-flipping --num-* tokens. */
.event-detail-page .badge {
  background: var(--chip-none-bg); color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
}
.event-detail-page .badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-40); flex: none;
}
.event-detail-page .badge-success::before { background: var(--num-green); }
.event-detail-page .badge-warning::before { background: var(--num-amber); }
.event-detail-page .badge-error::before   { background: var(--num-burgundy); }
.event-detail-page .badge-info::before    { background: var(--num-teal); }

/* Gesture impact panel */
.event-detail-impact { margin-bottom: 20px; }
.event-detail-impact-breakdown { padding: 0 18px 16px; }
/* Stacked line: full length = included guests; per-cause segments carry the
   derived accent via .df-seg (--seg), the visible track behind them is the
   not-yet-chosen remainder (same recessive token as the dashboard charts).
   2px gaps between segments read as the panel surface. */
.gi-bar {
  display: flex; gap: 2px; height: 10px;
  border-radius: 999px; background: var(--track-bar);
  overflow: hidden; margin: 2px 0 8px;
}
.gi-bar-seg { display: block; height: 100%; background: var(--seg); min-width: 5px; flex: none; }
.gi-caption { font-size: 12px; font-weight: 500; color: var(--ink-62); margin: 0 0 10px; }
/* Guest-table status bubble for a chosen gesture: the charity's derived
   accent (soft bg + AA text), matching its stacked-bar segment. */
.badge.badge-cause { background: var(--acc-soft); color: var(--acc-num); }
.event-detail-impact-row { padding: 8px 0; border-top: 1px solid var(--border); }
.event-detail-impact-row:first-child { border-top: 0; }
.event-detail-impact-count { margin-left: auto; }

/* Two-column layout. min-width: 0 lets the grid items shrink below their
   content width (the guest table scrolls inside .table-wrap instead of
   blowing the page out sideways on narrow viewports). */
/* Single column so the guest table has room for the per-guest Gestures On /
   Off / Always Off control (DEF-045); the reminder timeline sits below it. */
.event-detail-grid { align-items: start; gap: 16px; grid-template-columns: 1fr; }
.event-detail-grid > .card { min-width: 0; }
.event-detail-table-wrap { border: none; }
.event-detail-timeline-list { padding: 0 4px; }

/* =========================================================================
   Per-guest exclusion scope popup (App.showExcludeGuestScope).
   Reuses App.showModal, so this markup mounts on <body> (NOT under
   .events-page) — selectors here are intentionally unscoped. Flat, neutral
   Ink-on-neutral grounds; the selected option is cued by an Ink border + a
   soft-green tint (no bright fill, no teal-on-teal). AA in both themes:
   titles var(--text), descriptions var(--ink-62) — both on var(--panel) /
   var(--inset) / var(--soft-green) grounds.
   ========================================================================= */
.exclude-intro { margin: 0 0 14px; color: var(--text); font-size: 14px; font-weight: 500; }
.exclude-scope { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.exclude-opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px; border: 1px solid var(--border-14); border-radius: 12px;
  background: var(--panel); cursor: pointer;
}
.exclude-opt:hover { background: var(--panel-2); }
.exclude-opt > input[type="radio"] { flex: none; margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--num-green); cursor: pointer; }
.exclude-opt:has(input:checked) { border-color: var(--num-green); background: var(--soft-green); }
.exclude-opt:has(input:focus-visible) { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.exclude-opt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.exclude-opt-title { color: var(--text); font-weight: 700; font-size: 14px; }
.exclude-opt-desc { color: var(--ink-62); font-weight: 500; font-size: 13px; line-height: 1.5; }