/* #84 WiK CODEX / single canonical header across ALL HTML pages.
 * 2026-10-17 — authoritative geometry: no rem/em inherited sizing, no CSS gap.
 * Intentionally applies AFTER older page styles and wins their header cascade.
 * Same header DOM, same CSS values, same image and SVG across every page.
 * Do not override any .wik-site-header property in a page stylesheet.
 */
:root {
  --wik-header-top: 10.4px;
  --wik-header-height: 53.6px;
  --wik-header-max-width: 668px;
  --wik-header-logo-width: 160px;
  --wik-header-control-width: 116px;
  --wik-header-icon-size: 19.52px;
}

/* Every wrapper begins at the same viewport Y; override legacy page-specific
   .page-shell padding without touching padding on main sections. */
body .page-shell.wik-header-shell {
  padding-top: calc(var(--wik-header-top) + env(safe-area-inset-top, 0px));
}
/* Homepage places the header in .top-area, rather than the legacy page-shell. */
body .top-area.wik-header-top-area {
  padding-top: calc(var(--wik-header-top) + env(safe-area-inset-top, 0px));
}

/* Align to one viewport-centred pixel grid regardless of old shell width. */
body header.site-header.wik-site-header {
  position: relative;
  z-index: 30;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: min(calc(100vw - max(14px, env(safe-area-inset-left, 0px)) - max(14px, env(safe-area-inset-right, 0px))), var(--wik-header-max-width));
  max-width: var(--wik-header-max-width);
  height: var(--wik-header-height);
  min-height: var(--wik-header-height);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1;
}

body header.wik-site-header > a.wik-header-brand {
  display: flex;
  flex: 0 1 var(--wik-header-logo-width);
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: var(--wik-header-logo-width);
  max-width: var(--wik-header-logo-width);
  min-width: 0;
  height: var(--wik-header-height);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f2f2f2;
  text-decoration: none;
}
body header.wik-site-header > a.wik-header-brand > img.brand-logo {
  display: block;
  flex: 0 1 var(--wik-header-logo-width);
  box-sizing: border-box;
  width: var(--wik-header-logo-width);
  max-width: 100%;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: left center;
}

body header.wik-site-header > .wik-header-language {
  position: relative;
  display: block;
  flex: 0 0 var(--wik-header-control-width);
  box-sizing: border-box;
  width: var(--wik-header-control-width);
  height: 44px;
  margin: 0 0 0 auto;
  padding: 0;
}
body header.wik-site-header .language-toggle {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: var(--wik-header-control-width);
  min-width: var(--wik-header-control-width);
  max-width: var(--wik-header-control-width);
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 6.08px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f2f2f2;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: pointer;
}
html:lang(en) body header.wik-site-header .language-toggle,
html:lang(es) body header.wik-site-header .language-toggle { font-family: "Inter", Arial, sans-serif; }
html:lang(ru) body header.wik-site-header .language-toggle { font-family: "PT Sans", Arial, sans-serif; }
body header.wik-site-header .language-toggle:hover,
body header.wik-site-header .language-toggle:focus-visible,
body header.wik-site-header .language.is-open .language-toggle {
  background: rgba(214,170,79,.12);
  outline: none;
}
body header.wik-site-header .language-icon {
  display: block;
  flex: 0 0 var(--wik-header-icon-size);
  box-sizing: border-box;
  width: var(--wik-header-icon-size);
  min-width: var(--wik-header-icon-size);
  height: var(--wik-header-icon-size);
  margin: 0 5.44px 0 0;
  padding: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body header.wik-site-header .language-current {
  display: block;
  flex: 0 0 60px;
  box-sizing: border-box;
  width: 60px;
  max-width: 60px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body header.wik-site-header .language-chevron {
  display: block;
  flex: 0 0 6.72px;
  box-sizing: border-box;
  width: 6.72px;
  height: 6.72px;
  margin: 0 0 0 6.88px;
  padding: 0;
  border-top: 0;
  border-left: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1.92px) rotate(45deg);
}
body header.wik-site-header .language-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5.6px);
  right: 0;
  left: auto;
  min-width: 172.8px;
  box-sizing: border-box;
  margin: 0;
  padding: 6.08px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16.8px;
  background: rgba(8,9,9,.86);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 19.2px 38.4px rgba(0,0,0,.58);
}
body header.wik-site-header .language-option {
  display: block;
  width: 100%;
  min-height: 43.2px;
  margin: 0;
  padding: 0 12.8px;
  border: 0;
  border-radius: 12.48px;
  background: transparent;
  color: rgba(242,242,242,.78);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
body header.wik-site-header .language-option + .language-option { margin-top: 2.88px; }
body header.wik-site-header .language-option:hover,
body header.wik-site-header .language-option:focus-visible {
  background: rgba(214,170,79,.12);
  color: #f3d27a;
  outline: none;
}
body header.wik-site-header .language-option.is-active {
  background: linear-gradient(180deg,#f3d27a 0%,#c08a2b 100%);
  color: #090806;
}
/* Keep the logo usable on exceptionally narrow devices, never change its
   aspect ratio, never let the language control overflow the viewport. */
@media (max-width: 290px) {
  body header.wik-site-header > a.wik-header-brand { flex-shrink: 1; }
}