/* ──────────────────────────────────────────────────────────
   Shared topnav overflow / wrap fix.
   Loaded on every page AFTER the page-local <style>, so
   these rules win without needing !important.
   ────────────────────────────────────────────────────────── */

.topnav {
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 4px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Tighten links a bit so 10 of them fit on a normal laptop */
.topnav a.topnav-link,
.topnav .topnav-link {
  font-size: 12.5px;
  padding: 4px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.topnav-brand {
  flex-shrink: 0;
}

/* Spacer: collapses when there's no room — letting right-side
   controls (save state / history / zoom buttons) wrap to a new
   row gracefully instead of clipping off-screen. */
.topnav-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

/* Right-side controls: keep them together as a group so
   they wrap as one block, not interleaved with nav links. */
.topnav .save-state,
.topnav .save-btn,
.topnav .icon-btn,
.topnav #historyBtn,
.topnav .zoom-ctl,
.topnav #whoami {
  flex-shrink: 0;
}

/* Narrow screens: hide brand label, shrink links further */
@media (max-width: 900px) {
  .topnav a.topnav-link,
  .topnav .topnav-link {
    font-size: 12px;
    padding: 3px 7px;
  }
  .topnav-brand { display: none; }
}