/*
 * Architectena · groups.css — listing-card scaffold for group surfaces.
 *
 * Independent namespace from offices.css. Today the rules below MIRROR
 * .office-card / .office-cover / .office-description / .office-staff /
 * .office-information by design — groups and offices are paired
 * surfaces on profile / search / listings and should look matched.
 *
 * What changes when this file diverges from offices.css?
 *   Only the group cards. The whole point of the separate namespace
 *   is that a future "make groups feel more conversational, less
 *   corporate" tweak (warmer hover · friendlier typography · etc.)
 *   stays scoped to groups and doesn't ripple into offices.
 *
 * Used by: groups/groups.html · users/profile.html (groups tab) ·
 * any future surface that lists groups.
 *
 * One-app-one-CSS-file rule (ARCH-BOOK §11): linked at the top of
 * {% block content %} on every template that renders these classes.
 */


/* ──────────────────────────────────────────────────────────────────
 * 1 · Listing card + cover
 * ────────────────────────────────────────────────────────────────── */
.group-card{
  position:relative;
  background:linear-gradient(0deg,rgba(255,199,60,.06) 0%,var(--bg-card) 65%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:0;margin-bottom:0;
  overflow:hidden;
  /* Project card-height standard. Same value as .post-card /
   * .project-card / .office-card so every grid row aligns regardless
   * of which type populates it. Written explicitly here (not via a
   * shared variable) so the group card height can diverge from the
   * others later without reaching across files. */
  height:480px;width:100%;
  display:flex;flex-direction:column;
  transition:background .2s,transform .3s,box-shadow .2s,border-color .2s;
  box-shadow:var(--shadow-sm);
}
.group-card:hover{
  background:linear-gradient(0deg,rgba(255,199,60,.12) 0%,var(--bg-surface) 65%);
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(0,0,0,.32),0 0 0 1px rgba(205,161,44,.20);
  border-color:rgba(205,161,44,.30);
}
.group-cover{
  /* Apps-Cards audit + user feedback: 21:9 left a tall empty band
   * inside the 480-px card. Solution — let the cover STRETCH to
   * absorb whatever the body doesn't use via flex:1. Body internals
   * are line-clamped + min-heighted, so body height is stable across
   * cards → the cover ends up at the same height on every card too,
   * just driven by "card height minus body content" rather than a
   * fixed aspect-ratio. Visual rhythm stays distinct from office
   * cards (16:9 short bar) — group cards now sport a large near-
   * square cover that gives the conversation silhouette real room. */
  position:relative;width:100%;
  background:var(--bg-surface);overflow:hidden;
  flex:1 1 auto;min-height:160px;
}
.group-cover a{display:block;width:100%;height:100%}
.group-cover img{width:100%;height:100%;border-radius:0;object-fit:cover;display:block;transition:transform .5s var(--ease);max-height:none}
.group-card:hover .group-cover img{transform:scale(1.04)}
.group-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to top,rgba(0,0,0,.30),transparent);pointer-events:none;z-index:1}
.group-cover-gradient{
  position:relative;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);font-weight:700;font-size:42px;
  letter-spacing:.04em;text-shadow:0 2px 8px rgba(0,0,0,.35);
}
/* Faint 💬 silhouette behind the placeholder gradient — visual
 * signature that says "this is a conversation surface" without
 * fighting the gradient's first-letter typography. Only shows when
 * there's no cover image (i.e. the gradient placeholder is used). */
.group-cover-gradient::before{
  content:"\1F4AC";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(120px,40%,200px);line-height:1;
  opacity:.10;
  pointer-events:none;
  z-index:0;
}
.group-cover-gradient > *{position:relative;z-index:1}
/* On the listing card the gradient is rendered via .group-cover-fallback
 * (a <span> with the inline background-image style). Apply the same
 * silhouette there for consistency. */
