/* TapCord website — the Studio page (site/src/studio.js). Copied to site/www/assets by scripts/site.js. */
.sg-tabs,.sg-chips,.sg-motion{display:flex;flex-wrap:wrap;gap:8px}
.sg-tabs{margin-top:22px}
.sg-tabs button,.sg-chips button,.sg-motion button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border2);background:rgba(255,255,255,.03);font:600 14.5px Plex;color:var(--muted);white-space:nowrap;flex:none;transition:background .15s,color .15s,border-color .15s}
.sg-tabs button{height:46px;padding:0 20px;font:700 15.5px Plex}
.sg-chips button,.sg-motion button{height:34px;padding:0 13px;font-size:13.5px}
.sg-tabs small,.sg-chips small{font:700 12px Plex;color:var(--faint);padding:0 7px;border-radius:99px;background:var(--surface3)}
.sg-tabs button:hover,.sg-chips button:hover,.sg-motion button:hover{color:var(--text);border-color:var(--gline)}
.sg-tabs button[aria-pressed=true],.sg-chips button[aria-pressed=true],.sg-motion button[aria-pressed=true]{color:var(--strong);border-color:var(--gline2);background:linear-gradient(180deg,rgba(230,184,92,.16),rgba(230,184,92,.05))}
.sg-tabs button[aria-pressed=true] small,.sg-chips button[aria-pressed=true] small{background:rgba(230,184,92,.22);color:var(--gold2)}
.sg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.sg-bar .sg-chips{flex:1;min-width:0}
.sg-count{color:var(--faint);font:600 14px Plex}
.sg-body{padding-top:8px;padding-bottom:56px}

.sg-grid{display:grid;gap:16px;margin-top:20px}
.sg-grid.profiles{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.sg-grid.avatars{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.sg-grid.banners{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.sg-item{position:relative;display:block;width:100%;padding:0;border:0;background:none;border-radius:18px;text-align:start;transition:transform .18s}
.sg-item:hover{transform:translateY(-3px)}
.sg-item:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sg-play{position:absolute;top:10px;inset-inline-start:10px;padding:1px 8px;border-radius:999px;font:800 11px/1.7 Plex;letter-spacing:.06em;color:#1a1306;background:var(--btn-grad);direction:ltr}
.sg-empty{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--muted)}
.sg-more-row{display:flex;justify-content:center;margin-top:28px}

/* a profile: the banner, and the avatar over its edge with a ring in the card's colour */
.sg-profile{container-type:inline-size;position:relative;direction:ltr;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--border);transition:border-color .18s,box-shadow .18s;padding-bottom:19%}
.sg-item:hover .sg-profile{border-color:var(--gline2);box-shadow:0 18px 44px -26px rgba(230,184,92,.7)}
.sg-banner{aspect-ratio:2.5/1;background:#0d0b10;overflow:hidden}
.sg-banner img{display:block;width:100%;height:100%;object-fit:cover}
.sg-avatar{position:absolute;left:6cqw;top:calc(40cqw - 15cqw);width:30cqw;height:30cqw;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2cqw var(--surface);overflow:hidden}
.sg-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.sg-profile.big{border-radius:0;border:0}

.sg-pic{display:block;width:100%;object-fit:cover;background:#0d0b10;border:1px solid var(--border);transition:border-color .18s}
.sg-pic.round{aspect-ratio:1;border-radius:50%}
.sg-pic.wide{aspect-ratio:2.5/1;border-radius:16px}
.sg-item:hover .sg-pic{border-color:var(--gline2)}
.sg-big{background:var(--surface)}
.sg-big .sg-profile{width:100%}
.sg-big .sg-pic.round.big{width:min(420px,80vw);margin:36px auto}
.sg-big .sg-pic.wide.big{border:0;border-radius:0}
.pm-card .sg-foot{flex-wrap:wrap}
.sg-hint{font:500 13px Plex;color:var(--faint)}
.pm-card .pm-nav button{font:700 22px/1 Plex}
html[dir=rtl] .pm-card .pm-nav{direction:ltr;flex-direction:row-reverse}
@media (max-width:640px){
  .sg-grid.profiles{grid-template-columns:1fr 1fr;gap:10px}
  .sg-grid.avatars{grid-template-columns:repeat(3,1fr);gap:10px}
  .sg-grid.banners{grid-template-columns:1fr}
  .sg-hint{display:none}
  .sg-bar{flex-direction:column;align-items:stretch}
  .sg-tabs,.sg-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .sg-tabs::-webkit-scrollbar,.sg-chips::-webkit-scrollbar{display:none}
  .sg-tabs button{height:42px;padding:0 15px;font-size:14.5px}
}