/* Groups directory. Every rule is scoped to body.groups-page. */
.groups-page{
  --groups-max:90.5rem;--groups-line:color-mix(in srgb,var(--accent) 20%,transparent);
  --groups-line-strong:color-mix(in srgb,var(--accent) 34%,transparent);
  --groups-up:var(--accent);--groups-down:var(--down);
  margin:0;color:var(--text);
  background:radial-gradient(circle at 94% 5%,color-mix(in srgb,var(--accent-highlight) 11%,transparent),transparent 29rem),color-mix(in srgb,var(--surface) 93%,var(--accent-highlight))
}
.groups-page *,.groups-page *::before,.groups-page *::after{box-sizing:border-box}
.groups-page button{font:inherit}
.groups-page .groups-shell{width:var(--site-rail-width);margin-inline:auto}
.groups-page :where(a,button):focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.groups-page .groups-hero{position:relative;overflow:hidden;color:var(--order-inverse-text);background:radial-gradient(circle at 82% 32%,color-mix(in srgb,var(--gold-hi) 20%,transparent),transparent 22rem),linear-gradient(120deg,var(--order-inverse-surface),var(--secondary) 70%,var(--order-inverse-surface))}
.groups-page .groups-hero::before,.groups-page .groups-hero::after{content:"";position:absolute;border:1px solid color-mix(in srgb,var(--gold-hi) 16%,transparent);border-radius:50%;pointer-events:none}
.groups-page .groups-hero::before{width:30rem;aspect-ratio:1;right:-8rem;top:-16rem;box-shadow:0 0 0 3.5rem color-mix(in srgb,var(--gold-hi) 3.5%,transparent)}
.groups-page .groups-hero::after{width:18rem;aspect-ratio:1;right:11rem;bottom:-15rem}
.groups-page .groups-hero-inner{position:relative;z-index:1;min-height:16rem;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-48);padding-block:var(--sp-40)}
.groups-page .groups-hero-copy{max-width:51rem}
.groups-page .groups-breadcrumb{display:flex;align-items:center;gap:.65rem;margin-block-end:var(--sp-24);font-size:.73rem}
.groups-page .groups-breadcrumb a{color:rgba(255,255,255,.76);text-decoration:none}.groups-page .groups-breadcrumb a:hover{color:var(--accent-highlight)}
.groups-page .groups-breadcrumb span:last-child,.groups-page .groups-kicker{color:var(--accent-highlight)}
.groups-page .groups-kicker{font-size:.67rem;letter-spacing:.14em}
.groups-page .groups-hero h1{margin:.45rem 0 .75rem;font-size:clamp(2.65rem,5vw,4.75rem);font-weight:500;line-height:.96;letter-spacing:-.04em}
.groups-page .groups-hero-copy>p{max-width:50rem;margin:0;color:rgba(255,255,255,.76);font-size:1rem;line-height:1.75}
.groups-page .groups-hero-facts{display:grid;grid-template-columns:repeat(3,minmax(7.5rem,1fr));margin:0;border-block:1px solid rgba(255,255,255,.14)}
.groups-page .groups-hero-facts>div{padding:var(--sp-18);border-inline-start:1px solid rgba(255,255,255,.14)}
.groups-page .groups-hero-facts dt{color:rgba(255,255,255,.58);font-size:.66rem;white-space:nowrap}
.groups-page .groups-hero-facts dd{margin:.35rem 0 0;color:var(--accent-highlight);font-family:var(--mono);font-size:1.08rem;font-weight:600;white-space:nowrap}

