:root {
  /* TODO: make header background black */

  --header-bg: var(--profile-0);
  --header-text: #000;
  --header-link-hover: var(--profile-1);
  --header-border: #000;
  --header-submenu-bg: var(--profile-3);
  --header-submenu-text: #000;

  --num-unread-bg: var(--header-link-hover);
  --num-unread-bg-hover: var(--header-text);
  --num-unread-text: var(--header-text);
  --num-unread-text-hover: var(--main-bg);
}

.body-grid > .header {
  display: grid;
  grid-template-areas:
    "content"
    "bar";
  grid-template-columns: 1fr;
  grid-template-rows: auto
                      auto;
  position: sticky;
  top: 0;
  z-index: var(--header-z-index);
  background-color: var(--header-bg);
}
.body-grid > .header > .bar {
  grid-area: bar;
  width: 100%;
}
.body-grid > .header > .content {
  grid-area: content;
  display: flex;
  justify-content: center;
}
.body-grid > .header .content > .wrapper {
  position: relative; /* Needed for offsetLeft/offsetTop to work as expected */
  flex: 1;
  max-width: var(--content-max-width);
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--header-text);
  padding: .5rem 0;
}

.body-grid > .header .logo {
  margin-right: 1.5rem;
}
.body-grid > .header .logo img {
  content: url("/images/logo.svg?ts=1770670527");
  width: 14rem;
  margin-right: 1rem;
  margin-top: -.3rem;
  margin-bottom: -2.2rem;
  pointer-events: none;
}
@media (max-width: 800px) {
.body-grid > .header .logo img {
  width: 12rem;
  margin-top: -.2rem;
  margin-bottom: -2rem;
}}
@media (max-width: 450px) {
.body-grid > .header .logo img {
  width: 10rem;
}}
@media (max-width: 350px) {
.body-grid > .header .logo img {
  content: url("/images/logo-cropped.svg?ts=1747940124");
  width: 5rem;
}}

.body-grid > .header .messages {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  margin-right: 1rem;
}
.body-grid > .header .messages a {
  display: inline-block;
  position: relative;
 }
.body-grid > .header .messages a svg {
  height: 2.4rem;
  margin-top: .6rem;
}
.body-grid > .header .messages a svg path.colorable {
  transition: all var(--hover-out-time) var(--hover-out-fun);
}
@keyframes blinking-svg {
  0% { fill: var(--header-link); }
  50% { fill: var(--header-link-hover); }
  100% { fill: var(--header-link); }
}
.body-grid > .header .messages.has-unread a svg path.colorable {
  animation-name: blinking-svg;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}