.group-cover-fallback{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:rgba(255,255,255,.85);font-weight:700;font-size:42px;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.group-cover-fallback::before{
  content:"\1F4AC";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(120px,40%,200px);line-height:1;
  opacity:.10;
  pointer-events:none;
}
.group-cover-fallback > *{position:relative;z-index:1}

/* Bell badge in the cover top-right corner — counterpart to the
 * .ov-card-verified mark on office cards. Sits above the cover's
 * fade overlay (z-index:2) so the count stays legible. */
.group-card-bell{
  position:absolute;top:8px;inset-inline-end:8px;
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:99px;
  background:rgba(0,0,0,.55);color:#fff;
  font-size:var(--fs-xs);font-weight:600;
  backdrop-filter:blur(4px);
  z-index:2;
}
.group-card-bell i{font-size:var(--fs-2xs)}

/* Admin mark — top-LEFT cover overlay, deliberate mirror of
 * .group-card-bell (top-right). Renders only when the viewer is the
 * group's admin. Icon-only (no "Admin" label) — the crown reads on
 * its own and keeps the chip footprint as small as the bell. */
.group-card-admin-mark{
  position:absolute;top:8px;inset-inline-start:8px;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:99px;
  background:rgba(0,0,0,.55);color:var(--accent-surface);
  backdrop-filter:blur(4px);
  z-index:2;
  /* Slight gold ring so the crown reads as a distinction marker
   * rather than another translucent pill. */
  box-shadow:inset 0 0 0 1px rgba(205,161,44,.45);
}
.group-card-admin-mark i{font-size:var(--fs-xs)}

.group-description{
  padding:14px 18px 4px;text-align:start;
  /* Rule 0 — lock description-block height so the flex:1 cover above
   * absorbs the same number of pixels on every card. ~110 px fits
   * the h3 + (optional) admin line + 2-line description. When the
   * admin line is hidden (you ARE the admin), the spare ~17 px stays
   * in the block — the cover above doesn't claw it back. */
  min-height:110px;
  flex-shrink:0;
}
.group-description h3{
  color:var(--text-primary);font-size:var(--fs-lg);font-weight:600;line-height:1.4;margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.group-description a{text-decoration:none}
.group-description .muted{
  font-size:var(--fs-xs);color:var(--text-muted)!important;
  /* Tight against the description below — !important beats Bootstrap's
   * .mb-2 utility (also !important) by specificity. The user wanted
   * the admin row to sit directly on top of the description text
   * with no visible gap. */
  margin-bottom:0!important;
  /* Single-line discipline. Long usernames used to wrap onto two lines
   * ("Admin:" on line 1, name on line 2), which broke the row's visual
   * rhythm and inflated the description block's height. nowrap +
   * ellipsis keeps it to one line and truncates if it overflows the
   * column width. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.group-description p:not(.muted){
  font-size:var(--fs-sm);color:var(--text-muted);line-height:1.55;margin:0 0 4px;
  max-height:none;min-height:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.group-description p::-webkit-scrollbar{display:none}

.group-members{padding:0 18px 8px;display:flex;align-items:center;gap:0;min-height:36px}
/* The avatar links are the flex items, not the imgs. Without flex-shrink:0
 * on the <a>, a tight row squeezes the link below 30px; the global
 * img{max-width:100%} then caps the avatar's width under its fixed 30px
 * height, deforming the circle into a vertical oval. Pin the link AND
 * override the global cap so the avatar is always a true 30px circle. */
.group-members a{flex-shrink:0;display:inline-flex}
.group-members img{
  border-radius:50%;margin:0 -6px 0 0;width:30px;height:30px;
  max-width:none;
  object-fit:cover;border:2px solid var(--bg-card);
  display:inline-block;transition:transform .15s var(--ease);
  flex-shrink:0;
}
.group-members a:hover img{transform:translateY(-1px) scale(1.05);z-index:2;position:relative}
/* Scope to the count only — when this hit `> span` it also landed on the
 * placeholder dots, spacing them 14px apart instead of overlapping (which
 * inflated the row and shoved the count against the card's right edge). */
.group-members > .group-card-member-count{font-size:var(--fs-xs);color:var(--text-muted);margin-inline-start:14px!important}

/* Placeholder face-dot — empty circle filling unused slots in the
 * 6-slot members row so the row's width never shrinks. Same diameter
 * and overlap as the avatars so the geometry is identical regardless
 * of how many members the group actually has. */
.group-members-ph{
  width:30px;height:30px;border-radius:50%;
  margin:0 -6px 0 0;flex-shrink:0;
  background:rgba(255,255,255,.04);
  border:2px dashed var(--border);
  display:inline-block;
}
/* Narrow phones: the 6 rigid slots + count can outrun the card width and
 * clip the (now nowrap) count. Drop empty placeholder slots past the 4th so
 * the count always has room. Only .group-members-ph is targeted, so real
 * avatars in those positions are never hidden. */
@media(max-width:480px){
  .group-members-ph:nth-child(n+5){display:none}
}

.group-information{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  padding:8px 18px 14px;border-top:1px solid var(--border);
  margin-top:auto;
}
.group-information i{margin-inline-end:5px;color:var(--text-muted);font-size:var(--fs-xs)}
.group-information span{margin-right:0;color:var(--text-muted);font-size:var(--fs-xs);display:inline-flex;align-items:center;gap:5px}
.group-information span.group-card-unread{
  color:var(--accent);font-weight:700;
  background:rgba(205,161,44,.12);border:1px solid rgba(205,161,44,.32);
  padding:2px 8px;border-radius:99px;
}
.group-information span.group-card-unread i{color:var(--accent);font-size:7px}


/* ──────────────────────────────────────────────────────────────────
 * 2 · Cover-fallback primitive (group-dedicated)
 *
 * Was once a site-wide shared `.entity-cover-fallback`; split per
 * the "no shared classes" principle so a future tweak to the group
 * fallback (different palette · different typography) doesn't bleed
 * into job covers, project covers, or anywhere else. Background is
 * always set inline via the model's cover_gradient_css. Size
 * modifiers cover the three contexts groups actually use:
 *   default — fills its parent (e.g. .group-cover at 16/9 aspect)
 *   --xs    — 24x24 round avatar, used in profile about-tab
 *   --lg    — 72x72 hero block, used in view_group's data header
 *
 * Used by: groups/groups.html · groups/view_group.html ·
 *          users/profile.html (about-tab + groups tab)
 * ────────────────────────────────────────────────────────────────── */
.group-cover-fallback{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  color:rgba(255,255,255,.88);font-family:'Poppins',system-ui,sans-serif;
  font-weight:700;letter-spacing:.04em;font-size:42px;line-height:1;
  text-shadow:0 4px 16px rgba(0,0,0,.35);
  border-radius:inherit;
}
.group-cover-fallback--xs{
  width:24px;height:24px;font-size:var(--fs-sm);border-radius:50%;
}
.group-cover-fallback--lg{
  width:120px;height:120px;font-size:48px;border-radius:14px;
}
/* view_group's data header sizes the --lg variant down to 72x72 to
 * match the rest of the data row's vertical rhythm. Was an unscoped
 * `.entity-cover-fallback.entity-cover-fallback--lg` rule in style.css;
 * scoped here under the group context so the override is local. */
.group-p-data-image .group-cover-fallback--lg{
  width:72px;height:72px;flex:0 0 72px;
}


/* ──────────────────────────────────────────────────────────────────
 * 3 · Step 53 — Group tag chips (listing card + discover card)
 * ────────────────────────────────────────────────────────────────── */
.group-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.group-card-tag{display:inline-flex;align-items:center;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:rgba(205,161,44,.10);border:1px solid rgba(205,161,44,.22);color:var(--accent)}

/* ──────────────────────────────────────────────────────────────────
 * 4 · Step 52 — Group Discover page (.gd-* / .gdc-*)
 * ────────────────────────────────────────────────────────────────── */

/* Hero stat chip — mirrors .team-hero-featured from offices */
.gd-hero-stat{display:flex;align-items:center;gap:14px;padding:14px 18px;background:rgba(205,161,44,.08);border:1px solid rgba(205,161,44,.36);border-radius:14px;color:#e8eaf0;min-width:160px}
.gd-hero-stat .icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#171b27;color:#ffd35e;font-size:var(--fs-xl);border:2px solid rgba(205,161,44,.5);flex-shrink:0}
.gd-hero-stat .text{display:flex;flex-direction:column;gap:2px}
.gd-hero-stat .eb{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#ffd35e;font-weight:800}
.gd-hero-stat .nm{font-size:1.5rem;font-weight:800;color:#ffd35e;line-height:1}

/* Filter bar */
.gd-filters{margin-bottom:24px}
.gd-filter-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.gd-filter-group{display:flex;flex-direction:column;gap:4px;min-width:140px}
.gd-filter-label{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.gd-filter-select,.gd-filter-input{padding:7px 10px;border-radius:7px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:.84rem;font-family:inherit;transition:border-color .15s;min-width:140px}
.gd-filter-select:focus,.gd-filter-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(205,161,44,.18)}
.gd-filter-apply{align-self:flex-end;font-size:.82rem;padding:7px 14px}
.gd-filter-clear{align-self:flex-end;font-size:.78rem;color:var(--text-muted);text-decoration:none;padding:7px 0}
.gd-filter-clear:hover{color:var(--accent)}

/* Discover grid — 4 cols at xl, 3 at lg, 2 at md, 1 at sm */
.gd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:32px}

/* Discover card */
.gdc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s,box-shadow .15s}
.gdc-card:hover{border-color:rgba(205,161,44,.35);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.28)}

/* Cover */
.gdc-cover-link{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-surface);text-decoration:none}
.gdc-cover{width:100%;height:100%;background-size:cover;background-position:center;transition:transform .4s}
.gdc-card:hover .gdc-cover{transform:scale(1.04)}
.gdc-cover--gradient{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.88);font-weight:800;font-size:28px;letter-spacing:.04em;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.gdc-private-badge{position:absolute;bottom:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:5px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#e8eaf0;font-size:.68rem;font-weight:700}

/* Body */
.gdc-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.gdc-name{font-size:.95rem;font-weight:800;color:var(--text-primary);text-decoration:none;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.gdc-name:hover{color:var(--accent)}
.gdc-topic{font-size:.68rem;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);padding:2px 7px;background:rgba(205,161,44,.10);border:1px solid rgba(205,161,44,.25);border-radius:4px;align-self:flex-start}
.gdc-desc{font-size:.8rem;color:var(--text-muted);margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Meta row */
.gdc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:.75rem;color:var(--text-muted);margin-top:auto}
.gdc-meta i{font-size:.7rem}
.gdc-meta-muted{color:var(--text-muted);font-style:italic}
.gdc-active-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:4px;background:rgba(22,163,74,.12);color:#16a34a;border:1px solid rgba(22,163,74,.25);font-size:.7rem;font-weight:700}
.gdc-active-pill i{font-size:.65rem}
.gdc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.gdc-tag{display:inline-flex;align-items:center;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:rgba(205,161,44,.10);border:1px solid rgba(205,161,44,.22);color:var(--accent);text-decoration:none;transition:background .12s,border-color .12s}
.gdc-tag:hover{background:rgba(205,161,44,.20);border-color:rgba(205,161,44,.42);color:#ffd35e}

/* CTA */
.gdc-cta{padding-top:10px;border-top:1px solid var(--border);margin-top:4px}
.gdc-cta-btn{width:100%;justify-content:center;font-size:.82rem;padding:7px 14px}

/* ── Step 56 — Welcome banner ───────────────────────────────────────── */
.group-welcome-banner{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:10px;margin-bottom:12px;
  background:linear-gradient(135deg,rgba(205,161,44,.12) 0%,rgba(205,161,44,.06) 100%);
  border:1px solid rgba(205,161,44,.30);
  position:relative;
}
.group-welcome-icon{color:var(--accent);font-size:1.15rem;flex-shrink:0;margin-top:2px}
.group-welcome-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.group-welcome-title{font-size:.82rem;font-weight:800;color:var(--accent)}
.group-welcome-text{font-size:.81rem;color:var(--text-primary);line-height:1.5}
.group-welcome-dismiss{
  all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:6px;color:var(--text-muted);flex-shrink:0;
  transition:background .12s,color .12s;
}
.group-welcome-dismiss:hover{background:rgba(239,68,68,.12);color:#ef4444}

/* ── Step 54 — Group poll widget ───────────────────────────────────── */
.group-poll{
  margin:6px 0 4px;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:var(--bg-surface);
  max-width:340px;
}
.group-poll-q{
  padding:10px 14px 8px;
  font-size:.85rem;
  font-weight:700;
  color:var(--text-primary);
  line-height:1.35;
  border-bottom:1px solid var(--border);
}
.group-poll-q i{color:var(--accent);margin-inline-end:5px}
.group-poll-opt{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-bottom:1px solid var(--border);
}
.group-poll-opt:last-of-type{border-bottom:none}
.group-poll-vote-btn{
  all:unset;
  cursor:pointer;
  font-size:.8rem;
  color:var(--text-primary);
  line-height:1.3;
  padding:3px 0;
  width:100%;
  display:flex;
  align-items:center;
  gap:6px;
}
.group-poll-vote-btn:hover{color:var(--accent)}
.group-poll-vote-btn:disabled{cursor:default;opacity:.65}
.group-poll-check{color:var(--accent);font-size:.75rem;flex-shrink:0}
.is-voted .group-poll-vote-btn{font-weight:700;color:var(--accent)}
.group-poll-bar-track{
  height:6px;
  width:80px;
  border-radius:3px;
  background:var(--border);
  overflow:hidden;
  flex-shrink:0;
}
.group-poll-bar-fill{
  height:100%;
  background:var(--accent-surface);
  border-radius:3px;
  transition:width .3s ease;
}
.group-poll-opt-count{
  font-size:.72rem;
  color:var(--text-muted);
  white-space:nowrap;
  min-width:24px;
  text-align:right;
}
.group-poll-footer{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  font-size:.72rem;
  color:var(--text-muted);
  background:var(--bg-hover);
  flex-wrap:wrap;
}
.group-poll-closed{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:1px 6px;
  border-radius:4px;
  background:rgba(239,68,68,.12);
  color:#ef4444;
  font-weight:700;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.group-poll-close-btn{
  all:unset;
  cursor:pointer;
  color:var(--text-muted);
  font-size:.7rem;
  text-decoration:underline;
}
.group-poll-close-btn:hover{color:var(--danger)}

/* Poll compose panel */
.poll-create-panel{
  padding:14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg-surface);
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.poll-q-input,.poll-opt-input{
  width:100%;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--bg-input,var(--bg-surface));
  color:var(--text-primary);
  font-size:.82rem;
  box-sizing:border-box;
}
.poll-q-input:focus,.poll-opt-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(205,161,44,.18);
}
.poll-options-wrap{display:flex;flex-direction:column;gap:6px}
.poll-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:.78rem;color:var(--text-muted)}
.poll-closes-input{
  padding:3px 7px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg-surface);
  color:var(--text-primary);
  font-size:.78rem;
  color-scheme:dark;
}
[data-theme="light"] .poll-closes-input{color-scheme:light}
.poll-create-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── Step 55 — Group events ─────────────────────────────────────────── */
.ge-section{margin-bottom:36px}
.ge-section-head{
  font-size:.78rem;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:14px;display:flex;align-items:center;gap:6px;
}
.ge-section-head--muted{opacity:.7}

/* Create panel */
.ge-create-panel{margin-bottom:28px}
.ge-create-card{
  background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:22px 24px;
}
.ge-create-title{font-size:1rem;font-weight:800;margin:0 0 16px;color:var(--text-primary)}
.ge-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ge-form-full{grid-column:1/-1}
.ge-form-field{display:flex;flex-direction:column;gap:4px}
.ge-form-label{font-size:.75rem;font-weight:700;color:var(--text-muted)}
.ge-form-input,.ge-form-select{
  padding:8px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--bg-input,var(--bg-surface));color:var(--text-primary);
  font-size:.82rem;width:100%;box-sizing:border-box;
}
.ge-form-input:focus,.ge-form-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(205,161,44,.18)}
textarea.ge-form-input{resize:vertical;min-height:72px}
.ge-form-input[type="datetime-local"]{color-scheme:dark}
[data-theme="light"] .ge-form-input[type="datetime-local"]{color-scheme:light}
.ge-form-actions{display:flex;gap:10px;margin-top:14px}
@media(max-width:576px){.ge-form-grid{grid-template-columns:1fr}}

