:root {
  --background-color-navbar-and-menu-button: rgb(15, 15, 15);
  --background-color-active-item: rgb(30, 30, 30);
  --background-color-dropdown-item-hover: rgb(50, 50, 50);
  --color-inactive-menu-button: rgb(180, 180, 180);
  --color-active-item: rgb(240, 240, 240);
  --border-color-navbar: rgb(60, 60, 60);
  --border-color-dropdown: rgb(60, 60, 60);
  --border-color-dropdown-item-hover: rgb(67, 121, 124);
  --border-radius: 4px;
  /* The single source of truth for how long the menu takes to open and close.
     main-menu.js reads this too (getComputedStyle), for the delay it puts on
     --navbar-delay before letting the mobile panel follow a closing submenu.
     Change it here only: duplicating the number anywhere it is used is what
     caused the panel-closing stutter this delay exists to prevent */
  --menu-transition: 500ms;
  /* The vertical padding a dropdown item gets around its own text. Shared so
     the mobile navbar button can be given the same rhythm without the two
     drifting apart if this one is ever changed */
  --item-padding-y: 6px;
  /* The same 600px the mobile stylesheet switches layout on, and that
     main-menu.js watches with matchMedia. A media query cannot read a custom
     property, so those two have to spell the number out literally — change this
     and they need changing with it */
  --menu-max-width: 600px;
}

/* --nav-toggle-size is set by main-menu.js, from the same textHeight the rest of
   the menu is sized with. The fallback keeps the icon sane before that has run */
/* Created by main-menu.js and only shown on a touch screen, where a submenu can
   be longer than its window. Hidden means out of the tab order too */
.scroll-btn {
  display: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  /* --bar-height, not --nav-toggle-size: that variable is the icon's own square
     size, while this is the bar's total height including the same vertical
     margin the desktop navbar gets around its text. Tying the button's height
     to the icon size directly was the bug that made the two bars come out at
     different heights — align-items centres the icon inside the extra room */
  height: var(--bar-height, 24px);
  /* Deliberately not the plain 11px that .menu-btn puts its text box on (padding
     10px plus a 1px border). A letter does not start painting at the edge of its
     box: it has a built-in margin of its own, so the bar would sit visibly to the
     left of the F. That margin is a fixed share of the font size, which is why
     the correction is in em and the rest in px. Measured by eye: 13px looked
     right at a font size of 20px, so 2/20 */
  /* The same value on the right, which centres the icon in its own button and
     makes for a roomier tap target */
  padding: 0 calc(11px + 0.1em);
  cursor: pointer;
}

/* Confirms a press by brightening the bars to the colour an active menu button
   uses for its text. Handed down as a variable so it reaches the two
   pseudo-elements as well, and so the open state keeps its say over the middle
   bar: that one is set to transparent by a more specific rule further down */
.nav-toggle.is-pressed {
  --nav-toggle-color: var(--color-active-item);
}

/* The hamburger is drawn, not an image: the span is the middle bar and its two
   pseudo-elements are the outer ones. When open the middle bar fades out and the
   other two rotate onto each other into a cross */
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: var(--nav-toggle-size, 24px);
  height: calc(var(--nav-toggle-size, 24px) / 8);
  background-color: var(--nav-toggle-color, var(--color-inactive-menu-button));
  border-radius: var(--border-radius);
  transition:
    transform 150ms ease,
    background-color 150ms ease;
}

