/* Trending Community surface. Every rule is scoped to body.trending-page. */
.trending-page{
  --trending-max:90.5rem;--trending-line:color-mix(in srgb,var(--accent) 20%,transparent);
  --trending-line-strong:color-mix(in srgb,var(--accent) 34%,transparent);
  margin:0;color:var(--text);
  background:radial-gradient(circle at 92% 4%,color-mix(in srgb,var(--accent-highlight) 12%,transparent),transparent 30rem),color-mix(in srgb,var(--surface) 93%,var(--accent-highlight))
}
.trending-page *,.trending-page *::before,.trending-page *::after{box-sizing:border-box}
.trending-page button{font:inherit}
.trending-page .trending-shell{width:var(--site-rail-width);margin-inline:auto}
.trending-page :where(a,button):focus-visible{outline:2px solid var(--focus);outline-offset:3px;transition:none}

.trending-page .trending-hero{position:relative;overflow:hidden;color:var(--order-inverse-text);background:radial-gradient(circle at 83% 30%,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))}
.trending-page .trending-hero::before,.trending-page .trending-hero::after{content:"";position:absolute;border:1px solid color-mix(in srgb,var(--gold-hi) 16%,transparent);border-radius:50%;pointer-events:none}
.trending-page .trending-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)}
.trending-page .trending-hero::after{width:18rem;aspect-ratio:1;right:11rem;bottom:-15rem}
.trending-page .trending-hero-inner{position:relative;z-index:1;min-height:14.5rem;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-48);padding-block:var(--sp-36)}
.trending-page .trending-hero-copy{max-width:52rem}
.trending-page .trending-breadcrumb{display:flex;align-items:center;gap:.65rem;margin-block-end:var(--sp-20);font-size:.73rem}
.trending-page .trending-breadcrumb a{color:rgba(255,255,255,.76);text-decoration:none}.trending-page .trending-breadcrumb a:hover{color:var(--accent-highlight)}
.trending-page .trending-breadcrumb span:last-child,.trending-page .trending-kicker{color:var(--accent-highlight)}
.trending-page .trending-kicker{font-size:.67rem;letter-spacing:.14em}
.trending-page .trending-hero h1{display:flex;align-items:center;gap:var(--sp-12);margin:.45rem 0 .7rem;font-size:clamp(1.55rem,2.4vw,1.75rem);font-weight:600;line-height:1}
.trending-page .trending-hero h1 svg{width:2rem;height:2rem;fill:none;stroke:var(--accent-highlight);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.trending-page .trending-hero-copy>p{max-width:50rem;margin:0;color:rgba(255,255,255,.76);font-size:.92rem;line-height:1.75}
.trending-page .trending-hero-facts{display:grid;grid-template-columns:repeat(3,minmax(7.5rem,1fr));margin:0;border-block:1px solid rgba(255,255,255,.14)}
.trending-page .trending-hero-facts>div{padding:var(--sp-18);border-inline-start:1px solid rgba(255,255,255,.14)}
.trending-page .trending-hero-facts dt{color:rgba(255,255,255,.58);font-size:.66rem;white-space:nowrap}.trending-page .trending-hero-facts dd{margin:.35rem 0 0;color:var(--accent-highlight);font-family:var(--mono);font-size:1.08rem;font-weight:600}

.trending-page .trending-controls{padding-block:var(--sp-24) var(--sp-12)}
.trending-page .trending-controls-head{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-24);margin-block-end:var(--sp-16)}
.trending-page .trending-controls-head .mono,.trending-page .trending-section-head .mono{color:var(--accent);font-size:.64rem;letter-spacing:.12em}
.trending-page .trending-controls-head h2{margin:.3rem 0 0;font-size:1.25rem}.trending-page .trending-controls-head p{margin:0;color:var(--text-3);font-size:.72rem}
.trending-page .trending-control-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-20)}
.trending-page .trending-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-8)}
.trending-page .trending-filters button{width:100%;min-height:3rem;padding:.55rem .8rem;border:1px solid var(--trending-line-strong);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--text-2);font-size:.76rem;font-weight:600;white-space:nowrap;cursor:pointer}
.trending-page .trending-filters button:hover{border-color:var(--accent);color:var(--text)}
.trending-page .trending-filters button.is-active{border-color:transparent;background:var(--button-primary-bg);color:var(--on-gold);box-shadow:var(--shadow-gold)}
.trending-page .trending-window{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);padding:var(--sp-4);border:1px solid var(--trending-line-strong);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--accent-highlight) 12%,var(--surface))}
.trending-page .trending-window button{min-width:5.2rem;min-height:2.75rem;padding:.4rem .75rem;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-2);font-size:.7rem;font-weight:600;white-space:nowrap;cursor:pointer}
.trending-page .trending-window button.is-active{background:var(--surface);color:var(--accent-strong);box-shadow:var(--shadow-sm)}