/* Event grid + card */
.ge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.ge-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:12px;
  padding:18px 20px;display:flex;flex-direction:column;gap:10px;
  transition:box-shadow .15s,border-color .15s;
}
.ge-card:hover{box-shadow:0 4px 18px rgba(0,0,0,.12);border-color:var(--accent-muted,var(--border))}
.ge-card--past{opacity:.72}
.ge-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* .ge-type-* badges removed in FR-4 W10 — 0 template/JS uses (dead). */
.ge-card-title{font-size:.95rem;font-weight:800;color:var(--text-primary);margin:0;line-height:1.3}
.ge-card-desc{font-size:.78rem;color:var(--text-muted);margin:0;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ge-card-meta{display:flex;flex-direction:column;gap:4px;font-size:.76rem;color:var(--text-muted)}
.ge-card-meta span{display:flex;align-items:center;gap:5px}
.ge-card-meta i{font-size:.7rem;flex-shrink:0}
.ge-location-link{color:var(--accent);text-decoration:none}
.ge-location-link:hover{text-decoration:underline}

/* RSVP row */
.ge-rsvp-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.ge-rsvp-form{display:contents}
.ge-rsvp-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--bg-surface);color:var(--text-muted);cursor:pointer;
  font-size:.74rem;font-weight:600;transition:background .12s,border-color .12s,color .12s;
  white-space:nowrap;
}
.ge-rsvp-btn:hover{border-color:var(--accent);color:var(--accent)}
.ge-rsvp-btn.is-active{background:rgba(205,161,44,.12);border-color:var(--accent);color:var(--accent);font-weight:800}
.ge-rsvp-yes.is-active{background:rgba(22,163,74,.10);border-color:#16a34a;color:#16a34a}
.ge-rsvp-maybe.is-active{background:rgba(245,158,11,.10);border-color:#f59e0b;color:#d97706}
.ge-rsvp-no.is-active{background:rgba(239,68,68,.10);border-color:#ef4444;color:#ef4444}
.ge-rsvp-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:currentColor;color:#fff;font-size:.6rem;font-weight:800;opacity:.85;
}
/* .ge-ics-btn → look from .arch-icon-btn --sm (FR-4 Wave 2); slim to positioning. */
.ge-ics-btn{margin-left:auto}

/* Delete button (mod only) */
.ge-delete-form{display:inline}
/* .ge-delete-btn → look from .arch-icon-btn --xs --danger (FR-4 Wave 2); class kept as a JS hook (events.html:264). */

/* Past attended chip */
.ge-past-attended{font-size:.74rem;color:var(--text-muted);display:flex;align-items:center;gap:5px}

/* Empty state */
.ge-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:48px 24px;border:1px dashed var(--border);border-radius:12px;
  color:var(--text-muted);text-align:center;
}
.ge-empty i{font-size:2rem;opacity:.35}
.ge-empty p{font-size:.85rem;margin:0}

/* ── Step 57 — Active-member badge ──────────────────────────────────── */
.active-member-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.65rem;line-height:1;padding:1px 4px;border-radius:4px;
  background:rgba(234,179,8,.15);color:#ca8a04;border:1px solid rgba(234,179,8,.35);
  margin-left:3px;vertical-align:middle;cursor:default;user-select:none;
  transition:background .15s,color .15s;
}
/* Slightly larger when shown inline in the chat name row */
.name .active-member-badge{font-size:.7rem;padding:1px 5px}
/* Subtle ring on the avatar when the sender is an active member */
.avatar.avatar--active>a>img{
  outline:2px solid rgba(234,179,8,.55);outline-offset:1px;border-radius:50%;
}

