/* ═══════════════════════════════════════════════════════
   Schematic — Shared site navigation (single source of truth)

   3 variants (BEM modifiers):
     .site-nav--marketing  — full nav: logo + 4 center links + theme/lang + login pill + signup CTA
     .site-nav--legal      — minimal: logo + back-home + theme/lang
     .site-nav--auth       — minimal: logo + back-landing + theme/lang

   Tokens read from each page's :root and [data-theme="dark"] block:
     --bg, --bg2, --surface, --ink, --ink2, --ink3, --accent, --border

   Active link marker: aria-current="page"  (WAI-ARIA, no class wars).
   Theme icon swap: pure CSS via [data-theme="dark"] selector (no JS textContent).
   Mobile (≤768px): marketing variant collapses center links into hamburger.
   ═══════════════════════════════════════════════════════ */

.site-nav{
  position:relative;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:16px 60px;
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);
  font-family:'DM Sans','SF Pro Text',sans-serif;
}

/* ─── Logo ─── */
.site-nav__logo{
  display:flex;align-items:center;gap:10px;
  font-family:'Bebas Neue',sans-serif;
  font-size:22px;letter-spacing:2px;
  color:var(--ink);text-decoration:none;
  transition:color .2s;
  flex-shrink:0;
}
.site-nav__logo:hover{color:var(--accent);}
.site-nav__logo-mark{width:28px;height:28px;flex-shrink:0;display:block;}
.site-nav__logo-mark svg{width:100%;height:100%;display:block;}
.site-nav__logo-mark .lm-blue{fill:var(--accent);}
.site-nav__logo-mark .lm-dark{fill:var(--ink);}

/* ─── Center links (marketing only) ─── */
.site-nav__center{display:flex;gap:4px;align-items:center;}
.site-nav__center a{
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);text-decoration:none;
  padding:8px 12px;
  border:1px solid transparent;
  transition:color .2s,border-color .2s,background .2s;
}
.site-nav__center a:hover{color:var(--accent);}
.site-nav__center a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.site-nav__center a[aria-current="page"]{
  color:var(--accent);
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  font-weight:500;
}

/* ─── Right cluster (theme, lang, login, cta, back) ─── */
.site-nav__right{display:flex;gap:8px;align-items:center;flex-shrink:0;}

/* Icon buttons (theme/lang) — uniform pill, monospaced, bordered */
.site-nav__icon-btn{
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:none;
  border:1px solid var(--border);
  padding:0 12px;
  color:var(--ink2);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:34px;
  line-height:1;
  transition:color .2s,border-color .2s,background .2s;
}
.site-nav__icon-btn:hover{color:var(--accent);border-color:var(--accent);}
.site-nav__icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.site-nav__icon-btn svg{width:14px;height:14px;display:block;color:currentColor;}

/* Theme icon — CSS swap based on [data-theme]; no JS textContent involved */
.site-nav__icon-btn .icon-sun{display:none;}
.site-nav__icon-btn .icon-moon{display:block;}
[data-theme="dark"] .site-nav__icon-btn .icon-sun{display:block;}
[data-theme="dark"] .site-nav__icon-btn .icon-moon{display:none;}

/* Login pill — dark on light bg, accent on hover. The text is swapped
   to "Привіт, ${name}" by marketing-auth-aware.js when the user is
   logged in, so we clip with ellipsis to keep the header stable for
   long display names (was overflowing on mobile). */
.site-nav__login{
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:0 14px;height:34px;
  display:inline-flex;align-items:center;
  background:var(--ink);color:var(--bg);
  border:1px solid var(--ink);
  text-decoration:none;
  max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s;
}
.site-nav__login:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.site-nav__login:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Logged-in variant on marketing pages — built by
   marketing-auth-aware.js. Two presentations:

     Desktop (>768px): pill that matches the old .site-nav__login
       look ("Привіт, name" on dark background). Avatar circle is
       hidden. Click opens the dropdown.

     Mobile (≤768px): avatar circle only (greeting hidden). Click
       opens the dropdown.

   The dropdown itself (.site-nav__dropdown*) is the same on both
   and matches the product-pages pattern. */
