/* The bar at the top and the panel behind it. Belongs to navbar.php.

   No hex values: everything comes from tokens.css. Mobile first, only
   min-width queries on 480 / 640 / 900 / 1200. */

/* ---------------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background-color: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: var(--header-height);
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}

.topbar__logo {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
}

.topbar__logo img {
  width: auto;
  height: 28px;
}

/* The five main pages. Only from 900px, where the bottom nav is gone. */
.topnav {
  display: none;
}

.topnav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-inline: var(--space-md);
  border-radius: var(--radius-md);
  color: var(--text-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.topnav__link.is-active {
  background-color: var(--accent-soft);
  color: var(--text-heading);
}

.topbar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--tap-target);
  margin-left: auto;
  padding-inline: var(--space-sm) var(--space-md);
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

/* Hidden below 640px but still read out: the button keeps its name. */
.topbar__menu-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .topbar__menu-label {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }
}

@media (min-width: 900px) {
  .topbar__logo img {
    height: 34px;
  }

  .topnav {
    display: block;
  }

  .topnav ul {
    display: flex;
    gap: var(--space-xs);
    padding: 0;
    margin: 0;
    list-style: none;
  }
}

/* ------------------------------------------------------------------ menu */

/* Covers the whole screen, so there is nothing left behind it to dim and no
   scrim is needed. It scrolls itself once the list outgrows the screen.

   visibility keeps the links out of the tab order while it is shut, in plain
   CSS, so that is already right before navbar.js has loaded. */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--surface-page);
  visibility: hidden;
  transform: translateX(100%);
  transition:
    transform var(--transition),
    visibility var(--transition);
}

.menu[data-open="true"] {
  visibility: visible;
  transform: translateX(0);
}

/* Full width on a phone, but on a wide screen the list stops at a readable
   column instead of stretching across the whole monitor. */
.menu__inner {
  display: grid;
  gap: var(--space-2xl);
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding:
    var(--space-md)
    max(var(--gutter), env(safe-area-inset-right))
    calc(var(--space-3xl) + env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: var(--header-height);
}

.menu__logo {
  width: auto;
  height: 30px;
}

.menu__close {
  display: grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--surface-1);
  color: var(--text-heading);
  cursor: pointer;
}

.profile {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background-color: var(--surface-1);
}

.profile__text {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

.profile__name {
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.profile__meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* A group is the label plus its card. */
.menu__group > * + * {
  margin-top: var(--space-md);
}

.menu__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  min-height: var(--tap-target);
  padding-inline: var(--space-md);
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
}

summary.menu__group-title {
  border-radius: var(--radius-md);
  list-style: none;
  cursor: pointer;
}

summary.menu__group-title::-webkit-details-marker {
  display: none;
}

.menu__chevron {
  display: flex;
  transition: transform var(--transition);
}

details[open] > .menu__group-title .menu__chevron {
  transform: rotate(180deg);
}

/* Square on purpose: that keeps the bar on an active row square too, right up
   to the first and last row. */
.menu__list {
  padding: 0;
  margin: 0;
  background-color: var(--surface-1);
  list-style: none;
}

.menu__item + .menu__item {
  border-top: 1px solid var(--border-subtle);
}

.menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 56px;
  padding-inline: var(--space-lg);

  /* Always there, so an active row does not shove its label sideways. */
  border-inline-start: 3px solid transparent;

  color: var(--text-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.menu__link-label {
  flex: 1;
  min-width: 0;
}

.menu__arrow {
  display: flex;
  color: var(--text-muted);
}

.menu__arrow .icon {
  width: 18px;
  height: 18px;
}

/* Background AND a bar on the left, not colour alone: a difference carried
   only by colour is invisible to part of your users. WCAG 1.4.1. */
.menu__link.is-active {
  border-inline-start-color: var(--accent);
  background-color: var(--accent-soft);
  color: var(--text-heading);
}

.menu__link--danger {
  color: var(--status-error-text);
}

body.is-menu-open {
  overflow: hidden;
}

/* The avatar used to live here. The dashboard hero shows it too, so it moved
   to components.css: two components use it, and that is the rule. */

/* -------------------------------------------------------- hover, pointers */

/* Behind (hover: hover), because on a touchscreen a hover state stays stuck
   on whatever you tapped last. */
@media (hover: hover) {
  .topbar__menu:hover,
  .menu__close:hover,
  summary.menu__group-title:hover {
    background-color: var(--accent-soft);
  }

  .topnav__link:hover,
  .menu__link:hover {
    background-color: var(--accent-soft);
    color: var(--text-heading);
  }

  .menu__link--danger:hover {
    color: var(--status-error-text);
  }
}