/* ============================================================
   SubGenius.ViP shared menu bar
   ------------------------------------------------------------
   One bar for every site in the constellation: brand hard left, identity
   to the right of it, hamburger hard right. Signed out the identity slot
   reads LOGIN and the hamburger is dead, so the bar keeps its shape either
   way and never reflows when the session resolves after paint.

   Nothing is coloured directly. Every value comes from a --sgv-* custom
   property, so a host page themes the bar by setting a handful of tokens
   and the bar inherits the site instead of the site inheriting a bar.

   This file is deployed to more than one site. Edit the copy in a site
   repo, then copy it across -- do not fork the behaviour.
   ============================================================ */

:root {
  --sgv-h:       46px;
  --sgv-bg:      #101010;
  --sgv-fg:      #e8e8e8;
  --sgv-dim:     #8d8d8d;
  --sgv-accent:  #ffffff;
  --sgv-line:    rgba(255,255,255,.28);
  --sgv-panel:   #181818;
  --sgv-font:    ui-monospace, "Courier New", monospace;
  --sgv-shadow:  0 2px 0 rgba(0,0,0,.14);
}

/* ---------------------------- the bar ---------------------------- */
.sgv-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--sgv-h);
  padding: 0 12px;
  box-sizing: border-box;
  background: var(--sgv-bg);
  border-bottom: 1px solid var(--sgv-line);
  box-shadow: var(--sgv-shadow);
  font-family: var(--sgv-font);
  color: var(--sgv-fg);
}
.sgv-topbar .sgv-brand {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sgv-fg);
  text-decoration: none;
  white-space: nowrap;
}
.sgv-topbar .sgv-brand b { color: var(--sgv-accent); font-weight: 700; }
.sgv-topbar .sgv-brand:hover { color: var(--sgv-accent); }
.sgv-topbar .sgv-section {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sgv-dim);
  padding-left: 10px;
  border-left: 1px solid var(--sgv-line);
  white-space: nowrap;
}
.sgv-topbar .sgv-spacer { flex: 1 1 auto; }

.sgv-btn {
  font: inherit;
  font-size: 12px;
  color: var(--sgv-fg);
  background: transparent;
  border: 1px solid var(--sgv-line);
  border-radius: 0;
  padding: 6px 10px;
  line-height: 1;
  cursor: pointer;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .15s, border-color .15s, background .15s;
}
.sgv-btn:hover:not([disabled]) { color: var(--sgv-accent); border-color: var(--sgv-accent); }
.sgv-btn[disabled] { opacity: .35; cursor: not-allowed; }
.sgv-btn:focus-visible { outline: 2px solid var(--sgv-accent); outline-offset: 2px; }

.sgv-id { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgv-id .sgv-dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--sgv-accent);
  vertical-align: 1px;
}
/* Signed out the lamp is an empty socket, not a lit one. */
.sgv-id.sgv-out .sgv-dot { background: transparent; border: 1px solid var(--sgv-line); }
.sgv-burger { font-size: 15px; padding: 5px 9px; }

/* ------------------------ identity dropdown ------------------------ */
.sgv-menu {
  position: fixed;
  top: calc(var(--sgv-h) + 4px);
  right: 56px;
  z-index: 1001;
  min-width: 172px;
  background: var(--sgv-panel);
  border: 1px solid var(--sgv-line);
  padding: 4px;
  font-family: var(--sgv-font);
  font-size: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.sgv-menu[hidden] { display: none; }
.sgv-menu a, .sgv-menu button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font: inherit;
  color: var(--sgv-fg);
  background: none;
  border: 0;
  padding: 8px 10px;
  text-decoration: none;
  cursor: pointer;
}
.sgv-menu a:hover, .sgv-menu button:hover { color: var(--sgv-accent); background: rgba(127,127,127,.14); }
.sgv-menu hr { border: 0; border-top: 1px solid var(--sgv-line); margin: 4px 0; }

/* ---------------------------- drawer ---------------------------- */
.sgv-scrim {
  position: fixed; inset: 0;
  z-index: 1002;
  background: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.sgv-scrim.sgv-on { opacity: 1; pointer-events: auto; }

.sgv-drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 1003;
  width: min(340px, 86vw);
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sgv-panel);
  border-left: 1px solid var(--sgv-line);
  box-shadow: -12px 0 34px rgba(0,0,0,.45);
  transform: translateX(100%);
  transition: transform .24s ease;
  font-family: var(--sgv-font);
  color: var(--sgv-fg);
  padding-bottom: 24px;
}
.sgv-drawer.sgv-open { transform: none; }
.sgv-drawer .sgv-dhead {
  display: flex;
  align-items: center;
  height: var(--sgv-h);
  padding: 0 12px;
  border-bottom: 1px solid var(--sgv-line);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sgv-dim);
}
.sgv-drawer .sgv-dhead .sgv-spacer { flex: 1 1 auto; }
.sgv-drawer .sgv-dclose {
  font: 18px/1 var(--sgv-font);
  color: var(--sgv-fg);
  background: none; border: 0; cursor: pointer;
  padding: 6px 8px;
}
.sgv-drawer .sgv-dclose:hover { color: var(--sgv-accent); }
.sgv-drawer .sgv-group {
  padding: 14px 12px 4px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sgv-dim);
}
.sgv-drawer a.sgv-link, .sgv-drawer button.sgv-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--sgv-fg);
  background: none;
  border: 0;
  padding: 9px 12px;
  text-decoration: none;
  cursor: pointer;
}
.sgv-drawer a.sgv-link:hover, .sgv-drawer button.sgv-link:hover {
  color: var(--sgv-accent);
  background: rgba(127,127,127,.12);
}
.sgv-drawer .sgv-link span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--sgv-dim);
  text-transform: none;
  letter-spacing: 0;
}
.sgv-drawer hr { border: 0; border-top: 1px solid var(--sgv-line); margin: 10px 12px; }

@media (max-width: 420px) {
  .sgv-topbar .sgv-section { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sgv-drawer, .sgv-scrim { transition: none; }
}
@media print {
  .sgv-topbar, .sgv-menu, .sgv-drawer, .sgv-scrim { display: none !important; }
}