:root { --nav-background: rgba(0, 0, 0, 0.72); }
/* Reserve the full navigation height before its coordinated reveal. */
html { scrollbar-gutter: stable; }
.topbar { --nav-height: 88px; }
.topbar .nav { height: var(--nav-height); }
@media (max-width: 560px) {
  .topbar { --nav-height: 76px; }
}

.topbar {
  border-bottom-color: rgba(255, 255, 255, 0.14);
  background: var(--nav-background);
  backdrop-filter: blur(12px) saturate(105%);
}

.links {
  color: #e1eaf0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.links > a,
.nav-dropdown-toggle {
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 4px;
}

.links > a:hover,
.links > a:focus-visible,
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown:hover > .nav-dropdown-toggle,
.nav-dropdown:focus-within > .nav-dropdown-toggle,
.nav-dropdown.is-open > .nav-dropdown-toggle {
  color: #fff;
  background: rgba(21, 150, 255, 0.24);
  outline: none;
}

.links > a.active {
  padding-bottom: 9px;
  border-bottom: 0;
  box-shadow: inset 0 -2px #1596ff;
}

.nav-dropdown {
  position: relative;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.live:hover,
.live:focus-visible {
  color: #fff;
  border-color: #9146ff;
  background: #9146ff;
  transform: translateY(-1px);
  outline: none;
}

.twitch-mark {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
  flex: none;
}

.live-status {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: #ff2d3f;
  box-shadow: 0 0 0 0 rgba(255, 45, 63, 0.7);
  animation: live-status-pulse 1.25s ease-out infinite;
}

.live-status[hidden] {
  display: none;
}

@keyframes live-status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 45, 63, 0.7); opacity: 1; }
  70% { box-shadow: 0 0 0 0.38rem rgba(255, 45, 63, 0); opacity: 0.72; }
  100% { box-shadow: 0 0 0 0 rgba(255, 45, 63, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .live-status { animation: none; }
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.nav-chevron { width: .7rem; height: .45rem; display: block; flex: none; fill: none; stroke: #38bdf8; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transform-origin: center; transition: transform 160ms ease; }

.nav-dropdown-menu {
  position: absolute;
  z-index: 50;
  top: calc(50% + var(--nav-height) / 2);
  left: -18px;
  display: grid;
  min-width: 210px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.96);
  backdrop-filter: blur(12px) saturate(105%);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 38px;
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 0;
  color: #d9e6ee;
  white-space: nowrap;
}

.nav-dropdown-menu a span {
  width: 1.4em;
  flex: none;
  text-align: center;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: rgba(31, 157, 218, 0.14);
  color: #ffffff;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown:hover .nav-dropdown-toggle .nav-chevron,
.nav-dropdown:focus-within .nav-dropdown-toggle .nav-chevron,
.nav-dropdown.is-open .nav-dropdown-toggle .nav-chevron {
  transform: rotate(180deg);
}

.social-links { display: flex; align-items: center; gap: 7px; }
.social-links a { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 2px solid #1596ff; border-radius: 50%; color: #fff; background: rgba(21,150,255,.08); transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; }
.social-links a:hover,.social-links a:focus-visible { color: #fff; border-color: #68c4ff; background: #1596ff; transform: translateY(-1px); }
.social-links svg { width: 17px; height: 17px; fill: currentColor; }
.page-hero h1 { text-transform: uppercase; }

@media (min-width: 1281px) {
  .nav { gap: 16px; }
  .links { gap: 16px; }
}

@media (max-width: 1280px) {
  .menu { display: block; }
  .links { display: none; }
  .links.open {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    padding: 22px 28px;
    flex-direction: column;
    align-items: flex-start;
    top: 100%;
    gap: 8px;
    background: rgba(3, 17, 27, 0.99);
  }

  .links > a {
    width: 100%;
  }

  .nav-dropdown {
    width: 100%;
  }

  .social-links { margin-top: 6px; }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    min-height: 44px;
  }

  .nav-dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    margin-top: 4px;
    padding: 5px 0 5px 14px;
    border: 0;
    border-left: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    display: none;
  }

  .nav-dropdown.is-open .nav-dropdown-menu,
  .nav-dropdown.is-open:hover .nav-dropdown-menu,
  .nav-dropdown.is-open:focus-within .nav-dropdown-menu {
    display: grid;
  }
}

/* Reserve a corner for the live UTC clock without overlapping navigation. */
.topbar .nav {
  width: min(1340px, calc(100% - 32px));
  padding-right: 150px;
}
.nav-clock {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  display: grid;
  gap: 2px;
  color: #fff;
  opacity: 0.5;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (max-width: 560px) {
  .topbar .nav { width: calc(100% - 22px); padding-right: 134px; gap: 12px; }
  .nav-clock { right: 11px; font-size: 13px; }
}
@media (min-width: 561px) and (max-width: 720px) {
  .topbar .live { display: none; }
}

/* Weather and UTC sit inside the original navigation height. */
/* Stretch the weather anchor with the navbar so results track its animated bottom edge. */
.nav-weather { position: absolute; left: 16px; top: 0; bottom: 0; display: flex; align-items: center; gap: 12px; width: max(108px, calc((100vw - 1340px) / 2 - 32px)); color: #929292; font: 14px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.metar-form { position: relative; display: flex; align-items: center; gap: 7px; flex: none; margin: 0; }
.metar-form label { font-size: 13px; }
.metar-form input { box-sizing: content-box; width: 4ch; min-width: 4ch; padding: 4px 6px; border: 1px solid #555; border-radius: 4px; background: rgba(128,128,128,.08); color: #aaa; font: inherit; text-transform: uppercase; }
.metar-form input::placeholder { color: #929292; opacity: 1; }
.metar-form input:focus-visible { outline: 1px solid #aaa; outline-offset: 2px; }
.metar-result { box-sizing: border-box; min-width: 0; overflow-wrap: anywhere; position: absolute; left: 0; top: calc(100% + 8px); width: min(520px, calc(100vw - 32px)); padding: 12px 14px; background: var(--nav-background); backdrop-filter: blur(12px) saturate(105%); border: 1px solid rgba(255, 255, 255, 0.14); color: #e1eaf0; font-size: 16px; line-height: 1.6; }
.metar-result:empty { display: none; }
.metar-options { position: absolute; top: calc(100% + 7px); left: 0; width: min(390px, calc(100vw - 32px)); max-height: 300px; overflow-y: auto; border: 1px solid #555; background: #151515; box-shadow: 0 12px 24px #0008; z-index: 60; }
.metar-options[hidden] { display: none; }
.metar-options button { display: block; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: #ccc; text-align: left; font: inherit; cursor: pointer; }
.metar-options button:hover, .metar-options button:focus-visible { background: #333; color: white; }
/* Equal side clearance keeps the logo and links centered between the utilities. */
.topbar .nav { width: min(1340px, calc(100% - 280px)); padding: 0; margin-inline: auto; }
@media (min-width: 1281px) and (max-width: 1550px) {
  .topbar .nav { gap: 12px; }
  .links { gap: 4px; }
  .links > a, .nav-dropdown-toggle { padding-inline: 8px; }
  .topbar .live { padding-inline: 12px; }
}
@media (max-width: 1900px) {
  .nav-weather { width: 108px; }
}
/* On small screens the complete report takes its own row below the navigation. */
@media (max-width: 720px) {
  .topbar { display: flex; flex-direction: column; }
  .nav-weather { position: static; transform: none; display: block; order: 1; width: auto; margin-inline: 11px; }
  .nav-weather .metar-form { position: absolute; left: 16px; top: calc(var(--nav-height) / 2); transform: translateY(-50%); }
  .metar-result { position: static; width: auto; margin-bottom: 12px; background: transparent; backdrop-filter: none; }
  .nav-clock { top: calc(var(--nav-height) / 2); }
}
@media (max-width: 560px) {
  .nav-weather { left: 11px; }
  .metar-form { flex-direction: column; gap: 1px; }
  .nav-weather .metar-form { left: 11px; }
  .topbar .nav { width: calc(100% - 208px); margin-left: 76px; gap: 4px; }
  .topbar .brand { display: flex; min-width: 54px; }
  .topbar .brand-logo { width: 54px; height: 50px; }
  .topbar .menu { padding: 0; }
}

/* Comfortable touch target whenever navigation is collapsed. */
@media (max-width: 1280px) {
  .topbar .menu {
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    padding: 10px;
    font-size: 28px;
    line-height: 1;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    cursor: pointer;
    touch-action: manipulation;
  }
  .topbar .menu:hover, .topbar .menu[aria-expanded="true"] {
    background: rgba(21,150,255,.2);
  }
  .topbar .menu:focus-visible { outline: 2px solid #55baff; outline-offset: 3px; }
}
@media (max-width: 720px) {
  .nav-clock { display: none; }
  .topbar .nav { width: calc(100% - 156px); margin-left: 140px; margin-right: 16px; gap: 12px; }
}
@media (max-width: 560px) {
  .topbar .nav { width: calc(100% - 104px); margin-left: 88px; margin-right: 16px; }
}

/* Keep the bar in layout while its font metrics and logo settle, then fade as one. */
.topbar {
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease-out;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.topbar.nav-ready { opacity: 1; visibility: visible; }
.topbar .nav, .topbar .brand, .topbar .brand-logo { flex-shrink: 0; }
.topbar .links > a, .topbar .nav-dropdown-toggle, .topbar .live { white-space: nowrap; }
/* Reserve the status dot even before the asynchronous Twitch response arrives. */
.topbar .live-status[hidden] { display: block; visibility: hidden; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .topbar { transition: none; }
}

/* Shrink only the bar height; typography, logo and tap targets remain stable. */
.topbar.nav-compact { --nav-height: 74px; }
.topbar.nav-ready.nav-size-animated .nav { transition: height 180ms ease; }
@media (max-width: 560px) {
  .topbar.nav-compact { --nav-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar.nav-ready.nav-size-animated .nav { transition: none; }
}

/* Navigation labels should not highlight during taps or clicks. */
.topbar, .topbar * {
  -webkit-user-select: none;
  user-select: none;
}
.topbar input, .topbar textarea {
  -webkit-user-select: text;
  user-select: text;
}