.trending-page .trending-directory{padding-block:var(--sp-12) var(--sp-48)}
.trending-page .trending-section-head{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-24);padding:var(--sp-10) var(--sp-2) var(--sp-18)}
.trending-page .trending-section-head>div{display:flex;align-items:center;gap:var(--sp-12)}
.trending-page .trending-section-head h2{margin:.25rem 0 0;font-size:clamp(1.35rem,2vw,1.75rem);font-weight:600}.trending-page .trending-section-head>p{margin:0;color:var(--text-3);font-family:var(--mono);font-size:.66rem}
.trending-page .trending-live{width:.58rem;aspect-ratio:1;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.trending-page .trending-guest{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-16);margin-block-end:var(--sp-16);padding:var(--sp-18) var(--sp-20);border:1px dashed var(--trending-line-strong);border-radius:var(--radius-card);background:linear-gradient(110deg,color-mix(in srgb,var(--accent-highlight) 12%,var(--surface)),var(--surface))}
.trending-page .trending-guest-icon{width:2.7rem;height:2.7rem;display:grid;place-items:center;border-radius:var(--radius-button);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.trending-page .trending-guest-icon svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.5}
.trending-page .trending-guest h2{margin:0;font-size:.94rem}.trending-page .trending-guest p{margin:.2rem 0 0;color:var(--text-3);font-size:.72rem}.trending-page .trending-guest .btn{min-width:max-content;white-space:nowrap}

.trending-page .trending-list{display:flex;flex-direction:column;gap:var(--sp-10)}
.trending-page .trend-card{position:relative;display:grid;grid-template-columns:4.3rem minmax(0,1fr) auto;align-items:center;gap:var(--sp-18);width:100%;padding:var(--sp-18) var(--sp-22);border:1px solid var(--trending-line);border-radius:var(--radius-card);background:color-mix(in srgb,var(--surface) 95%,transparent);box-shadow:var(--shadow-card);text-align:start;cursor:pointer;overflow:hidden;transition:border-color var(--dur-fast) ease,transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.trending-page .trend-card-action{position:absolute;z-index:2;inset:0;width:100%;height:100%;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.trending-page .trend-card-action:focus-visible{outline:0}.trending-page .trend-card:focus-within{outline:2px solid var(--focus);outline-offset:3px}
.trending-page .trend-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--accent);opacity:0;transition:opacity var(--dur-fast) ease}
.trending-page .trend-card:hover{transform:translateY(-2px);border-color:var(--trending-line-strong);box-shadow:var(--shadow-card)}.trending-page .trend-card:hover::before{opacity:1}
.trending-page .trend-rank{display:flex;flex-direction:column;align-items:center;color:color-mix(in srgb,var(--accent) 55%,var(--text-3));font-family:var(--mono);font-size:1.75rem;font-weight:600;line-height:1}
.trending-page .trend-rank.is-top{color:var(--accent)}.trending-page .trend-rank small{margin-block-start:.3rem;color:var(--text-3);font-family:var(--font);font-size:.53rem;letter-spacing:.1em}
.trending-page .trend-main{min-width:0}.trending-page .trend-category-row{display:flex;align-items:center;gap:var(--sp-8);margin-block-end:var(--sp-6);color:var(--text-3);font-size:.64rem}
.trending-page .trend-tag{display:inline-flex;width:max-content;padding:.24rem .52rem;border-radius:var(--radius-pill);font-size:.59rem;font-weight:600}
.trending-page .trend-tag-news{background:var(--secondary-soft);color:var(--accent-strong)}.trending-page .trend-tag-analysis{background:var(--accent-soft);color:var(--accent)}.trending-page .trend-tag-mindset{background:var(--surface-2);color:var(--text-2)}.trending-page .trend-tag-beginner{background:var(--secondary-soft);color:var(--text)}.trending-page .trend-tag-community{background:var(--accent-soft);color:var(--accent)}
.trending-page .trend-main h3{margin:0;font-size:1.08rem;font-weight:600}.trending-page .trend-context{margin:.32rem 0 .55rem;color:var(--text-2);font-size:.76rem}
.trending-page .trend-meta{display:flex;flex-wrap:wrap;gap:var(--sp-16);color:var(--text-3);font-size:.66rem}.trending-page .trend-meta span{display:inline-flex;align-items:center;gap:var(--sp-6)}.trending-page .trend-meta svg{width:.86rem;height:.86rem;fill:none;stroke:currentColor;stroke-width:1.6}.trending-page .trend-meta strong{color:var(--text-2);font-family:var(--mono);font-weight:600}
.trending-page .trend-go{display:inline-flex;align-items:center;gap:var(--sp-8);color:var(--accent);font-size:.7rem;font-weight:600;white-space:nowrap}.trending-page .trend-go svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.6}
.trending-page .trending-empty{text-align:center;padding:var(--sp-64) var(--sp-24);border:1px dashed var(--trending-line-strong);border-radius:var(--radius-card)}.trending-page .trending-empty .mono{color:var(--accent);font-size:.64rem}.trending-page .trending-empty h2{margin:.55rem 0 0;font-size:1.2rem}
.trending-page .trending-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(--trending-line);color:var(--text-3);font-size:.7rem}.trending-page .trending-footer p{max-width:48rem;margin:0}.trending-page .trending-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-18)}.trending-page .trending-footer a{min-height:2.75rem;display:inline-flex;align-items:center;color:inherit;text-decoration:none}.trending-page .trending-footer a:hover{color:var(--accent)}
.trending-page .trending-toast{position:fixed;z-index:90;inset-inline:50% auto;bottom:var(--sp-24);translate:-50% .7rem;max-width:min(30rem,calc(100% - 2rem));padding:.72rem 1rem;border:1px solid var(--trending-line-strong);border-radius:var(--radius-pill);background:var(--secondary);color:var(--on-secondary);font-size:.72rem;opacity:0;pointer-events:none;transition:opacity var(--dur-fast) ease,translate var(--dur-fast) ease}.trending-page .trending-toast.is-visible{translate:-50% 0;opacity:1}