.site-nav__login-trigger{
  /* desktop pill — mirrors .site-nav__login */
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:0 14px;height:34px;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--bg);
  border:1px solid var(--ink);
  cursor:pointer;
  max-width:220px;overflow:hidden;
  transition:background .2s,color .2s,border-color .2s;
}
.site-nav__login-trigger:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.site-nav__login-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.site-nav__login-greeting{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
/* Avatar lives inside the trigger but stays out of sight on
   desktop — only the greeting pill is visible there. */
.site-nav__login-avatar{
  width:32px;height:32px;display:none;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border-radius:50%;
  font-family:'DM Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:0;text-transform:none;flex-shrink:0;
  transition:filter .12s,box-shadow .12s;
}

/* Signup CTA — primary, filled accent, slight lift */
.site-nav__cta{
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:0 14px;height:34px;
  display:inline-flex;align-items:center;
  background:var(--accent);color:#fff;
  border:1px solid var(--accent);
  text-decoration:none;font-weight:500;
  transition:filter .2s,transform .2s,box-shadow .2s;
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 20%,transparent);
}
.site-nav__cta:hover{filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 30%,transparent);}
.site-nav__cta:active{transform:translateY(0);}
.site-nav__cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* Back link (legal + auth) — subtle, text-only */
.site-nav__back{
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);text-decoration:none;
  padding:0 12px;height:34px;
  display:inline-flex;align-items:center;
  transition:color .2s;
}
.site-nav__back:hover{color:var(--accent);}
.site-nav__back:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Variant: legal + auth — hide center cluster (links don't apply) */
.site-nav--legal .site-nav__center,
.site-nav--auth  .site-nav__center{display:none;}

/* Status badge (used on _gate.html) — sits between logo and right cluster */
.site-nav__status{
  font-family:'DM Mono',monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ai);
  border:1px solid var(--ai);
  padding:4px 10px;
  margin-right:auto;margin-left:16px;
  white-space:nowrap;
}

/* ─── Variant: product (post-login app pages) ──────────
   Sticky-to-top so nav stays accessible during long lists.
   Hides center cluster, adds breadcrumb slot between logo and right. */
.site-nav--product{
  position:sticky;top:0;
}
.site-nav--product .site-nav__center{display:none;}

/* Visual separator between logo and breadcrumb */
.site-nav__sep{
  width:1px;height:20px;background:var(--border);
  flex-shrink:0;
}

/* Breadcrumb — shown between logo and right cluster on product variant */
.site-nav__crumb{
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.04em;
  color:var(--ink3);
  display:flex;align-items:center;gap:8px;
  margin-right:auto; /* push right cluster to far right */
}
.site-nav__crumb a{
  color:var(--ink2);text-decoration:none;
  transition:color .2s;
}
.site-nav__crumb a:hover{color:var(--accent);}
.site-nav__crumb-sep{color:var(--border2);user-select:none;}
.site-nav__crumb-cur{color:var(--ink);}

@media (max-width:560px){
  .site-nav--product .site-nav__crumb{display:none;}
}

/* ─── Shared footer (marketing + product) ──────────────
   Used on every shell-having page. Page-level <footer> uses .site-footer. */
.site-footer{
  position:relative;z-index:1;
  padding:24px 60px;
  border-top:1px solid var(--border);
  font-family:'DM Mono',monospace;font-size:10px;
  color:var(--ink3);
  display:flex;justify-content:space-between;align-items:center;
  letter-spacing:.05em;
  gap:16px;
}
.site-footer__links{
  display:flex;gap:18px;flex-wrap:wrap;
}
.site-footer__links a{
  color:var(--ink3);text-decoration:none;
  transition:color .15s;
}
.site-footer__links a:hover{color:var(--accent);}

@media (max-width:560px){
  .site-footer{padding:18px 24px;flex-direction:column;text-align:center;gap:8px;}
  .site-footer__links{justify-content:center;gap:14px;}
}

/* ─── Mobile toggle (hamburger) — hidden by default, shown ≤768px on marketing ─── */
.site-nav__toggle{
  display:none;
  background:none;
  border:1px solid var(--border);
  padding:0 10px;
  height:34px;width:38px;
  cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
}
.site-nav__toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.site-nav__toggle span{
  display:block;width:16px;height:1.5px;background:var(--ink);
  transition:transform .25s,opacity .25s;
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(4.5px) rotate(45deg);}
.site-nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.site-nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg);}

