/* ============================================================
   VoxenMC navbar - the one navbar, on every page

   This is the single source for the site header. It is loaded by the
   main pages and by all the tool pages, and voxen-nav.js renders the
   markup into both, so there is one bar to change instead of forty
   copies drifting apart.

   Everything is vxn- prefixed and every colour is a local token,
   because the tool pages carry their own stylesheets with their own
   --bg, --panel and --acc. Nothing here reads or writes those.

   The bar is one thick slab across the window: a lit line along its
   top, a solid side underneath it, and a soft shadow below that. The
   links are smaller slabs sitting on it, and the page you are on is
   the green one.
   ============================================================ */

:root,
[data-theme="dark"]{
  --vxn-bar:      #2a2d34;   /* the slab the bar is cut from */
  --vxn-bar-2:    #33373f;   /* hover */
  --vxn-deep:     #141519;   /* a well cut into it */
  --vxn-edge:     #0e0f12;   /* the side of a slab */
  --vxn-edge-2:   #16181c;

  --vxn-lit:      rgba(255,255,255,.045);
  --vxn-lit-2:    rgba(255,255,255,.07);
  --vxn-dark:     rgba(0,0,0,.3);
  --vxn-amb:      rgba(0,0,0,.26);
  --vxn-amb-2:    rgba(0,0,0,.34);

  --vxn-ink:      #eef0f3;
  --vxn-ink-2:    #a4abb6;
  --vxn-ink-3:    #6b7280;

  --vxn-green:      #43c94b;
  --vxn-green-hi:   #6be070;
  --vxn-green-side: #1d6b23;
  --vxn-green-ink:  #0c1a0d;
  --vxn-accent:     #6be070;

  --vxn-line:     #33373f;
  --vxn-scrim:    rgba(6,7,9,.6);
  --vxn-sb-track: #0b0c0e;
  --vxn-sb-thumb: #2a2d34;
  --vxn-sb-hover: #33373f;
  --vxn-focus:    rgba(63,157,251,.55);

  --vxn-font:     "Segoe UI Variable Text","Segoe UI",system-ui,
                  -apple-system,Roboto,Helvetica,Arial,sans-serif;
  --vxn-r:        4px;
  --vxn-r-sm:     3px;
  --vxn-h:        76px;
}

[data-theme="light"]{
  --vxn-bar:      #ffffff;
  --vxn-bar-2:    #eef1f5;
  --vxn-deep:     #dde2e9;
  --vxn-edge:     #aeb6c2;
  --vxn-edge-2:   #bfc6d0;

  --vxn-lit:      rgba(255,255,255,.75);
  --vxn-lit-2:    rgba(255,255,255,1);
  --vxn-dark:     rgba(23,29,40,.10);
  --vxn-amb:      rgba(23,29,40,.13);
  --vxn-amb-2:    rgba(23,29,40,.16);

  --vxn-ink:      #14171b;
  --vxn-ink-2:    #4a525c;
  --vxn-ink-3:    #78818d;

  --vxn-green:      #2f9e3a;
  --vxn-green-hi:   #37b543;
  --vxn-green-side: #1a6a22;
  --vxn-green-ink:  #ffffff;
  --vxn-accent:     #237a2c;

  --vxn-line:     #d5dae1;
  --vxn-scrim:    rgba(30,36,46,.4);
  --vxn-sb-track: #c9ced6;
  --vxn-sb-thumb: #aeb6c2;
  --vxn-sb-hover: #98a1af;
  --vxn-focus:    rgba(28,126,224,.55);
}

/* ---------------- no page scrollbar ----------------
   The bar centres itself inside the viewport, so anything that changes
   the viewport width moves it. A scrollbar is exactly that, and it used
   to shift the row between a page long enough to scroll and one that is
   not. Reserving a gutter for it was one way to hold the bar still;
   taking the scrollbar away is another, and it is the one asked for.

   The page still scrolls - wheel, keys, touch and the scroll methods all
   work - there is simply no rail drawn down the right hand edge. Only
   html and body are named, so a scrollable panel inside a tool keeps its
   own; tooltheme.css styles those.

   Nothing reserves a gutter now, because there is no longer anything to
   reserve it for. */