/* ── Rejection cooldown notice in the group sidebar ─────────────────── */
.group-join-cooldown{
  border:1px solid rgba(239,68,68,.3);border-radius:10px;
  background:rgba(239,68,68,.06);padding:10px 12px;
}
.group-join-cooldown-msg{
  margin:0 0 3px;font-size:.78rem;font-weight:600;
  color:var(--danger,#ef4444);display:flex;align-items:center;gap:6px;
}
.group-join-cooldown-date{
  margin:0;font-size:.74rem;color:var(--text-muted);
}


/* ── Message hover-action toolbar ──────────────────────────────────── */
/* Remove global overflow:hidden so the frosted pill can float above
   the bubble edge without being clipped */
.group-p-chat-box .chat-body .answer{overflow:visible}
/* Lift the hovered row so the pill and downward popover draw above adjacent bubbles */
.group-p-chat-box .chat-body .answer:hover{z-index:20;position:relative}

/* ── The pill ─────────────────────────────────────────────────────── */
.msg-hover-toolbar{
  position:absolute;
  top:-18px;          /* overlaps the bubble top edge slightly */
  display:flex;
  align-items:center;
  padding:3px 5px;
  gap:0;
  /* frosted glass — dark mode */
  background:rgba(22,22,30,.72);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.40),0 1px 3px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  /* hide: delay 200ms so mouse can travel from bubble to pill */
  transition:opacity .14s .20s, transform .14s .20s;
  transform:translateY(3px);
  z-index:20;
  white-space:nowrap;
}

