/* Canonical family header, based on GoonDesk. Sync with scripts/sync-family-header.cjs. */
.family-theme-desk { --family-rgb: 255,105,206; --family-accent: #ffb5e4; --family-muted: #d0cad9; --family-text: #eee8f2; --family-base: #12111b; --family-glow: #7c5cff20; }
.family-theme-drive { --family-rgb: 112,181,255; --family-accent: #a9d6ff; --family-muted: #aec0d6; --family-text: #eef5ff; --family-base: #0b1523; --family-glow: #237bd020; }
.family-theme-ink { --family-rgb: 167,139,250; --family-accent: #d8caff; --family-muted: #bdb0ce; --family-text: #f3edfc; --family-base: #10091b; --family-glow: #7c3aed20; }
.family-theme-hero { --family-rgb: 255,79,115; --family-accent: #ffb5c5; --family-muted: #d3b8c7; --family-text: #fff0f5; --family-base: #180c17; --family-glow: #9a287520; }
.family-theme-gift { --family-rgb: 255,55,178; --family-accent: #ff6bc7; --family-muted: #d0b8c9; --family-text: #faedf6; --family-base: #251426; --family-secondary: #6c96ff; --family-glow: #3157e42b; }
:is(.family-header.family-header,.family-project-picker) {
  --header-line: #ffffff1c;
  --header-muted: var(--family-muted);
  --header-selected: linear-gradient(115deg,rgba(var(--family-rgb),.125),rgba(var(--family-rgb),.035)),var(--family-base);
  --header-surface: radial-gradient(540px 240px at 5% 0%,rgba(var(--family-rgb),.125),transparent 68%),radial-gradient(480px 230px at 100% 100%,var(--family-glow),transparent 72%),var(--family-base);
  font-family: "Segoe UI",system-ui,-apple-system,sans-serif;
  color: var(--family-text);
}
.family-header.family-header { position: sticky; top: 0; display: block; min-height: 0; padding: 0; border-top: 0; border-bottom: 1px solid var(--header-line); background: var(--header-surface); box-shadow: 0 4px 20px #07050b24; backdrop-filter: none; -webkit-backdrop-filter: none; }
.family-header .family-header-main { position: relative; display: flex; align-items: center; width: calc(100% - 3rem); max-width: 1248px; min-height: 68px; margin: 0 auto; padding: .5rem 0; gap: 1.25rem; min-width: 0; }
.family-header :is(.site-brand-cluster,.site-brand-group,.brand-cluster) { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.family-header :is(.site-brand,.brand) { display: inline-flex; align-items: center; flex-shrink: 0; gap: .65rem; padding: 0; text-decoration: none; }
.family-header :is(.site-brand-mark,.brand-mark) { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none; filter: none; }
.family-header :is(.site-brand-mark,.brand-mark) :is(img,svg) { width: 34px; height: 34px; object-fit: contain; filter: none; }
.family-header .brand:hover :is(.site-brand-mark,.brand-mark) { transform: none; box-shadow: none; filter: none; }
.family-header :is(.brand-copy,.site-brand-copy) { display: grid; gap: 2px; }
.family-header :is(.brand-name,.brand-copy>b,.brand>span>b) { margin: 0; font-family: inherit; font-size: 1.1875rem; font-weight: 650; line-height: 1.2; letter-spacing: -.035em; color: var(--family-text); background: none; }
.family-header :is(.brand-copy>b>span,.brand>span>b>span) { color: var(--family-accent); }
.family-header :is(.site-brand-tagline,.brand-copy small,.brand>span>small) { display: block; color: var(--family-muted); font-family: inherit; font-size: .625rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.family-header :is(.site-header-icon,.header-glyph,.family-icon) { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
.family-header .family-navigation { display: flex; align-items: center; justify-content: flex-end; min-width: 0; margin-left: auto; gap: 1rem; }
.family-header .family-nav-links { display: flex; align-items: center; gap: .25rem; }
.family-header .family-nav-links > :is(a,button),
.family-header :is(.site-login,.site-preregister,.auth-actions button,.top-action-button) { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 36px; padding: .5rem .65rem; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--family-text); box-shadow: none; font: 500 .8125rem/1.4 "Segoe UI",system-ui,sans-serif; text-decoration: none; }
.family-header .family-nav-links > :is(a,button):hover,
.family-header :is(.site-login,.site-preregister,.auth-actions button,.top-action-button):hover:not(:disabled) { border-color: rgba(var(--family-rgb),.25); color: var(--family-accent); background: var(--header-selected); transform: none; }
.family-header .family-nav-links > :is(.active,.is-active),
.family-header :is(.site-login,.auth-actions button:first-child,.top-action-button.primary) { border-color: rgba(var(--family-rgb),.4); color: var(--family-accent); background: var(--header-selected); }
.family-header .family-account { display: flex; align-items: center; min-width: 0; gap: .5rem; padding-left: 1rem; border-left: 1px solid var(--header-line); }
.family-header .family-account.is-signed-out { padding-left: 0; border-left: 0; }
.family-header :is(.family-menu-toggle,.family-patreon,.family-preview-settings,.site-notifications-trigger,.drive-notifications-trigger,.site-logout,.account-chip>button) { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 auto; padding: 0; border: 1px solid var(--header-line); border-radius: 10px; background: #ffffff04; color: var(--family-muted); box-shadow: none; cursor: pointer; text-decoration: none; }
.family-header :is(.family-menu-toggle,.family-patreon,.family-preview-settings,.site-notifications-trigger,.drive-notifications-trigger,.site-logout,.account-chip>button):is(:hover,[aria-expanded=true]) { border-color: rgba(var(--family-rgb),.33); color: var(--family-accent); background: var(--header-selected); }
.family-header .family-menu-toggle.family-menu-toggle { display: none; margin-left: auto; }
.family-header .family-patreon img { display: block; width: 18px; height: 18px; opacity: .85; }
.family-header .family-patreon:hover img { opacity: 1; }
.family-header :is(.site-user,.account-chip>a) { border-color: var(--header-line); background: #ffffff03; }
.family-header :is(.site-user,.account-chip>a):is(:hover,.active,.is-active) { border-color: rgba(var(--family-rgb),.33); background: var(--header-selected); }
.family-header :is(.site-user-copy strong,.account-chip b) { color: var(--family-text); }
.family-header :is(.site-user-copy small b,.account-chip small) { color: var(--family-accent); }
.family-header :is(.site-notifications.has-new .site-notifications-trigger,.drive-notifications.has-new .drive-notifications-trigger) { color: var(--family-accent); border-color: rgba(var(--family-rgb),.33); background: var(--header-selected); }
.family-header :is(.site-notifications-menu,.drive-notifications-menu) { border-color: var(--header-line); background: var(--header-surface); }
.family-header :is(a,button):focus-visible,
.family-project-picker :is(a,button):focus-visible { outline: 2px solid var(--family-accent); outline-offset: 3px; }
/* The picker is shared even on standalone access/maintenance screens. */
.family-project-picker { position: relative; flex: 0 0 auto; }
.family-project-picker .family-picker-trigger { display: grid; place-items: center; place-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--header-line); border-radius: 10px; background: #ffffff04; color: var(--family-muted); box-shadow: none; cursor: pointer; }
.family-project-picker .family-picker-trigger svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.family-project-picker .family-picker-trigger:is(:hover,[aria-expanded=true]) { border-color: rgba(var(--family-rgb),.33); color: var(--family-accent); background: var(--header-selected); }
.family-project-picker .family-picker-menu { position: absolute; top: calc(100% + 12px); left: 0; right: auto; z-index: 290; display: block; width: 350px; max-width: calc(100vw - 48px); max-height: calc(100dvh - 7rem); overflow-y: auto; padding: .5rem; border: 1px solid var(--header-line); border-radius: 14px; background: var(--header-surface); box-shadow: 0 16px 44px #0006; animation: none; }
.family-project-picker .family-picker-menu::before { display: none; }
.family-project-picker .family-picker-label { display: block; padding: .65rem .65rem .75rem; color: var(--family-accent); font-size: .6875rem; font-weight: 600; line-height: 1.5; letter-spacing: .1em; }
.family-project-picker .family-picker-item { position: relative; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: .75rem; min-height: 0; margin: 0; padding: .7rem .65rem; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--family-text); line-height: 1.5; text-decoration: none; }
.family-project-picker .family-picker-item>span { display: grid; gap: 3px; min-width: 0; }
.family-project-picker .family-picker-item b { color: var(--family-text); font: 600 .875rem/1.5 "Segoe UI",system-ui,sans-serif; }
.family-project-picker .family-picker-item small { color: var(--family-muted); font: 400 .75rem/1.5 "Segoe UI",system-ui,sans-serif; }
.family-project-picker .family-picker-item em { padding: 3px 6px; border: 1px solid rgba(var(--family-rgb),.19); border-radius: 999px; color: var(--family-accent); background: rgba(var(--family-rgb),.05); font: 500 .625rem/1.5 "Segoe UI",system-ui,sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.family-project-picker .family-picker-item[aria-disabled=true] { margin-bottom: 0; opacity: 1; border-color: var(--header-line); background: #ffffff03; cursor: default; }
.family-project-picker .family-picker-item[aria-disabled=true] em { color: var(--family-muted); border-color: var(--header-line); background: #ffffff04; }
.family-project-picker .family-picker-item:is(:hover,[aria-current=page]):not([aria-disabled=true]) { border-color: rgba(var(--family-rgb),.25); background: var(--header-selected); }
.family-project-picker .family-picker-icon { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; padding: 0; border: 1px solid #ffffff24; border-radius: 9px; background: #ffffff04; box-shadow: none; }
.family-project-picker .family-picker-icon img { display: block; width: 30px; height: 30px; object-fit: contain; transform: none; filter: none; }
.family-project-picker .family-picker-icon:is([data-project=discord],[data-project=patreon]) img { width: 20px; height: 20px; }
.family-project-picker .family-picker-item>svg { width: 13px; height: 13px; fill: none; stroke: var(--family-accent); stroke-width: 1.8; }
/* Fade the selected gradient as a separate layer: gradient images themselves do not interpolate. */
.family-header .family-nav-links > :is(a,button),
.family-header :is(.site-login,.site-preregister,.auth-actions button,.top-action-button,.family-menu-toggle,.family-patreon,.family-preview-settings,.site-notifications-trigger,.drive-notifications-trigger,.site-logout,.account-chip>button,.site-user,.account-chip>a),
.family-project-picker :is(.family-picker-trigger,.family-picker-item) {
  position: relative;
  isolation: isolate;
  --header-selected: transparent;
}
.family-header .family-nav-links > :is(a,button)::before,
.family-header :is(.site-login,.site-preregister,.auth-actions button,.top-action-button,.family-menu-toggle,.family-patreon,.family-preview-settings,.site-notifications-trigger,.drive-notifications-trigger,.site-logout,.account-chip>button,.site-user,.account-chip>a)::before,
.family-project-picker :is(.family-picker-trigger,.family-picker-item)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(115deg,rgba(var(--family-rgb),.125),rgba(var(--family-rgb),.035)),var(--family-base);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.family-header .family-nav-links > :is(a,button):is(:hover,.active,.is-active)::before,
.family-header :is(.site-login,.site-preregister,.auth-actions button,.top-action-button,.family-menu-toggle,.family-patreon,.family-preview-settings,.site-notifications-trigger,.drive-notifications-trigger,.site-logout,.account-chip>button,.site-user,.account-chip>a):is(:hover,[aria-expanded=true],.active,.is-active):not(:disabled)::before,
.family-header :is(.site-login,.auth-actions button:first-child,.top-action-button.primary)::before,
.family-header :is(.site-notifications.has-new .site-notifications-trigger,.drive-notifications.has-new .drive-notifications-trigger)::before,
.family-project-picker .family-picker-trigger:is(:hover,[aria-expanded=true])::before,
.family-project-picker .family-picker-item:is(:hover,[aria-current=page]):not([aria-disabled=true])::before { opacity: 1; }
.family-header :is(a,button),
.family-project-picker :is(a,button) {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease, filter 180ms ease, transform 180ms ease;
}
.family-header :is(a,button) :is(svg,strong,b,small) { transition: color 180ms ease; }
.family-header :is(.family-patreon img,.site-brand-mark,.brand-mark) {
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
/* Featured destinations retain native links and the independent current-app marker. */
.family-project-picker .family-picker-item.family-picker-item[data-featured=true] { --family-rgb:255,107,199; --family-base:#241728; --family-accent:#ff9edb; grid-template-columns:40px minmax(0,1fr) auto; margin-bottom:.4rem; border-color:#ff6bc745; border-radius:12px; background:linear-gradient(120deg,#ff6bc71b,#6c96ff12),#241728; box-shadow:inset 0 1px #ffb5e410; }
.family-project-picker .family-picker-item[data-featured=true]::before { background:linear-gradient(120deg,#ff6bc72b,#6c96ff20),#241728; }
.family-project-picker .family-picker-item[data-featured=true]:hover { border-color:#ff6bc780; box-shadow:inset 0 1px #ffb5e41a,0 4px 16px #0002; }
.family-project-picker .family-picker-item[data-featured=true] b { color:#ffe4f5; }
.family-project-picker .family-picker-item[data-featured=true] small { color:#d2bfd5; }
.family-project-picker .family-picker-item[data-featured=true] .family-picker-icon { width:40px; height:40px; border-radius:11px; border-color:#ff6bc72c; background:#ff6bc708; }
.family-project-picker .family-picker-item[data-featured=true] .family-picker-icon img { width:38px; height:38px; }
@media(max-width:560px) { .family-project-picker .family-picker-item.family-picker-item[data-featured=true] { grid-template-columns:40px minmax(0,1fr); } }
@media(max-width:1080px) {
  .family-header .family-header-main { gap: 1rem; }
  .family-header .family-menu-toggle.family-menu-toggle { display: inline-flex; }
  .family-header .family-navigation { position: absolute; top: calc(100% + .5rem); left: 0; right: 0; display: none; visibility: visible; opacity: 1; transform: none; margin: 0; padding: 1rem; flex-direction: column; align-items: stretch; gap: 1rem; border: 1px solid var(--header-line); border-radius: 14px; background: var(--header-surface); box-shadow: 0 16px 40px #0005; backdrop-filter: none; transition: none; }
  .family-header .family-navigation.is-open { display: flex; pointer-events: auto; }
  .family-header .family-nav-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; }
  .family-header .family-nav-links > :is(a,button) { padding: .65rem .5rem; }
  .family-header .family-account { border-left: 0; border-top: 1px solid var(--header-line); padding: 1rem 0 0; flex-wrap: wrap; gap: .75rem; }
  .family-header .family-account.is-signed-out { border: 0; padding: 0; }
  .family-project-picker .family-picker-menu { position: fixed; top: 76px; left: 24px; width: min(400px,calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 92px); }
}
@media(max-width:560px) {
  .family-header .family-header-main { width: calc(100% - 2rem); min-height: 64px; gap: .5rem; }
  .family-header :is(.site-brand-cluster,.site-brand-group,.brand-cluster) { gap: .5rem; }
  .family-header :is(.site-brand,.brand) { gap: .4rem; }
  .family-header :is(.brand-name,.brand-copy>b,.brand>span>b) { font-size: 1.0625rem; }
  .family-header :is(.site-brand-mark,.brand-mark), .family-header :is(.site-brand-mark,.brand-mark) :is(img,svg) { width: 32px; height: 32px; }
  .family-header .family-navigation { padding: .75rem; }
  .family-header .family-nav-links > :is(a,button) { flex-direction: column; gap: .35rem; font-size: .75rem; }
  .family-project-picker .family-picker-menu { top: 72px; left: 16px; width: calc(100vw - 32px); max-height: calc(100dvh - 88px); }
  .family-project-picker .family-picker-item { grid-template-columns: 32px minmax(0,1fr); gap: .25rem .65rem; }
  .family-project-picker .family-picker-item>em { grid-column: 2; justify-self: start; }
  .family-project-picker .family-picker-item>svg { grid-column: 2; justify-self: end; }
  .family-project-picker .family-picker-item small { font-size: .6875rem; }
}
@media(prefers-reduced-motion:reduce) { :is(.family-header,.family-project-picker) *, :is(.family-header,.family-project-picker) *::before { animation: none!important; transition: none!important; } }

.family-header :is(.site-notifications-badge,.drive-notifications-trigger>span) { background: rgba(var(--family-rgb),.7); color: var(--family-text); border-color: var(--family-base); }

/* A cross-app destination is a link hint, not a new-tab instruction. */
.family-header a[data-family-app]::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  background: #ff6bc7;
  opacity: 1;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M5 4h7v7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M5 4h7v7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Selection previews affect the header only. Native app content and account controls stay mounted. */
.family-header[data-family-selected] :is(.brand-cluster,.site-brand-cluster,.site-brand-group) > .brand:not(.family-preview-brand),
.family-header[data-family-selected] .family-navigation > .family-nav-links:not(.family-preview-links),
.family-header[data-family-selected] :is(.site-settings,.drive-settings) { display:none!important; }
.family-selection-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.family-header .family-preview-links { order:-1; }
.family-header .family-preview-brand .brand-mark { flex:0 0 auto; }
.family-header[data-family-selected] .family-project-picker { --family-rgb:inherit; --family-accent:inherit; --family-muted:inherit; --family-text:inherit; --family-base:inherit; --family-glow:inherit; }

.family-header[data-family-selected="desk"] { --family-rgb: 255,105,206; --family-accent: #ffb5e4; --family-muted: #d0cad9; --family-text: #eee8f2; --family-base: #12111b; --family-glow: #7c5cff20; }
.family-header[data-family-selected="drive"] { --family-rgb: 112,181,255; --family-accent: #a9d6ff; --family-muted: #aec0d6; --family-text: #eef5ff; --family-base: #0b1523; --family-glow: #237bd020; }
.family-header[data-family-selected="ink"] { --family-rgb: 167,139,250; --family-accent: #d8caff; --family-muted: #bdb0ce; --family-text: #f3edfc; --family-base: #10091b; --family-glow: #7c3aed20; }
.family-header[data-family-selected="hero"] { --family-rgb: 255,79,115; --family-accent: #ffb5c5; --family-muted: #d3b8c7; --family-text: #fff0f5; --family-base: #180c17; --family-glow: #9a287520; }
.family-header[data-family-selected="gift"] { --family-rgb: 255,55,178; --family-accent: #ff6bc7; --family-muted: #d0b8c9; --family-text: #faedf6; --family-base: #251426; --family-secondary: #6c96ff; --family-glow: #3157e42b; }

.family-header .family-preview-settings>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Community links form a separate group after the project entries. */
.family-project-picker .family-picker-item:not([target="_blank"]) + .family-picker-item[target="_blank"] { margin-top:.75rem; }
.family-project-picker .family-picker-item:not([target="_blank"]) + .family-picker-item[target="_blank"]::after { content:""; position:absolute; top:-.4rem; left:.65rem; right:.65rem; height:1px; background:var(--header-line); pointer-events:none; }