/* Seed to Swan: the brand bar shared by every page (studios, home, login).
   Uses each page's own tokens (--page, --ink, --muted, --line, --display), with fallbacks. */
.ss-bar{width:100%;max-width:var(--page,1180px);margin:0 auto;padding:12px 16px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ss-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink,#fff);text-decoration:none;border-radius:8px;min-height:32px}
.ss-brand img{display:block;width:30px;height:30px}
.ss-word{font-family:var(--display,"Bricolage Grotesque",system-ui,sans-serif);font-weight:800;font-size:18px;letter-spacing:-.015em;line-height:1;white-space:nowrap}
.ss-word span{font-weight:500;color:var(--muted,#aab0e6)}
.ss-links{display:flex;align-items:center;gap:8px}
.ss-login{color:var(--ink,#fff);text-decoration:none;font-weight:600;font-size:13.5px;line-height:1.2;padding:8px 16px;border-radius:999px;border:1px solid var(--line,rgba(255,255,255,.12));white-space:nowrap}
.ss-login:hover{background:rgba(255,255,255,.08)}
.ss-app{display:inline-flex;align-items:center;gap:6px;color:var(--gold,#ffd27a);text-decoration:none;font-weight:700;font-size:13.5px;line-height:1.2;padding:8px 14px 8px 11px;border-radius:999px;border:1px solid rgba(255,210,122,.45);white-space:nowrap}
.ss-app:hover{background:rgba(255,210,122,.1)}
.ss-app svg{display:block;width:16px;height:16px;flex:none}
.ss-app-short{display:none}
.ss-bar + .top{padding-top:10px}
@media (max-width:700px){
  .ss-bar{padding-top:10px}
  .ss-brand img{width:28px;height:28px}
  .ss-word{font-size:17px}
}
@media (max-width:520px){
  .ss-app-long{display:none}
  .ss-app-short{display:inline}
}
@media (max-width:359px){
  .ss-links{gap:6px}
  .ss-app,.ss-login{padding:8px 11px}
  .ss-app{gap:4px}
}

/* "Seed to Swan app" banner on phones: install.js puts it above the brand bar */
.ss-appbar{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 4px;background:#0c0d3d;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;font-family:var(--body,"Figtree",system-ui,sans-serif)}
.ss-appbar-x{flex:none;width:34px;height:44px;margin:0;padding:0;border:0;background:none;color:var(--muted,#aab0e6);font:400 24px/1 system-ui,sans-serif;cursor:pointer}
.ss-appbar img{flex:none;display:block;width:44px;height:44px;border-radius:11px}
.ss-appbar-text{flex:1;min-width:0;display:grid;gap:1px;line-height:1.25}
.ss-appbar-text b{font-size:14.5px;font-weight:700}
.ss-appbar-text span{font-size:12.5px;color:var(--muted,#aab0e6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-appbar-get{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:8px 20px;border-radius:999px;background:var(--gold,#ffd27a);color:var(--gold-ink,#2b1c00);font-weight:800;font-size:14px;text-decoration:none}

/* inside the installed app nobody needs to be told to get it */
.ss-in-app .ss-app,.ss-in-app .ss-get-app{display:none !important}
@media (display-mode:standalone){
  .ss-app,.ss-get-app{display:none !important}
}