html{ overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar{ width:0; height:0; display:none; }

/* ---------------- bar ---------------- */
.vxn{
  position:sticky; top:0; z-index:900;
  background:var(--vxn-bar);
  border:0;
  box-shadow:
    inset 0 1px 0 var(--vxn-lit-2), inset 0 -1px 0 var(--vxn-dark),
    0 3px 0 var(--vxn-edge), 0 5px 9px var(--vxn-amb-2);
  font-family:var(--vxn-font);

  /* The bar states its own layout rather than inheriting whatever a page
     does to bare elements. The overflow needs !important to hold: the tool
     pages carry

         @media (max-width:600px){ body > * { overflow-x:hidden !important } }

     and the bar is a direct child of body. overflow-x:hidden forces the
     other axis to auto, which made the header a scroll box - and the open
     drawer hangs below that, so it was clipped away entirely. */
  display:block;
  overflow:visible !important;
  margin:0 0 3px;
  padding:0;
  width:auto;
  min-height:0;
  max-height:none;
  float:none;
  align-items:normal;
  gap:normal;
}
.vxn.is-scrolled{ --vxn-h:58px; }

.vxn__row{
  position:relative;
  width:100%; max-width:1180px; margin:0 auto;
  padding:0 20px;
  min-height:var(--vxn-h);
  display:flex; align-items:center; gap:9px;
  transition:min-height .18s ease;
}
.vxn *,
.vxn *::before,
.vxn *::after{ box-sizing:border-box; }

/* ---------------- brand ---------------- */
.vxn__brand{
  display:flex; align-items:center; gap:11px;
  margin-right:auto;
  text-decoration:none;
}
.vxn__brand:hover{ text-decoration:none; }
.vxn__mark{
  width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center;
  border-radius:var(--vxn-r);
  background:var(--vxn-green);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 2px 0 var(--vxn-green-side), 0 3px 6px var(--vxn-amb);
  transition:background .1s linear;
}
.vxn__brand:hover .vxn__mark{ background:var(--vxn-green-hi); }
.vxn__mark svg{ width:19px; height:19px; display:block; fill:var(--vxn-green-ink); }
.vxn__name{
  font-family:var(--vxn-font); font-weight:700; font-size:17px;
  color:var(--vxn-ink); letter-spacing:-.01em;
  line-height:1.15;
}
.vxn__name span{ color:var(--vxn-accent); }

/* ---------------- plates: links and icon buttons ---------------- */
.vxn__links{ display:flex; align-items:center; gap:7px; }
.vxn__links a,
.vxn__icon{
  --vxn-side:var(--vxn-edge);
  --vxn-lip:2px;

  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:2px;

  font-family:var(--vxn-font);
  font-weight:600;
  font-size:13px; line-height:1.2; letter-spacing:0;
  text-decoration:none;
  color:var(--vxn-ink-2);

  background:var(--vxn-bar-2);
  border:0;
  border-radius:var(--vxn-r);
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:
    inset 0 1px 0 var(--vxn-lit), inset 0 -1px 0 var(--vxn-dark),
    0 var(--vxn-lip) 0 var(--vxn-side),
    0 calc(var(--vxn-lip) + 2px) 5px var(--vxn-amb);

  cursor:pointer;
  user-select:none;
  transform:translateY(0);
  transition:background .1s linear, color .1s linear,
             outline-color .1s linear, transform .07s linear, box-shadow .07s linear;
}
.vxn__links a{ padding:10px 14px; }
/* In the bar the names carry themselves; the glyph is for the drawer,
   where a stacked list needs something to scan down. */
.vxn__glyph{ display:none; }
/* The destination glyphs are stroke drawings, not filled shapes - the
   fill/stroke pair has to be set here or they come out as black blobs. */
.vxn__glyph svg{
  width:18px; height:18px; display:block;
  fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

.vxn__links a:hover,
.vxn__icon:hover{
  background:var(--vxn-bar-2);
  filter:brightness(1.12);
  color:var(--vxn-ink);
  text-decoration:none;
}
.vxn__links a:focus-visible,
.vxn__icon:focus-visible{ outline-color:var(--vxn-focus); }

.vxn__links a:active,
.vxn__icon:active{
  --vxn-lip:0px;
  filter:none;
  transform:translateY(3px);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.38);
}

/* the page you are on */
.vxn__links a.is-active{
  --vxn-side:var(--vxn-green-side);
  background:var(--vxn-green);
  color:var(--vxn-green-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 var(--vxn-lip) 0 var(--vxn-side),
    0 calc(var(--vxn-lip) + 2px) 5px var(--vxn-amb);
}
.vxn__links a.is-active:hover{ background:var(--vxn-green-hi); color:var(--vxn-green-ink); filter:none; }

.vxn__icon{
  width:42px; height:40px;
  padding:0;
  color:var(--vxn-ink);
}
.vxn__icon svg{ width:17px; height:17px; fill:currentColor; display:block; }

.vxn__theme .vxn-moon{ display:none; }
[data-theme="light"] .vxn__theme .vxn-sun{ display:none; }
[data-theme="light"] .vxn__theme .vxn-moon{ display:block; }

.vxn__burger{ display:none; margin-left:auto; }
.vxn__burger .vxn-x{ display:none; }
.vxn__burger[aria-expanded="true"] .vxn-bars{ display:none; }
.vxn__burger[aria-expanded="true"] .vxn-x{ display:block; }

.vxn__scrim{ display:none; }

/* ---------------- phones ---------------- */
@media (max-width:860px){
  .vxn{ --vxn-h:68px; }
  .vxn__row{ position:static; gap:12px; }
  .vxn__burger{ display:inline-flex; }

  /* blurred backdrop behind the open menu */
  .vxn__scrim{
    display:block;
    position:fixed; inset:0; z-index:890;
    background:var(--vxn-scrim);
    backdrop-filter:blur(14px) saturate(.7);
    -webkit-backdrop-filter:blur(14px) saturate(.7);
    opacity:0; visibility:hidden;
    transition:opacity .2s linear, visibility 0s linear .2s;
  }
  body.vxn-open .vxn__scrim{
    opacity:1; visibility:visible;
    transition:opacity .2s linear, visibility 0s linear 0s;
  }
  /* The bar outranks the scrim unconditionally, in both directions. The
     drawer lives inside the bar, so anything conditional here lets the
     scrim cover both while it fades out - which reads as a blurred navbar
     and a menu behind frosted glass. */
  .vxn{ z-index:900; }
  .vxn__links{ z-index:1; }

  /* No scroll lock on purpose: locking the body makes it its own scroll
     container and the page snaps to the top when the menu opens.

     The menu is a drawer down the right hand side rather than a panel
     dropped out of the bar. A full width sheet unrolling from the top
     covered the thing you were reading and pushed the last item off the
     bottom of a short phone; a column pinned to one edge leaves the page
     visible beside it and has room for every link plus the theme switch.

     It hangs below the bar rather than over it, so the burger stays put
     and keeps working as the close button. --vxn-h is on .vxn, so the
     drawer follows the bar when it shortens on scroll. */
  .vxn__links{
    position:fixed;
    top:var(--vxn-h); right:0; bottom:0; left:auto;
    width:min(288px, 82vw);
    flex-direction:column; align-items:stretch; gap:8px;
    padding:16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y:auto;
    overscroll-behavior:contain;

    /* the slab's side runs down its left edge, because that is the face
       you can see - the other three are off the screen */
    background:var(--vxn-bar);
    box-shadow:
      inset 1px 0 0 var(--vxn-lit),
      -3px 0 0 var(--vxn-edge),
      -10px 0 26px var(--vxn-amb-2);

    transform:translateX(100%);
    opacity:1; visibility:hidden;
    transition:
      transform .26s cubic-bezier(.2,.9,.3,1),
      visibility 0s linear .26s;
  }
  .vxn__links.is-open{
    transform:translateX(0);
    visibility:visible;
    transition:
      transform .28s cubic-bezier(.2,.9,.3,1),
      visibility 0s linear 0s;
  }
  /* a menu item is a full width slab, read left to right like a list:
     glyph, then name, both on the same left edge all the way down */
  .vxn__links a{
    width:auto;
    justify-content:flex-start;
    gap:12px;
    font-size:14px;
    padding:13px 15px;
    margin-bottom:2px;
    flex:none;
  }
  .vxn__glyph{
    display:grid; place-items:center;
    width:18px; height:18px; flex:0 0 18px;
    opacity:.75;
  }
  .vxn__links a.is-active .vxn__glyph{ opacity:1; }

  /* the theme button is moved in here by voxen-nav.js on small screens */
  .vxn__themeslot{
    display:flex;
    width:auto;
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid var(--vxn-line);
  }
  .vxn__themeslot .vxn__icon{
    width:100%; height:auto;
    justify-content:flex-start;
    padding:13px 15px;
    gap:12px;
    margin-bottom:2px;
    font-size:14px;
    color:var(--vxn-ink-2);
  }
  /* the theme row's own glyph sits on the same left edge as the rest */
  .vxn__themeslot .vxn__icon svg{ width:18px; height:18px; flex:0 0 18px; }
  .vxn__themeslot .vxn__icon::after{
    content:"Theme";
    font-family:var(--vxn-font);
    font-weight:600;
  }
}