/* Steem Sphere on Explore (steem-sphere.js): the SteemSphere pill (styled like the other feed pills) and the global,
   newest-first Steem feed it opens in place of the WorldBites grid */

/* While the Sphere (or a community) is open the WorldBites-only grid and category highlight step aside */
.explore.sphere-on > .explore-stage, .explore.pins-on > .explore-stage { display:none; }
.explore.sphere-on .explore-pill[data-cat][aria-pressed="true"] { background:none; color:var(--pill-ink); border-color:var(--pill-line); box-shadow:none; }
.explore.sphere-on .explore-pill[data-cat][aria-pressed="true"]::before { content:none; }

.sphere { text-align:left; }
.sphere[hidden] { display:none; }

.sphere-status { display:flex; align-items:center; gap:6px; margin:0 0 10px 4px; font-size:12px; color:var(--muted); }
.sphere-live { width:7px; height:7px; border-radius:50%; background:#d4af37; box-shadow:0 0 0 0 rgba(212,175,55,.6); animation:sphere-pulse 2s infinite; }
.sphere.loading .sphere-live { background:var(--muted); animation:none; }
@keyframes sphere-pulse { 0% { box-shadow:0 0 0 0 rgba(212,175,55,.55); } 70% { box-shadow:0 0 0 7px rgba(212,175,55,0); } 100% { box-shadow:0 0 0 0 rgba(212,175,55,0); } }
.sphere-stage .compact-time { white-space:nowrap; }
.sphere-new { animation:sphere-in .6s ease-out; }
@keyframes sphere-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.pins-sentinel { height:1px; }
.pins-map-link { margin-left:auto; font-weight:700; color:var(--gold); text-decoration:none; white-space:nowrap; }
.pins-map-link:hover { text-decoration:underline; }

.sphere-more { display:flex; justify-content:center; margin:14px 0 0; }
.sphere-more-btn { padding:8px 18px; font:inherit; font-size:12px; font-weight:700; color:var(--text); background:var(--card); border:1px solid var(--border);
  border-radius:999px; cursor:pointer; }
.sphere-more-btn:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); }
.sphere-more-btn:disabled { opacity:.5; cursor:default; }
.sphere-more-btn[hidden] { display:none; }

@media (prefers-reduced-motion: reduce) {
    .sphere-live, .sphere-new { animation:none; }
}