/* The navigation bar, shared by every page of the team hub — the launcher and
 * the graphic maker alike. It lives in its own file, loaded by both, because
 * it is one bar: a copy in each stylesheet is two bars that agree until the
 * day somebody edits one of them.
 *
 * Shaped after the archive's own: dark, sticky, an amber rule under it, Menu
 * on the left and the wordmark on the right, with a panel that drops out of
 * it. The colours come from the tokens the loading page sets, and the
 * archive's nav, act and verify are this app's --nav, --accent and --good, so
 * this is the same bar rather than an imitation of one.
 *
 * The greys inside it are literal: they sit on near-black in both themes, so
 * they do not take the light/dark treatment the rest of the app does.
 */

/* .navbar, not .tabs: the graphic maker already calls its bottom strip of
 * panel tabs .tabs, and a shared stylesheet cannot take a name a page it
 * loads into is already using. The two were fighting over display, and the
 * maker won, which shrank this bar's contents to fit its own buttons.
 *
 * Every token the bar uses, defaulted on the bar itself. The launcher defines
 * all of these; the maker's stylesheet defines some under other names and the
 * rest not at all. A fallback each means this file stands up in both places
 * without either stylesheet having to know about it — and where a page does
 * define one, the page's own value wins, because these are only fallbacks. */
.navbar {
  --nav: var(--nav-colour, #121A24);
  --accent: var(--gold, #E9A81C);
  --accent-ink: #0E151C;
  --good: var(--teal, #296B60);
  --cond: var(--struct, 'Archivo', system-ui, sans-serif);
  /* The maker's --mono is the face the canvas draws with, which is this
     same file under another name; naming it directly avoids inheriting
     whatever a page happens to mean by --mono. */
  --mono: 'IBM Plex Mono', 'ElectionLog Mono', ui-monospace, monospace;
  --gutter: 16px;
  --radius-sm: 5px;
}

/* Shaped after the archive's own: dark bar, amber rule, Menu on the left and
   the wordmark on the right, with a panel that drops out from under it. The
   colours are the same tokens — the archive's nav, act and verify are this
   app's --nav, --accent and --good — so this is the same bar, not a copy of
   one. The greys inside it are the archive's literal values: they are set on
   near-black in both themes, so they do not take the light/dark treatment the
   rest of this stylesheet does. */
/* display is stated, not inherited from whatever a host page does to its
   headers: the maker styles `header` as a flex row, which made .navwrap a
   flex item and shrank it to its contents instead of the 720px measure. */
.navbar { display: block; position: sticky; top: 0; z-index: 40; background: var(--nav);
        border-bottom: 6px solid var(--accent);
        padding-top: env(safe-area-inset-top, 0px); }
.navbar[hidden] { display: none; }
.navwrap { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter);
           display: flex; align-items: center; justify-content: space-between; gap: 0; }

.menubtn { font-family: var(--cond); font-weight: 600; font-size: 15px;
           letter-spacing: 0.03em; color: #8FA5B0; background: none; border: 0;
           padding: 15px 10px 15px 0; cursor: pointer; display: flex;
           align-items: center; gap: 9px; box-shadow: none; min-height: 44px; }
.menubtn:hover, .menubtn.on { color: #fff; background: none; }
.menubtn .bars { display: inline-flex; flex-direction: column; gap: 3px; width: 16px; }
.menubtn .bars i { display: block; height: 2px; background: currentColor; border-radius: 2px; }

.brand { font-family: var(--cond); font-weight: 700; font-size: 15px;
         /* Set the way the mark is set: all capitals. */
         text-transform: uppercase; letter-spacing: 0.01em;
         color: #fff; background: none; border: 0; box-shadow: none;
         padding: 15px 0 15px 10px; cursor: pointer; min-height: 44px;
         /* No gap: the wordmark is one word set in three colours, and a gap
            between them reads as three words. Only the tag is spaced off. */
         display: flex; align-items: baseline; gap: 0; }
.brand:hover { background: none; text-decoration: underline;
               text-underline-offset: 4px; text-decoration-thickness: 2px; }
.brand .a { color: var(--accent); }
.brand .tld { color: #B8BCC0; }
/* Which ElectionLog this is. The archive's bar ends at the domain; this one
   has to say, loudly, that it is the team's side of it — somebody landing
   here should never be in doubt that this is not the public site. So the tag
   is filled amber rather than outlined, which is the one colour on this bar
   that nothing else uses. Dark ink on it, never white: the amber is an action
   colour and that is the brand rule everywhere it appears. */
.brand .teamtag { font-family: var(--mono); font-size: 10px; font-weight: 600;
                  letter-spacing: 0.14em; text-transform: uppercase;
                  color: var(--accent-ink); background: var(--accent);
                  border-radius: 999px; padding: 3px 9px; margin-left: 10px; }

.navmenu { display: none; background: #0A141D;
           border-top: 1px solid rgba(255, 255, 255, 0.10);
           max-height: 72vh; overflow: auto; }
.navmenu.on { display: block; }
.navmenu .navwrap { display: block; padding: 4px var(--gutter) 12px; }
.navmenu button { display: flex; width: 100%; align-items: center;
                  justify-content: space-between; gap: 10px; background: none;
                  border: 0; box-shadow: none; border-radius: 0; color: #C2D2DC;
                  font-family: var(--cond); font-weight: 600; font-size: 15px;
                  text-align: left; padding: 12px; cursor: pointer; min-height: 44px;
                  border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.navmenu button:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
/* Where you are, marked down the edge rather than by colour alone. */
.navmenu button.active { color: #fff; box-shadow: inset 3px 0 0 var(--good); }
.navmenu .sect { font-family: var(--cond); font-weight: 600; font-size: 11px;
                 letter-spacing: 0.09em; text-transform: uppercase;
                 color: #6C8496; padding: 14px 12px 4px; }
.navmenu .navtag { font-family: var(--mono); font-size: 11px; color: #7B93A4; }
.navmenu .authblock { border-top: 1px solid rgba(255, 255, 255, 0.14);
                      margin-top: 10px; padding: 12px 12px 4px; }
.navmenu .authblock .who { font-family: var(--mono); font-size: 12px;
                           color: #7B93A4; margin: 0 0 9px; word-break: break-all; }
.navmenu .authblock button { border: 1px solid #55707F; border-radius: var(--radius-sm);
                             padding: 9px 12px; justify-content: center; }
.navmenu .authblock button:hover { border-color: #fff; }

/* On the dark bar the focus ring inverts, or it disappears into the navy. */
.navbar :where(a, button):focus-visible {
  outline: 3px solid #fff; outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--nav), 0 0 0 8px #fff;
}