/* Global product switcher: the slim dark full-bleed strip atop every page (#49).
   Background is full-width; tabs align to the page content width like the navbar. */

.topbar {
  --topbar-tab-pad: 18px;
  --topbar-tab-size: 14px;
  background: #0e0e0e;
  border-bottom: 2px solid #8b6a2a;
}

.topbar-inner {
  /* Match banner.css .banner-inner (max-width 1760 + gutter) so tabs align to the
     banner / navbar / body content edge, not a narrower 1280 box. */
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 max(var(--pad-x, 24px), 16px);
  display: flex;
  align-items: stretch;
  height: 38px;
  /* Single row at every width: when tabs don't fit, scroll instead of wrap/clip. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* legacy Edge */
}
.topbar-inner::-webkit-scrollbar {
  display: none;               /* Chrome / Safari */
}

.topbar-tab {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;              /* never shrink; overflow scrolls instead */
  white-space: nowrap;
  padding: 0 var(--topbar-tab-pad);
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--topbar-tab-size);
  font-weight: 400;
  line-height: 27.096px;
  letter-spacing: 0.723px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  border-right: 1.314px solid rgba(255, 255, 255, 0.06);
  transition: color 0.15s ease;
}

.topbar-tab:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(212, 175, 55, 0.08);
}
/* Keyboard focus ring (gold, for contrast on the dark strip). */
.topbar-tab:focus-visible {
  outline: 2px solid var(--topbar-accent, #d4af37);
  outline-offset: -2px;
}

/* Active product. */
.topbar-tab.is-active,
.topbar-tab.is-active:hover {
  color: #d4af37;
  font-weight: 700;
  background: rgba(212, 175, 55, 0.08);
}

/* Placeholder product with no destination yet (e.g. The Herald). */
.topbar-tab.is-disabled,
.topbar-tab.is-disabled:hover {
  cursor: default;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
}

/* No trailing divider after the last product (it would dangle in empty space). */
.topbar-tab:last-child { border-right: none; }

/* Mobile masthead: topbar sits in the banner's right column. Tabs keep their
   natural width and stay left-aligned (a single visible product shouldn't
   stretch across the whole bar); the shorter row keeps the shared framed-logo
   column from growing taller. */
@media (max-width: 720px) {
  .topbar-inner { height: 34px; padding: 0; }
}

@media (max-width: 480px) {
  .topbar {
    --topbar-tab-pad: 6px;
    --topbar-tab-size: 13px;
  }
  .topbar-tab { letter-spacing: 0.2px; }
  .topbar-inner { height: 32px; }
}

/* ── Page header + Submit Issue action ──────────────────────
   Lives here (a directly-linked, cache-busted sheet) rather than the @import-ed
   shell.css so edits reliably reach the browser. Used by the mailings-area pages. */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* Submit Issue page action: not nav, so it lives in .page-head, not the subnav. */
.submit-issue-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Match the navbar Sign in/out button so the two blue actions read as a set. */
  padding: 6px;
  border: 0;
  border-radius: 4px;
  background: var(--accent-blue, #007AFF);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s;
}
.submit-issue-btn svg { width: 14px; height: 14px; }
.submit-issue-btn:hover { color: #fff; filter: brightness(.92); }
.submit-issue-btn:focus-visible { outline: 2px solid var(--accent-blue, #007AFF); outline-offset: 2px; }