.groups-page .groups-filter-panel{padding-block:var(--sp-24) var(--sp-8)}
.groups-page .groups-filter-head{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-24);margin-block-end:var(--sp-16)}
.groups-page .groups-filter-head .mono,.groups-page .groups-section-head .mono{color:var(--accent);font-size:.65rem;letter-spacing:.12em}
.groups-page .groups-filter-head h2{margin:.25rem 0 0;font-size:1.3rem}
.groups-page .groups-filter-head p{max-width:38rem;margin:0;color:var(--text-3);font-size:.75rem;text-align:end}
.groups-page .groups-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-10)}
.groups-page .groups-filters button{
  width:100%;min-height:3.5rem;display:flex;align-items:center;justify-content:center;gap:var(--sp-10);
  padding:.65rem .8rem;border:1px solid var(--groups-line-strong);border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--text-2);font-size:.78rem;font-weight:600;cursor:pointer
}
.groups-page .groups-filters button svg{width:1.15rem;height:1.15rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.groups-page .groups-filters button:hover{border-color:var(--accent);color:var(--text)}
.groups-page .groups-filters button.is-active{border-color:transparent;background:var(--button-primary-bg);color:var(--on-gold);box-shadow:var(--shadow-gold)}
.groups-page .groups-filter-meta{min-height:2.75rem;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16)}
.groups-page .groups-filter-meta p{margin:0;color:var(--text-3);font-size:.72rem}.groups-page .groups-filter-meta strong{color:var(--text);font-family:var(--mono)}
.groups-page .groups-filter-meta button{padding:.3rem 0;border:0;background:transparent;color:var(--accent);font-size:.7rem;font-weight:600;cursor:pointer}

.groups-page .groups-directory{padding-block:var(--sp-8) var(--sp-48)}
.groups-page .groups-section-head{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-24);padding:var(--sp-10) var(--sp-2) var(--sp-20)}
.groups-page .groups-section-head h2{margin:.3rem 0 0;font-size:clamp(1.45rem,2.5vw,2rem);font-weight:600}
.groups-page .groups-section-head>p{margin:0;color:var(--text-3);font-family:var(--mono);font-size:.67rem}
.groups-page .groups-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16)}
.groups-page .group-card{min-width:0;padding:var(--sp-22);border:1px solid var(--groups-line);border-radius:calc(var(--radius-card) + var(--sp-4));background:color-mix(in srgb,var(--surface) 95%,transparent);box-shadow:var(--shadow-card);transition:border-color var(--dur-fast) ease,transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.groups-page .group-card:hover{transform:translateY(-2px);border-color:var(--groups-line-strong);box-shadow:var(--shadow-card)}
.groups-page .group-card-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--sp-14)}
.groups-page .group-mark{width:3.7rem;height:3.7rem;display:grid;place-items:center;border:1px solid color-mix(in srgb,currentColor 27%,transparent);border-radius:var(--radius-ctl);background:color-mix(in srgb,currentColor 9%,var(--surface))}
.groups-page .group-mark svg{width:1.9rem;height:1.9rem;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.groups-page .group-mark-1,.groups-page .group-mark-5{color:var(--accent-strong)}
.groups-page .group-mark-2,.groups-page .group-mark-6{color:var(--secondary)}
.groups-page .group-mark-3,.groups-page .group-mark-7{color:var(--text-2)}
.groups-page .group-mark-4,.groups-page .group-mark-8{color:var(--accent)}
.groups-page .group-card-copy h3{margin:0;font-size:1.12rem;font-weight:600;line-height:1.35}
.groups-page .group-verified{display:inline-grid;place-items:center;width:1rem;height:1rem;margin-inline-start:.42rem;border-radius:50%;background:var(--secondary);color:var(--on-secondary);font-size:.57rem;vertical-align:.12rem}
.groups-page .group-card-copy p{min-height:3.3em;margin:.38rem 0 0;color:var(--text-3);font-size:.76rem;line-height:1.65}
.groups-page .group-follow{min-width:5.7rem;min-height:2.3rem;padding:.4rem .65rem;border:1px solid var(--groups-line-strong);border-radius:var(--radius-pill);background:transparent;color:var(--accent);font-size:.68rem;font-weight:600;cursor:pointer}
.groups-page .group-follow:hover{border-color:var(--accent)}.groups-page .group-follow.is-following{border-color:var(--secondary);background:var(--secondary);color:var(--on-secondary)}
.groups-page .group-badges{min-height:1.9rem;display:flex;flex-wrap:wrap;gap:var(--sp-6);margin:var(--sp-14) 0 var(--sp-12)}
.groups-page .group-badge{padding:.25rem .48rem;border-radius:var(--radius-pill);font-size:.61rem;font-weight:600}
.groups-page .group-badge-followers{background:var(--secondary-soft);color:var(--accent-strong)}.groups-page .group-badge-nav{background:var(--accent-soft);color:var(--accent)}
.groups-page .group-badge-return{background:var(--surface-2);color:var(--text-2)}.groups-page .group-badge-interest{background:var(--accent-soft);color:var(--accent)}
.groups-page .group-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);overflow:hidden;border:1px solid var(--groups-line);border-radius:var(--radius-card);background:var(--groups-line)}
.groups-page .group-stat{min-width:0;padding:var(--sp-12) var(--sp-14);background:var(--surface)}
.groups-page .group-stat:nth-child(even){border-inline-start:1px solid var(--groups-line)}.groups-page .group-stat:nth-child(n+3){border-block-start:1px solid var(--groups-line)}
.groups-page .group-stat dt{color:var(--text-3);font-size:.61rem}.groups-page .group-stat dd{margin:.2rem 0;color:var(--text);font-family:var(--mono);font-size:1.02rem;font-weight:600}
.groups-page .group-stat dd.is-up{color:var(--groups-up)}.groups-page .group-stat dd.is-down{color:var(--groups-down)}
.groups-page .group-stat small{display:block;color:var(--text-3);font-size:.57rem}
.groups-page .group-dd-track{display:block;width:100%;height:3px;margin-block-start:.45rem;border-radius:var(--radius-rule);background:color-mix(in srgb,var(--groups-down) 11%,transparent);overflow:hidden}
.groups-page .group-dd-track i{display:block;height:100%;background:var(--groups-down)}
.groups-page .group-dd-5{width:12%}.groups-page .group-dd-6{width:14.4%}.groups-page .group-dd-9{width:21.6%}.groups-page .group-dd-12{width:28.8%}
.groups-page .group-dd-14{width:33.6%}.groups-page .group-dd-19{width:45.6%}.groups-page .group-dd-28{width:67.2%}.groups-page .group-dd-34{width:81.6%}
.groups-page .group-chart{height:3.8rem;margin-block:var(--sp-12) var(--sp-4)}
.groups-page .group-chart svg{display:block;width:100%;height:100%;overflow:visible}.groups-page .group-chart .area{opacity:.09}.groups-page .group-chart .line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.groups-page .group-card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);padding-block-start:var(--sp-12);border-block-start:1px solid var(--groups-line)}
.groups-page .group-interest{display:flex;flex-direction:column}.groups-page .group-interest strong{font-family:var(--mono);font-size:.75rem}.groups-page .group-interest span{color:var(--text-3);font-size:.57rem}
.groups-page .group-request{min-width:8.5rem;min-height:2.5rem;padding:.45rem .8rem;border:1px solid var(--accent);border-radius:var(--radius-button);background:transparent;color:var(--accent);font-size:.69rem;font-weight:600;cursor:pointer}
.groups-page .group-request:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}.groups-page .group-request.is-pending{border-color:var(--secondary);background:var(--secondary);color:var(--on-secondary)}
.groups-page .groups-empty{text-align:center;padding:var(--sp-64) var(--sp-24);border:1px dashed var(--groups-line-strong);border-radius:var(--radius-card)}
.groups-page .groups-empty .mono{color:var(--accent);font-size:.64rem}.groups-page .groups-empty h2{margin:.6rem 0 .35rem;font-size:1.3rem}.groups-page .groups-empty p{margin:0;color:var(--text-3)}

