/* The top bar, defined once for every page.
 *
 * WHY THIS FILE EXISTS. The navigation markup was already shared - api.py
 * emits it - but each page styled the bar around it from its own stylesheet:
 * 0.6rem/0.75rem on settings and the dashboard, 10px/16px on subscriptions,
 * 10px/12px on the editor, and a brand that carried a coloured mark on two
 * pages out of four. The links were identical and still landed in a
 * different place on every page, so switching tab looked like the layout
 * shifting under you.
 *
 * Load this LAST, after the page's own stylesheet. Same specificity, later
 * wins, so this file is the final word on the bar regardless of what the
 * others say about it.
 *
 * Self-contained on purpose: the pages disagree about variable names
 * (--ink versus --text-primary), so this declares its own rather than
 * depending on whichever set happens to be loaded.
 */

.topbar {
  --tb-ink: #111827;
  --tb-ink-2: #4b5563;
  --tb-line: #e5e7eb;
  --tb-surface: #fff;
  --tb-surface-2: #f9fafb;
  --tb-accent: #1d4ed8;

  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  /* Fixed, not rem: the pages set different root font sizes, and a bar that
     is 3px taller on one of them is exactly the shift this file exists to
     remove. */
  padding: 9px 20px; min-height: 56px;
  background: var(--tb-surface);
  border-bottom: 1px solid var(--tb-line);
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  .topbar {
    --tb-ink: #e5e7eb;
    --tb-ink-2: #9ca3af;
    --tb-line: #374151;
    --tb-surface: #111827;
    --tb-surface-2: #1f2937;
    --tb-accent: #60a5fa;
  }
}

.topbar .brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 650; font-size: 16px; color: var(--tb-ink);
  text-decoration: none;
  /* Fixed width so the nav starts at the same x on every page. Without it
     the tabs move whenever the brand renders even slightly differently. */
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Fixed box so the nav starts at the same x even before the image has
   loaded - otherwise the tabs shift left-to-right on first paint, which is
   the same complaint this file was written to fix. */
.topbar .brand-mark {
  width: 30px; height: 30px; flex: 0 0 auto; display: block;
  /* The file now has a white background baked in, so it needs a radius of
     its own - a hard white square against a white bar shows its corners
     wherever the surface is not pure white (dark mode, hover rows). */
  border-radius: 6px;
}
/* No underline: the brand is chrome, not body copy, and underlining the
   product name on hover reads as a defect rather than an affordance. */
.topbar .brand:hover { opacity: .85; }
.topbar .brand-name { font-weight: 650; }

/* Square, not pill-shaped. With the inset rule below these read as tabs
   rather than as a row of buttons - and a tab strip is what the thing
   actually is. gap 0 so the underline runs as one edge. */
.topbar .topnav { display: flex; gap: 0; flex: 0 0 auto; }
.topbar .topnav a {
  padding: 8px 14px; border-radius: 0; text-decoration: none;
  color: var(--tb-ink-2); font-size: 14px; line-height: 1.4;
  white-space: nowrap;
}
.topbar .topnav a:hover { background: var(--tb-surface-2); color: var(--tb-ink); }
/* Current item: weight and a rule, never colour alone. */
.topbar .topnav a[aria-current="page"],
.topbar .topnav a.active {
  color: var(--tb-ink); font-weight: 650; background: var(--tb-surface-2);
  box-shadow: inset 0 -2px 0 var(--tb-accent);
}

/* Everything after the nav is pushed right. Pages put their own controls
   there - a theme toggle, a project picker, Sign out - and those may differ
   without moving the tabs. */
.topbar .spacer, .topbar .grow { flex: 1 1 auto; }

@media (max-width: 720px) {
  .topbar { gap: 10px; padding: 8px 12px; }
  .topbar .topnav { overflow-x: auto; }
  .topbar .brand-name { display: none; }   /* mark only, keeps the row short */
}