/* Left bubble → pill at top-right corner, away from left avatar */
.answer.left .msg-hover-toolbar{inset-inline-end:0}
/* Right/own bubble → pill at top-left corner, away from right avatar */
.answer.right .msg-hover-toolbar{inset-inline-start:0;inset-inline-end:auto}

/* Show: instant — no delay on appear.
   Four triggers: bubble hover · pill hover · dropdown open · emoji picker open */
.answer:hover .msg-hover-toolbar,
.msg-hover-toolbar:hover,
.msg-hover-toolbar:has(.dropdown.show),
.msg-hover-toolbar.has-popover{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .12s, transform .12s;  /* snappy appear, delayed hide */
}

/* ── Shared button style (msg-tb-btn) ─────────────────────────────── */
.msg-tb-btn{
  background:transparent;
  border:0;
  color:rgba(255,255,255,.60);
  padding:5px 9px;
  border-radius:7px;
  cursor:pointer;
  font-size:var(--fs-sm);
  line-height:1;
  transition:background .1s,color .1s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.msg-tb-btn:hover{
  background:rgba(255,255,255,.10);
  color:#fff;
}

/* Override global absolute-positioning on these buttons so they
   participate in the flex row as normal children */
.msg-hover-toolbar .msg-reply-btn,
.msg-hover-toolbar .msg-thread-btn,
.msg-hover-toolbar .msg-react-add{
  position:static !important;
  top:auto !important;
  inset-inline-end:auto !important;
  opacity:1 !important;
  /* sizing from .msg-tb-btn above */
  width:auto;
  height:auto;
  border-radius:7px;
  border-style:solid;  /* keep border-style for dashed reset on react-add */
}
/* react-add was dashed circle — flatten to match pill style */
.msg-hover-toolbar .msg-react-add{
  border:0 !important;
}

/* Kebab: static flex item, left divider via border */
.msg-hover-toolbar .msg-admin-kebab{
  position:static !important;
  top:auto !important;
  inset-inline-end:auto !important;
  opacity:1 !important;
  display:inline-flex;
  align-items:center;
  border-inline-start:1px solid rgba(255,255,255,.12);
  margin-inline-start:4px;
  padding-inline-start:2px;
}
.msg-hover-toolbar .msg-admin-kebab:first-child{
  border-inline-start:0;
  margin-inline-start:0;
  padding-inline-start:0;
}
.msg-hover-toolbar .msg-admin-kebab-btn{
  padding:5px 8px;
  line-height:1;
  font-size:var(--fs-sm);
}


/* ── Light theme ──────────────────────────────────────────────────── */
[data-theme="light"] .msg-hover-toolbar{
  background:rgba(248,248,250,.82);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 24px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.08);
}
[data-theme="light"] .msg-tb-btn{color:rgba(0,0,0,.50)}
[data-theme="light"] .msg-tb-btn:hover{background:rgba(0,0,0,.07);color:rgba(0,0,0,.85)}
[data-theme="light"] .msg-hover-toolbar .msg-admin-kebab{
  border-inline-start-color:rgba(0,0,0,.10);
}

