/* One header for every page.
 *
 * Each page used to style its own header, and they had drifted apart: the
 * menu started anywhere from 374px to 625px across depending on the page,
 * three pages had no Sign out, History had its own logo size, type and
 * button shape, Guide its own background, and only four pages kept the bar
 * on screen while scrolling.
 *
 * This file is the one definition. Each page links it after its own <style>,
 * and every rule here is scoped to .app-header, so it takes precedence over
 * the page-level header rules without !important. The look is the one most
 * pages already had: black bar, 36px logo, round-cornered menu buttons.
 *
 * Layout is brand | menu | signed-in person. The brand column has a fixed
 * width, so the menu starts in the same place on every page whatever that
 * page's title is, and the person always sits at the far right. Below
 * 1400px, where the full admin menu no longer fits on one line, the menu
 * moves to a row of its own underneath.
 */

/* Keep the scrollbar's space reserved whether or not a page scrolls. Without
   it a short page is 15px wider than a long one, and the whole bar shifts
   sideways as you move between them — or as a page's data finishes loading.
   Overlay scrollbars (macOS, phones) take no space, so nothing changes there. */
html { scrollbar-gutter: stable; }

.app-header {
  position: sticky; top: 0; z-index: 100;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) auto;
  grid-template-areas: "brand nav user";
  align-items: center; justify-content: normal;
  column-gap: 24px; row-gap: 10px;
  padding: 14px 24px;
  background: #000;
  border: 0; border-bottom: 1px solid #1e2640; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-sizing: border-box;
  font-family: 'Nunito Sans', sans-serif;
}

/* Brand: logo and the page's name */
.app-header .logo { grid-area: brand; display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; }
.app-header .logo-img { height: 36px; width: auto; display: block; flex: none; }
.app-header .logo-sub {
  /* Also undoes the visually-hidden rule some pages apply on small screens;
     the small-screen rule below puts it back at one width for every page. */
  position: static; width: auto; height: auto; clip: auto; padding: 0; border: 0;
  margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 15px; font-weight: 400; line-height: normal; letter-spacing: 0.2px; color: #888;
}

/* Menu */
.app-header #nav-links { grid-area: nav; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.app-header .nav-btn {
  padding: 6px 14px; border-radius: 20px; border: 1px solid #1e2640; background: none;
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: normal;
  color: #6b7499; text-decoration: none; transition: all 0.2s;
}
.app-header .nav-btn:hover { border-color: #ff4d3a; color: #ff4d3a; }
.app-header .nav-btn.active { background: #ff4d3a; border-color: #ff4d3a; color: #fff; }
/* The dropdowns come from config.js; pin their colours so a page with its own
   palette (History) shows the same menu as the rest. */
.app-header .nav-menu { background: #0f1322; border-color: #1e2640; }
.app-header .nav-menu a { color: #6b7499; }
.app-header .nav-menu a:hover { background: rgba(255,255,255,0.06); color: #ff4d3a; }
.app-header .nav-menu a.active { background: #ff4d3a; color: #fff; }

/* Signed-in person */
.app-header #user-bar {
  grid-area: user; justify-self: end;
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 13px; color: #6b7499; white-space: nowrap;
}
.app-header #user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1.5px solid #1e2640; flex: none; }
.app-header #user-name { display: inline; font-size: 13px; font-weight: 600; color: #e8eaf6; }
.app-header #btn-signout {
  background: none; border: 1px solid #1e2640; border-radius: 8px; padding: 4px 10px;
  font-family: inherit; font-size: 12px; color: #6b7499; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.app-header #btn-signout:hover { border-color: #ff4d6a; color: #ff4d6a; }

@media (max-width: 1399px) {
  .app-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand user" "nav nav"; }
}
@media (max-width: 768px) {
  .app-header { padding: 10px 14px; column-gap: 12px; }
  .app-header .nav-btn { padding: 5px 10px; font-size: 11px; }
}
@media (max-width: 480px) {
  .app-header { padding: 8px 10px; }
  .app-header .logo-sub {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .app-header #user-name { display: none; }
  .app-header .nav-btn { padding: 4px 8px; font-size: 10px; }
}