/* ============================================================================
   Shared top bar shell — linked by index.html, annotationguide.html, map.html.
   Only the common frame lives here (bar, centered wrap, brand, links, hover
   underline, and the mobile single-row scroll strip). Each page sets its own
   POSITION (sticky vs. absolute) and supplies its own nav LINKS + any special
   behaviour (map's Release menus, the annotation page's in-page jumps).
   Relies on each page's CSS variables: --gold --text --text-muted --border
   --font-header --max-w --gutter.
   ========================================================================== */

.tzbar{
  z-index:50;
  background:rgba(255,255,255,0.94);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--font-header);
}
.tzbar-inner{
  display:flex; align-items:stretch; height:48px;
  width:100%; max-width:var(--max-w); margin:0 auto;
  padding-left:var(--gutter); padding-right:var(--gutter);
}
.tzbar-brand{
  display:flex; align-items:center; gap:9px; flex:none;
  text-decoration:none; color:var(--text);
  font-weight:700; letter-spacing:.08em; font-size:16px; text-transform:uppercase; white-space:nowrap;
}
.tzbar-brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); flex:none; }
.tzbar-nav{ margin-left:auto; display:flex; align-items:stretch; gap:18px; min-width:0; }
.tzbar-link{
  position:relative; display:flex; align-items:center;
  color:var(--text-muted); text-decoration:none;
  font-size:13px; letter-spacing:.02em; white-space:nowrap; transition:color .15s;
}
.tzbar-link::after{
  content:""; position:absolute; left:0; right:0; top:calc(50% + 9px);
  height:1.5px; background:#F0AB00; opacity:0; transition:opacity .15s; pointer-events:none;
}
.tzbar-link:hover{ color:var(--gold); }
.tzbar-link:hover::after{ opacity:1; }
.tzbar-div{ display:inline-block; width:1px; height:14px; background:var(--border); flex:none; align-self:center; }

@media (max-width:760px){
  .tzbar{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#fdfdfc; }
  .tzbar-inner{ gap:14px; }
  .tzbar-nav{ flex:1; min-width:0; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tzbar-nav::-webkit-scrollbar{ display:none; }
  .tzbar-brand{ font-size:15px; }
  .tzbar-link{ font-size:10px; }
}