/* The global bar. Sticky, dark, one gold accent — the portal's spine. */

body{ padding-top:58px }          /* the bar is fixed; give every page its room */

.gn{
  position:fixed; top:0; left:0; right:0; z-index:90;
  background:rgba(11,16,13,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line2);
}
.gn-in{
  max-width:1160px; margin:0 auto; padding:0 var(--sp-4);
  display:flex; align-items:center; gap:var(--sp-2); height:58px;
}

.gn-brand{
  display:flex; align-items:center; gap:10px; margin-right:var(--sp-3);
  font-family:var(--disp); font-size:var(--fs-7); text-transform:uppercase;
  letter-spacing:.04em; color:var(--chalk); line-height:1; flex:none;
}
.gn-brand b{ color:var(--yellow); font-weight:400 }
.gn-brand img{ display:block }
.gn-brand:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px }
.gn-brand[aria-current]{ pointer-events:none }

.gn-rail{ display:flex; align-items:center; gap:2px; flex:1; min-width:0 }
.gn-group{ position:relative }

.gn-top{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--fs-3); font-weight:700; letter-spacing:.04em;
  color:var(--muted); padding:9px 13px; border-radius:8px;
  transition:color var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.gn-top:hover{ color:var(--chalk); background:var(--panel2) }
.gn-top:focus-visible{ outline:2px solid var(--yellow); outline-offset:-2px }
.gn-group.here > .gn-top{ color:var(--chalk); box-shadow:inset 0 -2px 0 var(--yellow) }
.gn-top[aria-expanded="true"]{ color:var(--chalk); background:var(--panel2) }

.gn-chev{
  width:7px; height:7px; border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform var(--t-1) var(--ease);
}
.gn-top[aria-expanded="true"] .gn-chev{ transform:rotate(-135deg) translateY(1px) }

.gn-menu{
  list-style:none; position:absolute; top:calc(100% + 8px); left:0; z-index:95;
  min-width:250px; background:var(--panel); border:1px solid var(--line2);
  border-radius:var(--r-sm); box-shadow:var(--sh-3); padding:6px; margin:0;
}
.gn-menu a{
  display:flex; flex-direction:column; gap:2px; padding:9px 12px;
  border-radius:var(--r-xs);
}
.gn-menu a:hover, .gn-menu a:focus-visible{ background:var(--panel2); outline:none }
.gn-menu b{ font-size:var(--fs-4); font-weight:650; color:var(--chalk) }
.gn-menu a[aria-current] b{ color:var(--yellow) }
.gn-menu span{ font-size:var(--fs-2); color:var(--faint) }
.gn-lock{ font-size:10px }

.gn-draft{
  position:relative; color:var(--yellow); margin-left:2px;
}
.gn-draft:hover{ color:#12170f; background:var(--yellow) }
.gn-draft.on{ box-shadow:inset 0 -2px 0 var(--yellow); color:var(--chalk) }
.gn-hot{
  position:absolute; top:7px; right:5px; width:6px; height:6px; border-radius:50%;
  background:var(--red); box-shadow:0 0 0 3px rgba(232,84,79,.22);
}

.gn-find{
  display:inline-flex; align-items:center; gap:8px; margin-left:auto;
  font-size:var(--fs-3); font-weight:650; color:var(--muted);
  border:1px solid var(--line2); border-radius:99px; padding:7px 13px;
  background:var(--panel2);
  transition:color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.gn-find:hover{ color:var(--chalk); border-color:rgba(255,210,30,.4) }
.gn-find:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px }
.gn-find kbd{
  font-family:var(--body); font-size:var(--fs-1); color:var(--faint);
  border:1px solid var(--line2); border-radius:4px; padding:0 5px;
}

.gn-burger{ display:none }

/* --------------------------------------------------------------- mobile */

@media (max-width:920px){
  .gn-brand span{ display:none }

  .gn-burger{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:40px; height:40px; align-items:center; margin-left:auto;
    border-radius:8px;
  }
  .gn-burger i{ width:18px; height:2px; background:var(--chalk); border-radius:1px;
    transition:transform var(--t-1) var(--ease), opacity var(--t-1) var(--ease) }
  .gn.open .gn-burger i:nth-child(1){ transform:translateY(6px) rotate(45deg) }
  .gn.open .gn-burger i:nth-child(2){ opacity:0 }
  .gn.open .gn-burger i:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
  .gn-burger:focus-visible{ outline:2px solid var(--yellow) }

  .gn-rail{
    display:none;
    /* The bar's backdrop-filter makes IT the containing block for fixed
       descendants, so `bottom:0` here meant the bottom of the 58px BAR —
       a zero-height panel that opened blank. Anchor by explicit viewport
       height instead; top:58px resolves against the bar, which sits at the
       viewport top, so the panel still starts exactly under it. */
    position:fixed; top:58px; left:0; right:0; z-index:89;
    height:calc(100vh - 58px); height:calc(100dvh - 58px);
    background:var(--bg); border-top:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    padding:var(--sp-4); overflow-y:auto; overscroll-behavior:contain;
  }
  .gn.open .gn-rail{ display:flex }

  .gn-group{ position:static }
  .gn-top{ width:100%; justify-content:space-between; padding:13px 10px;
    font-size:var(--fs-5); border-radius:var(--r-xs) }
  .gn-menu{
    position:static; min-width:0; border:0; box-shadow:none; background:transparent;
    padding:0 0 var(--sp-2) var(--sp-3);
  }
  .gn-draft{ margin:var(--sp-2) 0; padding:13px 10px; font-size:var(--fs-5) }
  .gn-find{ margin:var(--sp-3) 0 0; justify-content:center; padding:12px }
}

/* the draft chip: real time, not an eternal pulse */
.gn-draft .gn-hot{
  position:static; transform:none; display:inline-block; width:auto; height:auto; border-radius:99px;
  margin-left:7px; padding:2px 8px 3px;
  font-style:normal; font-size:10px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:#141a15; background:var(--yellow);
  box-shadow:0 0 14px rgba(255,210,30,.45);
  animation:gnHot 2.2s ease-in-out infinite;
  vertical-align:middle; line-height:1;
}
@keyframes gnHot{ 0%,100%{ box-shadow:0 0 8px rgba(255,210,30,.3) } 50%{ box-shadow:0 0 18px rgba(255,210,30,.65) } }
@media (prefers-reduced-motion: reduce){ .gn-draft .gn-hot{ animation:none } }

/* the private tab: quiet gold outline, never the pulse the draft link wears */
.gn-james{
  border:1px solid rgba(255,210,30,.35); border-radius:99px; padding:6px 12px;
  color:var(--yellow);
}
.gn-james:hover{ border-color:var(--yellow); background:rgba(255,210,30,.08) }
.gn-james.on{ background:rgba(255,210,30,.12) }
.gn-james .gn-lock{ font-size:11px; margin-left:2px }