.body-grid > .header .messages a:active svg path.colorable,
.body-grid > .header .messages a:focus svg path.colorable,
.body-grid > .header .messages a:hover svg path.colorable,
.body-grid > .header .messages.current a svg path.colorable {
  fill: var(--header-link-hover);
  transition: all var(--hover-in-time) var(--hover-in-fun);
  animation-iteration-count: 0;
}
.body-grid > .header .messages a .num-unread {
  position: absolute;
  bottom: .25rem;
  right: -.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.body-grid > .header .messages a .num-unread span {
  background-color: var(--num-unread-bg);
  color: var(--num-unread-text);
  border-radius: .5rem;
  padding: 0 .3rem;
  font-size: 80%;
  transition: all var(--hover-out-time) var(--hover-out-fun);
}
.body-grid > .header .messages a:active .num-unread span,
.body-grid > .header .messages a:focus .num-unread span,
.body-grid > .header .messages a:hover .num-unread span,
.body-grid > .header .messages.current a .num-unread span {
  background-color: var(--num-unread-bg-hover);
  color: var(--num-unread-text-hover);
  transition: all var(--hover-in-time) var(--hover-in-fun);
}

.body-grid > .header ul {
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  color: var(--header-text);
  font-family: var(--menu-font-family);font-weight: var(--menu-font-weight);;
  font-size: 1.5rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.body-grid > .header ul li a,
.body-grid > .header ul li a:visited {
  color: var(--header-text);
}
.body-grid > .header ul li a:active,
.body-grid > .header ul li a:focus,
.body-grid > .header ul li a:hover,
.body-grid > .header ul li.active > a {
  color: var(--header-link-hover);
}
.body-grid > .header ul li a {
  height: 100%;
  display: flex;
  align-items: center;
}

.body-grid > .header .messages + nav.horizontal {
  margin-left: 2rem;
}
nav.horizontal {}
nav.horizontal ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  margin-right: 1.5rem;
}
@media (min-width: 1670px) {
nav.horizontal ul {
  margin-right: 0;
}}
nav.horizontal ul li {
  position: relative;
}
nav.horizontal ul .sep {
  width: 1px;
  height: 1.5ex;
  margin-top: .2ex;
  background-color: var(--header-text);
}

/* Positioned above the menu, so that it neither makes the header taller nor
   moves the menu off its vertical center. Its top is set by placeActingAs()
   in common.header to center it above the menu, and margin-top nudges it
   down from there. */
.body-grid > .header .acting-as {
  position: absolute;
  right: 1.5rem;
  top: .15rem;
  margin-top: .15rem;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .7rem;
  line-height: 1;
}
@media (min-width: 1670px) {
.body-grid > .header .acting-as {
  right: 0;
}}

nav.vertical {
}
nav.vertical .hamburger {
  margin: 0 1.5rem;
  width: 2rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
}
nav.vertical .hamburger:hover {
  cursor: pointer;
}
nav.vertical .hamburger > div {
  width: 100%;
  position: relative;
}
nav.vertical .hamburger .line {
  height: .18rem;
  background-color: var(--header-text);
  transition: all var(--menu-out-time) var(--menu-out-fun)
            , background-color var(--hover-out-time) var(--hover-out-fun)
            ;
  width: 100%;
}
nav.vertical .hamburger .line:nth-child(1) {
  position: absolute;
  top: -.7rem;
}
nav.vertical .hamburger .line:nth-child(3) {
  position: absolute;
  top: .7rem;
}
nav.vertical .hamburger:hover .line,
nav.vertical.active .hamburger .line {
  background-color: var(--header-link-hover);
  transition: all var(--menu-in-time) var(--menu-in-fun)
            , background-color var(--hover-in-time) var(--hover-in-fun)
            ;
}
nav.vertical.active .hamburger .line:nth-child(1) {
  transform: rotate(45deg);
  top: 0;
}
nav.vertical.active .hamburger .line:nth-child(2) {
  opacity: 0;
}
nav.vertical.active .hamburger .line:nth-child(3) {
  transform: rotate(-45deg);
  top: 0;
}

nav.vertical > ul.submenu,
nav.horizontal ul.submenu {
  position: absolute;
  box-sizing: border-box;
  right: 0;
  z-index: var(--header-z-index);
  background-color: var(--header-bg);
  border: 1px solid var(--header-border);
  padding: .5rem 0 .5rem;
  border-radius: 0 0 .8rem .8rem;
  margin-top: .2rem !important;
  display: none;
  opacity: 0;
  transform: translateY(-2rem);
  transition: all var(--menu-out-time) var(--menu-out-fun);
}
nav.vertical > ul.submenu ul.submenu,
nav.horizontal ul.submenu {
  font-size: 90%;
}
nav.vertical > ul.submenu {
  border-right-width: 0;
  border-bottom-right-radius: 0;
}
nav.horizontal ul.submenu {
  right: unset;
  flex-direction: column;
  gap: 0;
}
nav.vertical a,
nav.horizontal ul.submenu li a {
  padding: 0 1rem;
}
nav.vertical ul li a {
  justify-content: end;
}
nav.vertical ul .sep {}
nav.vertical ul ul.submenu,
nav.vertical.active ul ul.submenu {
  display: none;
  padding: .5rem 0 1.25rem;
}
nav.vertical > ul > li:last-child ul.submenu {
  padding-bottom: 0;
}
nav ul.submenu.preshow {
  display: block !important;
}
nav ul.submenu.showing {
  opacity: 1;
  transform: translateY(0);
  transition: all var(--menu-in-time) var(--menu-in-fun);
}
nav.vertical li.active ul.submenu a {
  color: var(--header-text);
}
nav.vertical ul.submenu li.active > a,
nav.vertical ul.submenu li a:active,
nav.vertical ul.submenu li a:focus,
nav.vertical ul.submenu li a:hover {
  color: var(--header-link-hover);
}
nav.vertical ul ul.submenu li {
  margin: 0;
}
nav.horizontal ul.submenu ul.subsubmenu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0 0 0 1rem;
  font-size: 90%;
}
nav.vertical ul.submenu ul.subsubmenu {
  font-size: 90%;
  margin-bottom: .75rem;
}
/* Set apart from Switch actor above it, which is otherwise easily misclicked
 * for it. */
nav.vertical ul ul.submenu li.logout,
nav.horizontal ul.submenu li.logout {
  margin-top: 1rem;
}
/* The items that set work going rather than lead to a page of their own, and
 * so carry a loading symbol next to their text (the items the menu builder is
 * given an on_click_f for, which it marks with the "sets-work-going" class).
 * The child combinators keep these rules off the links of the items nested
 * under such an item. The symbol is hidden by the "hide" class until there is
 * work to show, so no rule here may hide it -- that class would then have
 * nothing to undo. */
nav li.sets-work-going > a {
  display: grid !important;
}
nav.horizontal li.sets-work-going > a {
  grid-template-areas: "text . loading";
  grid-template-columns: auto .5rem auto;
}
nav.vertical li.sets-work-going > a {
  grid-template-areas: "loading . text";
  grid-template-columns: auto .5rem auto;
}
nav li.sets-work-going > a > svg.loading {
  grid-area: loading;
}
nav li.sets-work-going > a > span {
  grid-area: text;
}