.nav-toggle-icon {
  position: relative;
  /* A bar tilted 45 degrees covers only cos(45) of its own width, and because it
     tilts around its middle, that shortfall lands half on the left and half on
     the right. Moving the cross back by that half puts its left edge exactly
     where the hamburger bars begin */
  --nav-cross-shift: calc(
    (var(--nav-toggle-size, 24px) - var(--nav-toggle-size, 24px) * 0.7071) / -2
  );
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before {
  top: calc(var(--nav-toggle-size, 24px) / -3);
}

.nav-toggle-icon::after {
  top: calc(var(--nav-toggle-size, 24px) / 3);
}

.nav-open .nav-toggle-icon {
  background-color: transparent;
}

.nav-open .nav-toggle-icon::before {
  transform: translate(
      var(--nav-cross-shift),
      calc(var(--nav-toggle-size, 24px) / 3)
    )
    rotate(45deg);
}

.nav-open .nav-toggle-icon::after {
  transform: translate(
      var(--nav-cross-shift),
      calc(var(--nav-toggle-size, 24px) / -3)
    )
    rotate(-45deg);
}

/* Sticky sits on the header, not on the navbar: on mobile the toggle button has
   to stay in view while the navbar itself is hidden. Being positioned also makes
   the header the containing block for the mobile navbar panel */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar {
  background-color: var(--background-color-navbar-and-menu-button);
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.menu-btn {
  width: auto;
  background-color: var(--background-color-navbar-and-menu-button);
  color: var(--color-inactive-menu-button);
  display: inline-block;
  padding: 0 10px;
  border: 1px solid var(--background-color-navbar-and-menu-button);
  border-radius: var(--border-radius);
}

/* is-active means "this menu is open" and has nothing to do with pointers, so it
   stays outside the hover query below */
.menu-btn.is-active,
.menu-btn:active {
  color: var(--color-active-item);
  background-color: var(--background-color-active-item);
  border-color: var(--background-color-active-item);
}

/* Hover only where a pointer can actually hover. A tap on a touch screen applies
   :hover as well, and then leaves it stuck until the next tap elsewhere */
@media (hover: hover) {
  .menu-btn:hover {
    color: var(--color-active-item);
    background-color: var(--background-color-active-item);
    border-color: var(--background-color-active-item);
  }
}

.navbar > div {
  position: relative;
  display: flex;
}

/* Closed it is zero high with its contents clipped, open it grows to the height
   main-menu.js measured, capped at 60% of the screen so a very long menu gets a
   scrollbar instead of running off the bottom of the window. Nothing moves and
   nothing changes in brightness: the list simply comes out from under the bar.
   Also means the menu stays hidden before that script has run, without needing
   a value from it.
   --menu-border exists so the border below and this cap can agree on the same
   number: border-box counts the border towards the element's own height, so
   without adding it back here every menu would come out just short of fitting
   its own content, and read as scrollable even when it is not */
.dropdown {
  position: absolute;
  top: 100%;
  z-index: 1001;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  border-radius: var(--border-radius);
  --menu-border: 1px;
  /* The list's own height plus its border, computed once so every place that
     caps it (the vh/dvh pair below, and the two 60%-based caps in the mobile
     stylesheet) reads the same value instead of retyping the sum */
  --dropdown-content-height: calc(var(--menu-height, 100vh) + var(--menu-border) * 2);
  /* Deliberately left out of the transition below, so it flips the instant
     is-open goes. visibility is the one that normally stops clicks getting
     through, but it is delayed on purpose so the list stays on screen while it
     folds away — and for that whole half second the items underneath are still
     sitting there, still hittable, quietly accepting a second choice on a menu
     that is already on its way out */
  pointer-events: none;
  /* overflow-y switches back to hidden at once, so nothing can scroll while the
     menu is folding away. allow-discrete is what lets a property that only ever
     jumps between values be scheduled like this at all */
  transition:
    max-height var(--menu-transition) ease,
    visibility 0s var(--menu-transition),
    overflow-y 0s;
  transition-behavior: allow-discrete;
}

.dropdown.is-open {
  /* Drawn on the window, not on the list inside it: on the list it would scroll
     along and the bottom edge would vanish once the menu is capped. A real
     border and not an outline or an inset shadow, because those either paint
     under the list's own background (invisible) or over its text (running the
     letters straight through the line) — only a border takes up room of its
     own, which is what makes the browser clip the list inside it */
  border: var(--menu-border) solid var(--border-color-dropdown);
  max-height: min(var(--dropdown-content-height), 60vh);
  max-height: min(var(--dropdown-content-height), 60dvh);
  overflow-y: auto;
  visibility: visible;
  /* Open again at once, unlike visibility on the way out: while the menu grows
     the items are already where you see them, so tapping one straight away is
     fine — it is only the fold-away that must not take a choice */
  pointer-events: auto;
  /* The other way round on the way out: scrolling is only allowed once the menu
     has reached its full height. Otherwise a scrollbar flashes past during the
     animation, when the list is already whole and the window around it is not */
  transition:
    max-height var(--menu-transition) ease,
    visibility 0s,
    overflow-y 0s var(--menu-transition);
  transition-behavior: allow-discrete;
}

.dropdown ul {
  margin: 0;
  padding: 6px;
  width: auto;
  display: block;
  background-color: var(--background-color-active-item);
  cursor: pointer;
}

.dropdown li {
  list-style: none;
  border: 1px solid var(--background-color-active-item);
  border-radius: var(--border-radius);
}

/* Marks the item you just chose, for as long as the menu stays open afterwards.
   Set from JavaScript, so it does not depend on a finger still being down and
   shows up on a quick tap too */
.dropdown li.is-chosen {
  background-color: var(--background-color-dropdown-item-hover);
  border-color: var(--border-color-dropdown-item-hover);
}

@media (hover: hover) {
  .dropdown li:hover {
    background-color: var(--background-color-dropdown-item-hover);
    border-color: var(--border-color-dropdown-item-hover);
  }
}

/* Asymmetric on purpose: the text moves left while the padding on the right
   keeps the menu comfortably wide */
.dropdown button {
  display: block;
  width: 100%;
  padding: var(--item-padding-y) 50px var(--item-padding-y) 20px;
  color: var(--color-active-item);
}

.menu-btn,
.dropdown button {
  white-space: nowrap;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}