/* The v2 site header (<a class="skip"> + <header class="nav">, written by tools/apply_header.py from inc/site.php)
   for the static /tools/ pages, which do not load /style.css. Mirrors the .skip/.nav rules in /style.css (lines 40-69,
   276-302); scoped under .nav so the tools' own `label`, `input`, `.btn`, `a` rules cannot reach it. */
.skip { position: absolute; left: 8px; top: -200px; z-index: 100; padding: 12px 16px; border-radius: var(--rs-radius, 6px);
  background: var(--rs-primary, #1e5bc6); color: var(--rs-on-primary, #fff); font-weight: 700; text-decoration: none; }
.skip:focus, .skip:focus-visible { top: 8px; color: var(--rs-on-primary, #fff); }
.nav { position: sticky; top: 0; z-index: 10; background: var(--rs-bg, #fff); border-bottom: 1px solid var(--rs-border, #c9d2de);
  font: 16px/1.4 var(--rs-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); }
.nav .wrap { max-width: var(--rs-max, 1040px); margin: 0 auto; padding: 0 var(--rs-gutter, 16px); box-sizing: border-box; }
.nav .nav__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rs-space-5, 24px); min-height: 64px; }
.nav .brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--rs-text, #14202e); }
.nav .brand img { width: auto; height: 28px; }
.nav .nav__links { display: flex; gap: var(--rs-space-1, 4px); margin: 0 0 0 auto; padding: 0; }
.nav .nav__links a { display: block; padding: 10px 12px; border-radius: var(--rs-radius, 6px); color: var(--rs-text, #14202e); text-decoration: none; font-weight: 500; }
.nav .nav__links a:hover, .nav .nav__links a[aria-current="page"] { background: var(--rs-primary-soft, #e8effa); color: var(--rs-primary, #1e5bc6); }
.nav .nav__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--rs-space-4, 16px);
  border: 2px solid var(--rs-primary, #1e5bc6); border-radius: var(--rs-radius, 6px); background: var(--rs-primary, #1e5bc6);
  color: var(--rs-on-primary, #fff); font-weight: 700; text-decoration: none; }
.nav .nav__cta:hover { background: var(--rs-primary-hover, #174a9f); border-color: var(--rs-primary-hover, #174a9f); color: var(--rs-on-primary, #fff); }
.nav .nav__toggle { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.nav .nav__burger { display: none; cursor: pointer; min-height: 44px; min-width: 44px; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--rs-border-strong, #8a97a8); border-radius: var(--rs-radius, 6px); font-weight: 600; color: var(--rs-text, #14202e); user-select: none; }
.nav .nav__bars, .nav .nav__bars::before, .nav .nav__bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; }
.nav .nav__bars { position: relative; }
.nav .nav__bars::before, .nav .nav__bars::after { content: ""; position: absolute; left: 0; }
.nav .nav__bars::before { top: -6px; } .nav .nav__bars::after { top: 6px; }
.nav .nav__toggle:checked + .nav__burger .nav__bars { background: transparent; }
.nav .nav__toggle:checked + .nav__burger .nav__bars::before { transform: translateY(6px) rotate(45deg); }
.nav .nav__toggle:checked + .nav__burger .nav__bars::after { transform: translateY(-6px) rotate(-45deg); }
.nav a:focus-visible, .nav .nav__toggle:focus-visible + .nav__burger { outline: 3px solid var(--rs-focus, #1e5bc6); outline-offset: 2px; }
@media (max-width: 760px) {
  .nav .nav__in { gap: var(--rs-space-3, 12px); }
  .nav .nav__cta { margin-left: auto; }
  .nav .nav__burger { display: inline-flex; order: 3; }
  .nav .nav__links { display: none; order: 4; flex-basis: 100%; flex-direction: column; gap: 0; margin: 0 0 var(--rs-space-3, 12px); }
  .nav .nav__toggle:checked ~ .nav__links { display: flex; }
  .nav .nav__links a { padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--rs-border, #c9d2de); font-weight: 600; }
}
@media (max-width: 420px) { .nav .nav__burger { font-size: 0; gap: 0; padding: 0; justify-content: center; } }