/* Sections live in the top bar, between the wordmark and the download.
   Three tabs, because Garage and Settings are per-device storage on a phone
   and a web copy of them would be empty on every visit. */
.topnav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.topnav a {
  text-decoration: none; color: var(--ink-soft); font-size: 15px; font-weight: 600;
  padding: 8px 12px; border-radius: 999px; white-space: nowrap;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.topnav a[aria-current="page"] { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.topnav a:active { transform: scale(.97); }
@media (hover:hover) and (pointer:fine) { .topnav a:not([aria-current="page"]):hover { color: var(--ink); background: var(--paper-2); } }
@media (prefers-reduced-motion: reduce) { .topnav a { transition: none; } }

/* At phone width the wordmark gives up its text so the sections and the
   download both keep their full labels. The icon still identifies the site. */
@media (max-width: 620px) {
  .strip .mark span { display: none; }
  .topnav a { padding: 8px 10px; font-size: 15px; }
}
@media (max-width: 400px) {
  .topnav a { padding: 8px 7px; font-size: 14px; }
  .strip { gap: 6px; }
}

/* Four sections don't fit beside the download link on a phone. About stays
   reachable from every page's footer, so its tab gives way first. */
@media (max-width: 520px) {
  .topnav a[href="/about"] { display: none; }
}