/* ─── Responsive (≤768px) ─── */
@media (max-width:768px){
  .site-nav{padding:12px 20px;gap:8px;flex-wrap:wrap;}
  .site-nav__logo{font-size:18px;letter-spacing:1.4px;gap:8px;}
  .site-nav__logo-mark{width:24px;height:24px;}

  /* Marketing: hamburger pattern — show toggle, hide center until expanded */
  .site-nav--marketing .site-nav__toggle{display:flex;}
  .site-nav--marketing .site-nav__center{
    display:none;
    flex:1 0 100%;
    order:3;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--border);
  }
  .site-nav--marketing .site-nav__center.is-open{display:flex;}
  .site-nav--marketing .site-nav__center a{
    padding:14px 6px;
    border:none;
    border-bottom:1px solid var(--border);
    text-align:left;
    background:transparent;
    font-size:12px;
  }
  .site-nav--marketing .site-nav__center a:last-child{border-bottom:none;}
  .site-nav--marketing .site-nav__center a[aria-current="page"]{
    background:transparent;
    border-color:var(--accent);
  }

  /* Right cluster — compact actions */
  .site-nav__right{gap:6px;}
  .site-nav__icon-btn{padding:0 8px;min-width:34px;}
  .site-nav__login,.site-nav__cta{padding:0 10px;font-size:10px;}
  .site-nav__login{max-width:140px;}
  /* Marketing auth chip on mobile: collapse the pill into a bare
     avatar circle. Greeting hidden; trigger loses its dark
     background, border and padding so only the circle shows. */
  .site-nav__login-trigger{
    background:transparent;color:var(--ink2);border:none;
    padding:0;height:auto;
    text-transform:none;letter-spacing:0;
    max-width:none;
  }
  .site-nav__login-trigger:hover{background:transparent;border:none;color:var(--ink2);}
  .site-nav__login-trigger:hover .site-nav__login-avatar{
    filter:brightness(1.1);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
  }
  .site-nav__login-avatar{display:inline-flex;}
  .site-nav__login-greeting{display:none;}
}

@media (max-width:420px){
  /* On smallest screens, drop signup CTA from nav (sticky page-level CTAs remain) */
  .site-nav--marketing .site-nav__cta{display:none;}
  .site-nav__logo{font-size:16px;}
  .site-nav__login{padding:0 9px;}
}

/* ─── User avatar + dropdown (product pages) ─────────────
   Shared by projects.html (and ready for any future product page
   that uses .site-nav--product). Showing initials in a circle
   instead of the full display name keeps the header width stable
   regardless of how long the name is. */
.site-nav__user{position:relative;display:inline-flex;align-items:center;flex-shrink:0;}
.site-nav__avatar{
  width:32px;height:32px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent,#1a46e5);color:#fff;border:1px solid var(--accent,#1a46e5);
  font-family:'DM Mono',monospace;font-size:12px;font-weight:600;
  cursor:pointer;border-radius:50%;
  transition:filter .12s,transform .12s,box-shadow .12s;
}
.site-nav__avatar:hover{filter:brightness(1.1);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}
.site-nav__avatar:active{transform:scale(0.96);}
.site-nav__avatar:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* Google-avatar img mode — when SchematicAuth.renderUserAvatar inserts
   an <img> instead of the initial-letter span. Drop the solid accent
   background + border tint so the avatar fills edge-to-edge. */
.site-nav__avatar.user-avatar--has-img{
  background:transparent;border-color:var(--border,#c8c3b8);padding:0;overflow:hidden;
}
.site-nav__avatar .user-avatar-img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}

.site-nav__dropdown{
  position:absolute;top:calc(100% + 6px);right:0;
  background:var(--surface2,var(--surface,#f8f5ee));
  border:1px solid var(--border2,var(--border,#c8c3b8));
  min-width:200px;padding:4px;
  box-shadow:0 4px 12px rgba(15,17,23,.12),0 12px 32px rgba(15,17,23,.08);
  border-radius:0;z-index:300;
}
.site-nav__dropdown[hidden]{display:none;}
.site-nav__dropdown-name{
  padding:8px 12px 2px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;
  color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;
}
.site-nav__dropdown-email{
  padding:0 12px 8px;font-family:'DM Mono',monospace;font-size:10px;color:var(--ink3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;
  border-bottom:1px solid var(--border);margin-bottom:4px;
}
.site-nav__dropdown-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 12px;font-size:12px;font-family:'DM Sans',sans-serif;
  background:transparent;border:none;cursor:pointer;color:var(--ink2);
  transition:background .12s,color .12s;
}
.site-nav__dropdown-item:hover{background:var(--bg2);color:var(--ink);}
.site-nav__dropdown-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.site-nav__dropdown-item--danger{color:var(--accent2,#e5390a);}
.site-nav__dropdown-item--danger:hover{background:color-mix(in srgb,var(--accent2) 8%,transparent);color:var(--accent2);}
.site-nav__dropdown-sep{height:1px;background:var(--border);margin:4px 0;}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .site-nav *, .site-nav *::before, .site-nav *::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}