/* Fireside showcase — app shell (masthead, tab nav, layout) */

.bg-glow{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(56vw 40vw at 84% -8%, rgba(255,0,200,.07), transparent 62%),
    radial-gradient(60vw 44vw at 6% -6%, rgba(255,107,53,.10), transparent 60%);
}

/* ---------- masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:24px;
  padding:0 22px; height:60px;
  background:var(--glass); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; flex:0 0 auto; }
.brand-mark{ width:27px; height:27px; display:block; filter:drop-shadow(0 1px 6px rgba(255,107,53,.38)); }
.brand-id{ display:flex; align-items:center; gap:9px; font-size:13.5px; white-space:nowrap; }
.brand-client{ color:var(--barbie-soft); font-weight:600; font-family:var(--mono); font-size:12px; letter-spacing:.02em; }
.brand-sep{ color:var(--n-5); }
.brand-study{ color:var(--n-2); font-weight:500; }

.tabnav{ position:relative; display:flex; gap:2px; margin:0 auto; padding:4px;
  background:var(--ink-4); border:1px solid var(--line); border-radius:999px; }
.tabnav-pill{ position:absolute; top:4px; left:0; height:calc(100% - 8px); border-radius:999px;
  background:linear-gradient(180deg, rgba(255,107,53,.22), rgba(255,107,53,.12));
  border:1px solid rgba(255,107,53,.5); box-shadow:0 2px 14px rgba(255,107,53,.22);
  transition:transform .42s var(--ease), width .42s var(--ease); width:0; z-index:0; }
.tab-link{ position:relative; z-index:1; text-decoration:none; color:var(--n-3);
  font-size:13.5px; font-weight:600; letter-spacing:.01em; padding:8px 18px; border-radius:999px;
  transition:color .3s var(--ease); white-space:nowrap; }
.tab-link:hover{ color:var(--n-1); }
.tab-link.active{ color:var(--cream); }

.masthead-right{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.share-btn{ display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--cream);
  background:var(--ink-3); border:1px solid var(--line-3); border-radius:9px; padding:7px 13px;
  transition:border-color .3s, background .3s, transform .2s var(--ease); }
.share-btn:hover{ border-color:var(--ember); background:var(--ink-2); }
.share-btn:active{ transform:scale(.97); }

/* theme toggle */
.theme-btn{ display:grid; place-items:center; width:34px; height:34px; flex:none; cursor:pointer;
  color:var(--n-2); background:var(--ink-3); border:1px solid var(--line-3); border-radius:9px;
  transition:border-color .3s, background .3s, color .3s, transform .2s var(--ease); }
.theme-btn:hover{ border-color:var(--ember); color:var(--cream); background:var(--ink-2); }
.theme-btn:active{ transform:scale(.94); }
.theme-btn svg{ width:16px; height:16px; }
.theme-btn .t-sun{ display:block; } .theme-btn .t-moon{ display:none; }
:root[data-theme="light"] .theme-btn .t-sun{ display:none; }
:root[data-theme="light"] .theme-btn .t-moon{ display:block; }

/* ---------- view / tabs ---------- */
#view{ position:relative; z-index:1; }
.tab{ display:none; }
.tab.is-active{ display:block; animation:tabin .5s var(--ease) both; }
@keyframes tabin{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* shared content width helper for contained tabs (Results / Interviews / Chat) */
.tab-wrap{ max-width:1180px; margin:0 auto; padding:40px 40px 90px; }

/* ---------- boot ---------- */
.boot{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; gap:12px;
  background:var(--ink); color:var(--n-2); font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  transition:opacity .5s ease; }
.boot.hidden{ opacity:0; pointer-events:none; }
.boot-mark{ width:30px; height:30px; border-radius:8px; box-shadow:var(--glow); animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(.92);} 50%{ opacity:1; transform:scale(1.04);} }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .masthead{ gap:12px; padding:0 14px; height:auto; min-height:56px; flex-wrap:wrap; }
  .brand-study{ display:none; }
  .tabnav{ order:3; width:100%; margin:0 0 10px; overflow-x:auto; justify-content:flex-start; }
  .masthead-right{ margin-left:auto; }
  .tab-wrap{ padding:28px 18px 70px; }
}
@media (prefers-reduced-motion: reduce){
  .tab.is-active{ animation:none; } .tabnav-pill{ transition:none; } .boot-mark{ animation:none; }
}
/* static mode (?nomotion=1) — everything lands in its final state instantly */
html.nomotion *, html.nomotion *::before, html.nomotion *::after{
  animation:none !important; transition:none !important;
}