@media(max-width:70rem){.trending-page .trending-hero-inner{align-items:flex-start;flex-direction:column;gap:var(--sp-28)}.trending-page .trending-hero-facts{width:100%;max-width:34rem}.trending-page .trending-control-row{grid-template-columns:1fr}.trending-page .trending-window{justify-self:start}}
@media(max-width:48rem){
  .trending-page .trending-shell{width:var(--site-rail-width)}.trending-page .trending-hero-inner{min-height:auto;padding-block:var(--sp-28)}
  .trending-page .trending-hero-facts{grid-template-columns:1fr}.trending-page .trending-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)}.trending-page .trending-hero-facts>div:first-child{border-block-start:0}
  .trending-page .trending-controls-head,.trending-page .trending-section-head{align-items:flex-start;flex-direction:column;gap:var(--sp-8)}.trending-page .trending-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trending-page .trending-guest{grid-template-columns:auto 1fr}.trending-page .trending-guest .btn{grid-column:1/-1;width:100%}
  .trending-page .trend-card{grid-template-columns:3rem minmax(0,1fr);padding:var(--sp-16)}.trending-page .trend-rank{font-size:1.45rem}.trending-page .trend-go{display:none}
  .trending-page .trending-footer{flex-direction:column}.trending-page .trending-footer nav{justify-content:flex-start}
}
@media(max-width:28rem){.trending-page .trending-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.trending-page .trend-card{grid-template-columns:1fr}.trending-page .trend-rank{align-items:flex-start}.trending-page .trend-rank small{display:none}}
@media(prefers-reduced-motion:reduce){.trending-page .trend-card,.trending-page .trend-card::before,.trending-page .trending-toast{transition:none}}

/* News-derived atmosphere with a community-specific connected-ring motif. */
.trending-page{
  background-color:var(--page-atmosphere-base);
  background-image:var(--page-atmosphere-bg);
  background-attachment:fixed
}
.trending-page .trending-hero{color:var(--oasis-hero-fg);background:var(--page-hero-background)}
.trending-page .trending-hero::before,.trending-page .trending-hero::after{border-color:var(--oasis-hero-line)}
.trending-page .trending-breadcrumb a,.trending-page .trending-hero-copy>p{color:var(--oasis-hero-muted)}
.trending-page .trending-breadcrumb span:last-child,.trending-page .trending-kicker{color:var(--accent)}
.trending-page .trending-hero h1{font-family:var(--brand);font-weight:var(--fw-semibold)}
.trending-page .trending-hero h1 svg{stroke:var(--accent)}
.trending-page .trending-hero-facts{border-color:var(--oasis-hero-line)}
.trending-page .trending-hero-facts>div{border-color:var(--oasis-hero-line)}
.trending-page .trending-hero-facts dt{color:var(--text-2)}
.trending-page .trending-hero-facts dd{color:var(--accent)}
.trending-page .trending-filters{gap:var(--oasis-filter-gap)}
.trending-page .trending-filters button,
.trending-page .trending-window button{
  min-height:var(--oasis-filter-height);padding-inline:var(--oasis-filter-pad-inline);
  border:var(--hairline) solid 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)
}
.trending-page .trending-filters button:hover,.trending-page .trending-window button:hover{border-color:var(--accent);background:var(--oasis-panel-bg-hover);color:var(--text)}
.trending-page .trending-filters button.is-active,.trending-page .trending-window button.is-active{
  border-color:transparent;background:var(--oasis-filter-active-bg);color:var(--oasis-filter-active-fg);box-shadow:var(--shadow-gold)
}
.trending-page .trending-window{gap:var(--oasis-filter-gap);padding:0;border:0;border-radius:var(--oasis-filter-radius);background:transparent}
@media(pointer:coarse){.trending-page .trending-filters button,.trending-page .trending-window button{min-height:var(--touch-target)}}