/* spheres-mobile.css */
/* Mobile readability + portal UX. Safe to include alongside spheres.css. */

:root{
  --pad: clamp(12px, 3vw, 22px);
  --maxw: 980px;
  --radius: 14px;
}

img{ max-width:100%; height:auto; }

body{
  margin:0;
  padding:0;
}

.spheres-page{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--pad);
}

/* Gateways / portals bar */
.portal-bar{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(0,0,0,0.85);
}

/* Buttons inside the portal bar */
.portal-bar a,
.portal-bar button{
  display: inline-block;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.20);
}

/* Sphere blocks using <details> */
details.sphere-block{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  margin: 12px 0;
  overflow: hidden;
}

details.sphere-block > summary{
  cursor: pointer;
  list-style: none;
  padding: 14px 14px;
  font-weight: 700;
}

details.sphere-block > summary::-webkit-details-marker{
  display:none;
}

details.sphere-block .sphere-body{
  padding: 0 14px 14px 14px;
}

/* Make tables less painful on phones */
table{
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 720px){
  .portal-bar a,
  .portal-bar button{
    width: 100%;
    text-align: center;
    margin: 6px 0;
  }

  .spheres-page{
    padding: 12px;
  }
}