.groups-page .groups-boundary{display:grid;grid-template-columns:minmax(14rem,.7fr) minmax(20rem,1.6fr) auto;align-items:center;gap:var(--sp-32);margin-block-end:var(--sp-48);padding:var(--sp-28);border:1px solid var(--groups-line-strong);border-radius:var(--radius-card);background:linear-gradient(110deg,color-mix(in srgb,var(--accent-highlight) 12%,var(--surface)),var(--surface))}
.groups-page .groups-boundary .mono{color:var(--accent);font-size:.62rem}.groups-page .groups-boundary h2{margin:.28rem 0 0;font-size:1.25rem}.groups-page .groups-boundary p{margin:0;color:var(--text-2);font-size:.8rem;line-height:1.72}.groups-page .groups-boundary a{color:var(--accent);font-size:.75rem;font-weight:600;text-decoration:none;white-space:nowrap}
.groups-page .groups-footer{display:flex;justify-content:space-between;gap:var(--sp-24);padding-block:var(--sp-24) var(--sp-40);border-block-start:1px solid var(--groups-line);color:var(--text-3);font-size:.7rem}.groups-page .groups-footer p{max-width:48rem;margin:0}.groups-page .groups-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-18)}.groups-page .groups-footer a{color:inherit;text-decoration:none}.groups-page .groups-footer a:hover{color:var(--accent)}

