/* ─── Style Spot shared shell ─────────────────────────────────────────────────
   ONE header, pixel-identical on every page. Pages render it by placing
   <header id="ss-shell" data-space="social|studio" data-tag=""></header>
   followed by <script src="/ui/shell.js"></script>.  Do not hand-roll top bars. */

.ssh { position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
       height:58px; padding:0 max(18px, calc((100vw - 1680px) / 2)); background:#FAFAF8; border-bottom:1px solid #EAEAEA; box-sizing:border-box; }
.ssh * { box-sizing:border-box; }

.ssh-brand { display:flex; align-items:center; gap:9px; text-decoration:none; min-width:0; }
.ssh-icon { width:30px; height:30px; display:block; flex:none; }
.ssh-words { display:block; }
.ssh-wordmark { height:16px; width:auto; display:block; }
.ssh-tag { display:block; font:600 9px/1 Inter,system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase;
           color:#F23D72; margin-top:3px; white-space:nowrap; }

/* The Social ⇄ Studio switch: ALWAYS dead-center, on every page. */
.ssh-switch { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex;
              background:#F0F0EE; border:1px solid #EAEAEA; border-radius:99px; padding:3px; gap:2px; }
.ssh-seg { font:600 12.5px/1 Inter,system-ui,sans-serif; color:#777; border:0; background:none; border-radius:99px;
           padding:7px 15px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; }
.ssh-seg.active { background:#fff; color:#0D0D0D; box-shadow:0 1px 2px rgba(0,0,0,.09); }
.ssh-seg:not(.active):hover { color:#0D0D0D; }

.ssh-right { display:flex; align-items:center; gap:10px; }
#ssh-slot { display:inline-flex; align-items:center; gap:10px; }
#ssh-slot:empty { display:none; }
.ssh-me { display:inline-flex; align-items:center; padding:9px 16px; border-radius:99px;
          font:600 13px/1 Inter,system-ui,sans-serif; background:#0D0D0D; color:#fff; text-decoration:none; }
.ssh-me.ssh-ava { padding:0; width:36px; height:36px; border-radius:50%; overflow:hidden; justify-content:center; }
.ssh-me.ssh-ava img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.ssh-me.ssh-ava svg { border-radius:50%; }
.ssh-help { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
            border-radius:50%; border:none; background:#F23D72; color:#fff; font:700 16px/1 Inter,system-ui,sans-serif;
            cursor:pointer; flex:none; }
.ssh-help:hover { filter:brightness(1.05); }
.ssh-msgs { position:relative; display:inline-flex; align-items:center; justify-content:center;
            width:38px; height:38px; border-radius:50%; color:#0D0D0D; text-decoration:none; }
.ssh-msgs:hover { background:rgba(0,0,0,.05); }
.ssh-msgs-badge { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
                  border-radius:99px; background:#F23D72; color:#fff; font:700 10px/1 Inter,system-ui,sans-serif;
                  display:grid; place-items:center; border:2px solid var(--ssh-bg,#fff); }
/* a new message just arrived: the heart / chat icon rings like a bell */
@keyframes sshShake {
  0%,100% { transform:rotate(0); }
  15% { transform:rotate(-14deg) scale(1.12); }
  30% { transform:rotate(11deg) scale(1.12); }
  45% { transform:rotate(-8deg) scale(1.06); }
  60% { transform:rotate(6deg) scale(1.06); }
  75% { transform:rotate(-3deg); }
}
.ssh-msgs.ssh-shake { animation:sshShake .75s cubic-bezier(.36,.07,.19,.97); transform-origin:50% 30%; }

@media (max-width:520px) {
  .ssh { padding:0 12px; }
  .ssh-seg { padding:7px 12px; }
  .ssh-me { padding:8px 13px; }
  /* the centered Social/Studio pill overlapped the wordmark on phones —
     keep only the spot icon on narrow screens */
  .ssh-words { display:none; }
}

/* ── Studio dark theme ──────────────────────────────────────────────
   Studio is charcoal by default; html.theme-light (set on the Studio page
   only) opts back into light. Scoped to the Studio-space shell so the
   Social shell is never touched. */
html:not(.theme-light) #ss-shell[data-space="studio"] { background:#131316; border-bottom-color:#33333A; }
html:not(.theme-light) #ss-shell[data-space="studio"] .ssh-switch { background:#26262C; border-color:#33333A; }
html:not(.theme-light) #ss-shell[data-space="studio"] .ssh-seg { color:#9A9AA4; }
html:not(.theme-light) #ss-shell[data-space="studio"] .ssh-seg.active { background:#33333A; color:#F4F4F6; box-shadow:none; }
html:not(.theme-light) #ss-shell[data-space="studio"] .ssh-seg:not(.active):hover { color:#F4F4F6; }
html:not(.theme-light) #ss-shell[data-space="studio"] .ssh-wordmark { filter:brightness(0) invert(1); }
html:not(.theme-light) #ss-shell[data-space="studio"] .ssh-msgs { color:#F4F4F6; }
html:not(.theme-light) #ss-shell[data-space="studio"] .ssh-msgs:hover { background:rgba(255,255,255,.08); }
html:not(.theme-light) #ss-shell[data-space="studio"] .ssh-msgs-badge { border-color:#131316; }