/* Public mode: hide the internal preview tools (team mode keeps them). */
body.public #pkgsel,
body.public #demo button { display: none; }
body.public .ptag { display: none; }

/* Header fits from 961px up (the pill nav overflowed at ~1000-1240px). */
@media (min-width:961px) and (max-width:1280px){
  .top-in{padding:12px 20px;gap:12px}
  .logo .sep,.logo .dash{display:none}
  .pillnav button{padding:9px 12px;font-size:14px;gap:6px}
  .top-r .btn span{display:none}
}
@media (min-width:961px) and (max-width:1080px){
  .pillnav button svg{display:none}
}
@media (max-width:540px){
  .logo .sep,.logo .dash{display:none}
  .top-r .btn span{display:none}
}

/* Sample studios: the picker in the bar and the list on the sign-in page */
#scsel{max-width:min(52ch,78vw)}
.samples{margin-top:26px;padding-top:22px;border-top:1px solid #2A338A;display:flex;flex-direction:column;gap:14px}
.samples .sg{display:flex;flex-direction:column;gap:6px}
.samples .sgh{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8E92C2}
.samples .sb{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 14px;border-radius:14px;border:1px solid #2A338A;background:#121B6E;color:#fff;cursor:pointer;min-height:48px;transition:border-color .15s,background .15s}
.samples .sb b{font-size:14.5px}
.samples .sb span{font-size:13px;color:#C9CDF2}
.samples .sb:hover,.samples .sb.on{border-color:var(--volt)}
.samples .sb.on{background:#1A2490}
.samples .sb:focus-visible{outline:3px solid var(--volt);outline-offset:2px}