@media(max-width:70rem){
  .groups-page .groups-hero-inner{align-items:flex-start;flex-direction:column;gap:var(--sp-28)}.groups-page .groups-hero-facts{width:100%;max-width:34rem}
  .groups-page .groups-boundary{grid-template-columns:1fr 1.5fr}.groups-page .groups-boundary>a{grid-column:1/-1}
}
@media(max-width:48rem){
  .groups-page .groups-shell{width:var(--site-rail-width)}.groups-page .groups-hero-inner{min-height:auto;padding-block:var(--sp-28)}.groups-page .groups-hero h1{font-size:2.8rem}
  .groups-page .groups-hero-facts{grid-template-columns:1fr}.groups-page .groups-hero-facts>div{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-10);border-inline-start:0;border-block-start:1px solid rgba(255,255,255,.14)}.groups-page .groups-hero-facts>div:first-child{border-block-start:0}
  .groups-page .groups-filter-head,.groups-page .groups-section-head{align-items:flex-start;flex-direction:column;gap:var(--sp-8)}.groups-page .groups-filter-head p{text-align:start}
  .groups-page .groups-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.groups-page .groups-filters button{min-height:4.2rem;flex-direction:column;gap:var(--sp-6);border-radius:var(--radius-button);font-size:.7rem;text-align:center}
  .groups-page .groups-grid{grid-template-columns:1fr}.groups-page .group-card{padding:var(--sp-18)}.groups-page .group-card-head{grid-template-columns:auto minmax(0,1fr)}.groups-page .group-follow{grid-column:2;justify-self:start}
  .groups-page .groups-boundary{grid-template-columns:1fr;gap:var(--sp-16)}.groups-page .groups-footer{flex-direction:column}.groups-page .groups-footer nav{justify-content:flex-start}
}
@media(max-width:28rem){.groups-page .groups-filters{grid-template-columns:1fr}.groups-page .group-stat-grid{grid-template-columns:1fr}.groups-page .group-stat:nth-child(even){border-inline-start:0}.groups-page .group-stat:nth-child(n+2){border-block-start:1px solid var(--groups-line)}}
@media(prefers-reduced-motion:reduce){.groups-page .group-card{transition:none}}

/* News-derived atmosphere with a community-specific connected-ring motif. */
.groups-page{
  background-color:var(--page-atmosphere-base);
  background-image:var(--page-atmosphere-bg);
  background-attachment:fixed
}
.groups-page .groups-hero{color:var(--oasis-hero-fg);background:var(--page-hero-background)}
.groups-page .groups-hero::before,.groups-page .groups-hero::after{border-color:var(--oasis-hero-line)}
.groups-page .groups-breadcrumb a,.groups-page .groups-hero-copy>p{color:var(--oasis-hero-muted)}
.groups-page .groups-breadcrumb span:last-child,.groups-page .groups-kicker{color:var(--accent)}
.groups-page .groups-hero h1{font-family:var(--brand);font-weight:var(--fw-semibold)}
.groups-page .groups-hero-facts{border-color:var(--oasis-hero-line)}
.groups-page .groups-hero-facts>div{border-color:var(--oasis-hero-line)}
.groups-page .groups-hero-facts dt{color:var(--text-2)}
.groups-page .groups-hero-facts dd{color:var(--accent)}
.groups-page .groups-filters{gap:var(--oasis-filter-gap)}
.groups-page .groups-filters button{
  min-height:var(--oasis-filter-height);padding-inline:var(--oasis-filter-pad-inline);
  border-color:var(--oasis-filter-border);border-radius:var(--oasis-filter-radius);
  background:var(--oasis-filter-bg);color:var(--oasis-filter-fg);font-size:var(--oasis-filter-label-size)
}
.groups-page .groups-filters button:hover{border-color:var(--accent);background:var(--oasis-panel-bg-hover);color:var(--text)}
.groups-page .groups-filters button.is-active{border-color:transparent;background:var(--oasis-filter-active-bg);color:var(--oasis-filter-active-fg)}
@media(max-width:48rem){
  .groups-page .groups-filters button{min-height:var(--touch-target);flex-direction:row}
}