/* ── System messages (leave notices, etc.) ─────────────────────────── */
.chat-system-msg{
  clear:both;display:block;
  text-align:center;padding:10px 16px;
  user-select:none;
}
.chat-system-msg span{
  display:inline-block;
  background:rgba(205,161,44,.13);
  border:1px solid rgba(205,161,44,.35);
  color:var(--accent,#cda12c);
  border-radius:99px;padding:3px 14px;
  font-size:.78rem;font-style:italic;
}

/* ── Chat mini-hero — full-width bar above the scroll area ─────── */
.group-p-chat-box .chat-mini-hero{
  flex-shrink:0;
  position:relative;
  padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(22,30,44,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(205,161,44,.20);
  border-radius:13px 13px 0 0;
  z-index:10;
}
[data-theme="light"] .group-p-chat-box .chat-mini-hero{
  background:rgba(255,255,255,.88);
  border-bottom-color:rgba(184,134,42,.22);
}
.chat-mini-hero-avatars{display:flex;align-items:center;padding-inline-end:8px}
.chat-mini-hero-avatar-wrap{
  display:inline-block;margin-inline-end:-14px;line-height:0;border-radius:50%;
  position:relative;z-index:1;
  transition:transform .15s,z-index 0s;
}
.chat-mini-hero-avatar-wrap:last-child{margin-inline-end:0}
.chat-mini-hero-avatar-wrap:hover{transform:translateY(-5px);z-index:10}
.chat-mini-hero-avatar{
  width:54px;height:54px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid rgba(22,30,44,.92);
  position:relative;z-index:1;
}
[data-theme="light"] .chat-mini-hero-avatar{border-color:rgba(255,255,255,.88)}
.chat-mini-hero-badge{
  position:absolute;bottom:1px;right:1px;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:7.5px;border:1.5px solid rgba(22,30,44,.92);
  pointer-events:none;
  z-index:2;
}
[data-theme="light"] .chat-mini-hero-badge{border-color:rgba(255,255,255,.88)}
.chat-mini-hero-badge-crown .chat-mini-hero-badge{background:#b45309;color:#fde68a}
.chat-mini-hero-badge-star   .chat-mini-hero-badge{background:#1d4ed8;color:#bfdbfe}
.chat-mini-hero-badge-shield .chat-mini-hero-badge{background:#166534;color:#bbf7d0}
.chat-mini-hero-badge-fire   .chat-mini-hero-badge{background:#991b1b;color:#fecaca}
.chat-mini-hero-badge-clock  .chat-mini-hero-badge{background:#374151;color:#e5e7eb}