/* The screen tabs at any width (2026-10-15; navmenu.js). */

/* The tab row takes the room it has and scrolls inside it — it never shrinks
   to nothing (it did at most laptop widths: only the logo, a tab or two and
   the buttons showed). Whenever all the tabs don't fit beside the logo and the
   buttons, navmenu.js gives the row its own full-width line (nav-own-row). */
header.bar nav#nav { flex: 1 1 auto; min-width: 0; position: relative; scroll-behavior: smooth;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
header.bar.nav-own-row { height: auto; min-height: 56px; flex-wrap: wrap; row-gap: 4px; padding-bottom: 4px; }
header.bar.nav-own-row nav#nav { order: 3; flex: 1 1 100%; width: 100%; }
/* With the tabs on their own line, the buttons on the right wrap too rather than
   running off the side (a 1009 px window scrolled sideways, 2026-10-16). */
header.bar.nav-own-row .who { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; white-space: normal;
  justify-content: flex-end; row-gap: 4px; }
/* A fade on the side that has more tabs. */
header.bar nav#nav.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
header.bar nav#nav.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
header.bar nav#nav.more-left.more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* The logo's menu of every screen. */
#brand { cursor: pointer; border-radius: 10px; padding: 2px 6px 2px 2px; }
#brand:hover, #brand[aria-expanded="true"] { background: var(--raised); }
#brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#nav-menu { position: fixed; z-index: 60; min-width: 200px; max-height: calc(100vh - 90px); overflow-y: auto;
  display: grid; gap: 2px; padding: 6px; background: var(--surface-solid);
  border: 1px solid var(--hairline-strong); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
#nav-menu[hidden] { display: none; }
#nav-menu button { text-align: left; background: none; border: 0; border-radius: 8px; padding: 10px 14px;
  min-height: 44px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
#nav-menu button:hover, #nav-menu button:focus-visible { background: var(--hover); outline: none; }
#nav-menu button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }