/* Plumo — wspolny naglowek dla WSZYSTKICH stron.
   Jedno zrodlo prawdy: nie kopiowac tych regul do <style> w plikach HTML. */

header.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 14, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line, rgba(140, 234, 221, 0.14));
}

header.topbar nav {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px; max-width: 1120px; margin: 0 auto;
}

header.topbar nav img { width: 34px; height: 34px; }

header.topbar nav .name {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700; font-size: 20px;
  color: var(--text, #E9ECF3); text-decoration: none;
  display: flex; align-items: center; gap: 14px;
}

header.topbar nav .spacer { flex: 1; }

header.topbar nav a.quiet {
  color: var(--muted, #98A1B4); text-decoration: none; font-size: 15px;
}
header.topbar nav a.quiet:hover { color: var(--text, #E9ECF3); }
header.topbar nav a.quiet.active { color: var(--mint, #8CEADD); }

header.topbar nav a.lang {
  margin-left: 6px; font-family: "IBM Plex Mono", monospace; font-size: 12px;
  letter-spacing: 0.08em; color: var(--mint, #8CEADD); text-decoration: none;
  border: 1px solid var(--line, rgba(140, 234, 221, 0.14));
  border-radius: 999px; padding: 5px 12px;
}
header.topbar nav a.lang:hover {
  background: var(--panel-2, #1B212C);
  border-color: rgba(140, 234, 221, 0.4);
}

header.topbar nav a.quiet:focus-visible,
header.topbar nav a.lang:focus-visible,
header.topbar nav .name:focus-visible {
  outline: 2px solid var(--teal, #52CBC2); outline-offset: 3px;
}

@media (max-width: 520px) {
  header.topbar nav { flex-wrap: wrap; row-gap: 8px; }
}