/* The bar on top (static/navbar.js, app/templates/base.html), in the grammar of vaes.studio's header: a frosted
   bar of mono capitals on the left, the logo in the centre, the cream pill on the right. Measured on the live site
   (15 Oct 2026): bar 64px, 8px padding, 8px gap, radius 8px, blur 20px, white at 10% (dark) / black at 5% (its
   light menu); items 48px pills, Inconsolata 14px/500, uppercase, letter-spacing .025em; logo 119px wide (90 on a
   phone); the pill #FFFCE0 with #0B0B09 text, as tall as the bar. Here the bar is 52px (items 40) to suit a work
   tool, the logo 96px; the colours are the app's own tokens (--cream is the site's pill colour).
   The band behind it is frosted too, so the planning scrolls under it softly instead of under bare text.
   html.vn-on makes room for it. Uses the artifact's tokens (planning.html, pages.css). */
:root{--vn-h:76px;--vn-glass:rgba(255,255,255,.10);--vn-hover:rgba(201,207,212,.16);--vn-cur:rgba(255,255,255,.12)}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--vn-glass:rgba(11,11,9,.05);--vn-hover:rgba(11,11,9,.05);--vn-cur:rgba(11,11,9,.08);--vn-pill-edge:inset 0 0 0 1px rgba(11,11,9,.16)}
}
:root[data-theme="light"]{--vn-glass:rgba(11,11,9,.05);--vn-hover:rgba(11,11,9,.05);--vn-cur:rgba(11,11,9,.08);--vn-pill-edge:inset 0 0 0 1px rgba(11,11,9,.16)}

html.vn-on body{padding-top:var(--vn-h)}
html.vn-on{scroll-padding-top:calc(var(--vn-h) + env(safe-area-inset-top,0px))}

.vn{position:fixed;top:0;left:0;right:0;z-index:14;padding:12px 16px;color:var(--ink);font-family:var(--body)}
/* the band's frost on a layer of its own: a backdrop-filter on .vn itself would cut the phone menu, which hangs
   below the bar, off from the page behind it */
.vn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.vn-in{max-width:1920px;margin:0 auto;height:52px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
.vn-start{display:flex;align-items:center;min-width:0}
.vn-menu{display:none}
.vn-nav{display:flex;align-items:center;gap:4px;height:52px;padding:6px;border-radius:8px;background:var(--vn-glass)}
.vn-item,.vn-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-family:var(--mono);font-size:14px;
  font-weight:500;letter-spacing:.025em;line-height:1;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.vn-item{height:40px;padding:0 18px;color:var(--ink)}
.vn-item:hover{background:var(--vn-hover)}
.vn-item[aria-current="page"]{background:var(--vn-cur)}
.vn-logo{display:block;color:var(--ink);border-radius:6px;padding:4px}
/* The wordmark file is vaes.studio's own (white fills), used as a mask so it takes the theme's text colour. */
.vn-mark{display:block;width:96px;height:26px;background:currentColor;
  -webkit-mask:url("/static/vaes-wordmark.svg") center/contain no-repeat;mask:url("/static/vaes-wordmark.svg") center/contain no-repeat}
.vn-end{display:flex;justify-content:flex-end;min-width:0}
/* light: cream on the light page needs an edge to read as a button */
.vn-pill{height:52px;padding:0 28px;background:var(--cream);color:#0B0B09;box-shadow:var(--vn-pill-edge,none)}
.vn-pill:hover{background:color-mix(in srgb,var(--cream),#0B0B09 7%)}
.vn :focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Phones, as on vaes.studio: a menu button left of the logo; the items open as a list under the bar. */
@media (max-width:760px){
  :root{--vn-h:64px}
  .vn{padding:10px 16px}
  .vn-in{height:44px;gap:8px}
  .vn-menu{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:44px;height:44px;padding:0;
    border:0;border-radius:8px;background:var(--vn-glass);color:var(--ink);cursor:pointer}
  .vn-menu span{display:block;width:20px;height:1px;background:currentColor}
  .vn.open .vn-menu span:first-child{transform:translateY(4px) rotate(45deg)}
  .vn.open .vn-menu span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .vn-nav{display:none}
  .vn.open .vn-nav{display:flex;position:absolute;top:calc(100% - 2px);left:16px;flex-direction:column;align-items:stretch;gap:2px;
    height:auto;min-width:200px;padding:6px;border-radius:8px;
    background:linear-gradient(var(--vn-glass),var(--vn-glass)),color-mix(in srgb,var(--bg) 94%,transparent);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--line)}
  .vn.open .vn-item{justify-content:flex-start;height:44px}
  .vn-mark{width:80px;height:22px}
  .vn-pill{height:40px;padding:0 14px;font-size:12px}
}
@media (prefers-reduced-motion:no-preference){
  .vn-item,.vn-pill{transition:background-color .15s cubic-bezier(.22,1,.36,1)}
  .vn-menu span{transition:transform .2s cubic-bezier(.22,1,.36,1)}
}

/* The modal Users and Account open in (static/modal.js); its content, in a shadow root, is styled by pages.css.
   A full-height sheet on phones. */
dialog.vm{border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);padding:0;
  width:min(640px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain}
dialog.vm.vm-wide{width:min(1120px,calc(100vw - 32px))}
dialog.vm::backdrop{background:rgba(5,5,4,.72)}
@media (max-width:760px){
  dialog.vm,dialog.vm.vm-wide{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
}
@media (prefers-reduced-motion:no-preference){
  dialog.vm[open]{animation:vm-in .18s cubic-bezier(.22,1,.36,1)}
  @keyframes vm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}