/* Shared site header — self-contained (own --h-* tokens, scoped to header.top).
   Safe to load alongside style.css (app) or landing.css (marketing): it only
   styles the header, so it never disturbs page content. */

/* brand mark — used in headers and the marketing footer */
.brand{display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  font-weight:700; font-size:1.14rem; letter-spacing:-.01em}
.brand .tick{width:23px; height:23px; border-radius:6px; flex:none; display:grid;
  place-items:center; font-size:13px; font-weight:700; background:#D4225C; color:#fff}
@media (prefers-color-scheme:dark){.brand .tick{background:#F0578A; color:#1A0A11}}

header.top{
  --h-ink:#1B1720; --h-ink-2:#655E6C; --h-ink-3:#968E9C;
  --h-accent:#D4225C; --h-accent-ink:#fff;
  --h-border:#EAE4DD; --h-border-strong:#DAD1C8; --h-surface-2:#F4F0EA; --h-bg:#FBF9F6;
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--h-bg) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--h-border);
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){header.top{
  --h-ink:#F2ECEA; --h-ink-2:#ADA3AF; --h-ink-3:#7C7484;
  --h-accent:#F0578A; --h-accent-ink:#1A0A11;
  --h-border:#2C2632; --h-border-strong:#3A3340; --h-surface-2:#241F2C; --h-bg:#131019;
}}
header.top .wrap{max-width:1060px; margin:0 auto; padding:0 24px; display:flex;
  align-items:center; gap:16px; height:62px}
header.top .brand{color:var(--h-ink)}
header.top nav.links{display:flex; align-items:center; gap:20px; margin:0 0 0 8px;
  padding:0; background:none; border:none; flex-wrap:wrap}
header.top nav.links a{color:var(--h-ink-2); text-decoration:none; font-size:.92rem; font-weight:500; padding:0}
header.top nav.links a:hover{color:var(--h-ink)}
header.top .cta{margin-left:auto; display:flex; align-items:center; gap:14px}
header.top .cta a.signin{color:var(--h-ink-2); text-decoration:none; font-size:.92rem; font-weight:500}
header.top .cta a.signin:hover{color:var(--h-ink)}
header.top .nav-user{color:var(--h-ink-3); font-size:.84rem; font-weight:400; margin:0}
header.top .nav-user a{color:var(--h-ink-2); text-decoration:none}
header.top .nav-user a:hover{color:var(--h-ink)}
header.top .credits{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.82rem;
  color:var(--h-ink); border:1px solid var(--h-border-strong); border-radius:999px;
  padding:5px 11px; text-decoration:none; white-space:nowrap}
header.top .credits:hover{border-color:var(--h-accent)}
header.top .btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font:600 .9rem/1 "Instrument Sans",sans-serif; padding:9px 15px; border-radius:9px;
  text-decoration:none; border:1px solid transparent}
header.top .btn-primary{background:var(--h-accent); color:var(--h-accent-ink)}
header.top .btn-primary:hover{filter:brightness(1.05)}
header.top .btn-ghost{background:transparent; color:var(--h-ink); border-color:var(--h-border-strong)}
header.top .btn-ghost:hover{background:var(--h-surface-2)}
header.top form.inline{display:inline; margin:0}
header.top button.link{background:none; border:none; cursor:pointer; padding:0;
  color:var(--h-ink-2); font:500 .92rem/1 "Instrument Sans",sans-serif}
header.top button.link:hover{color:var(--h-ink)}
@media (max-width:860px){header.top nav.links{display:none}}