/* ─── 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-left { display:flex; align-items:center; gap:8px; min-width:0; }
.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; }
/* Signed out: a Join pill where the avatar goes, no activity heart */
.ssh-me.ssh-join { background:#F23D72; color:#fff !important; border-radius:99px; padding:8px 14px; font-weight:700; font-size:13px; text-decoration:none; white-space:nowrap; }
.ssh-guest .ssh-msgs, .ssh-guest #ssh-act, .ssh-guest .ssh-help { display:none !important; }   /* no activity, no tutorial dot for visitors */
.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%; }
/* The tutorial button is the Spot mark: a pink dot with a small black dot
   sitting slightly to its lower right. */
.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; position:relative; }
.ssh-help::after { content:''; position:absolute; width:9px; height:9px; border-radius:50%; background:#0D0D0D;
            left:calc(50% + 3px); top:calc(50% + 3px); transform:translate(-50%, calc(-50% + var(--spot-dy, 0px)));
            transition:transform .55s cubic-bezier(.34,1.7,.64,1); }
/* On the Social side the mark inverts: black circle, pink dot. */
.ssh[data-space="social"] .ssh-help { background:#0D0D0D; }
.ssh[data-space="social"] .ssh-help::after { background:#F23D72; }
/* Scrolling blows the black dot up (or down) and makes it shiver; when the
   scroll stops it drops back with a little bounce. */
.ssh-help.blown::after { transition:transform .1s ease-out; animation:spot-shiver .22s ease-in-out infinite; }
@keyframes spot-shiver {
  0%, 100% { transform:translate(calc(-50% - 1.6px), calc(-50% + var(--spot-dy, 0px))); }
  50%      { transform:translate(calc(-50% + 1.6px), calc(-50% + var(--spot-dy, 0px))); }
}
.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; gap:8px; }
  .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. With the heart moved next to
     the icon (left) and only "?"+avatar on the right, the sides are compact
     enough that the switch can stay dead-centered on phones too. */
  .ssh-words { display:none; }
  .ssh-left { gap:6px; }
  .ssh-right { gap:8px; }
}

/* ── 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; }

/* Inside the app-shell on a touch device the nested frame's scrollbar is the
   only one on screen and reads as a stray white bar; the wrapper has no scroll
   of its own. Desktop keeps it. */
@media (pointer: coarse) {
  html.in-appshell { scrollbar-width: none; -ms-overflow-style: none; }
  html.in-appshell::-webkit-scrollbar { width: 0; height: 0; display: none; }
}

/* Light or dark, Studio only, beside the assistant mark (2026-09-14). A sun in the dark, a moon in the light. */
.ssh-theme { display:none; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; flex:none; padding:0; cursor:pointer;
             border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:#F2F2F5; }
html.studio-space .ssh-theme { display:inline-flex; }
html.studio-space.theme-light .ssh-theme { border-color:rgba(0,0,0,.14); background:rgba(0,0,0,.05); color:#17161A; }
.ssh-theme .moon { display:none; }
html.theme-light .ssh-theme .sun { display:none; }
html.theme-light .ssh-theme .moon { display:block; }
.ssh-guest .ssh-theme { display:none !important; }