/* Top navigation (header.nav). Loaded after styles.css and power.css; every rule is scoped to
   header.nav so it outranks the older .nav rules without editing them.
   Three zones, in DOM and visual order: identity (back to AI Radar, brand, LIVE) | user search | site actions (Stats,
   Heroes, Join) and compact tools (Agent Speed on GitHub as an icon, motion, language).
   Wide screens: one sticky row (61px with its border). Below that the header becomes two rows and
   scrolls away with the page, so the existing 64px anchor offsets never sit under a taller bar.
   No script, no new looping animation; the two existing loops (cursor, LIVE dot) stop with FX off. */
header.nav {
  --hn-h: 34px;            /* primary controls */
  --hn-tool: 28px;         /* motion and language */
  --hn-chip-line: #264a35;
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: max-content minmax(160px, 1fr) max-content;
  align-items: center; column-gap: 20px; row-gap: 0;
  padding: 11px var(--gutter);
  background: linear-gradient(180deg, rgba(8, 14, 10, .95), rgba(5, 8, 6, .9));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 rgba(57, 255, 136, .035);
  font-family: var(--sans);
}
header.nav a:hover { text-decoration: none; }
/* Search shares the header with LIVE; status text floats without moving the bar. */
header.nav .user-search { position: relative; justify-self: start; display: flex; flex-wrap: nowrap; gap: 5px;
  width: min(100%, 270px); min-width: 0; margin: 0; }
header.nav .user-search input { flex: 1; width: 0; max-width: none; height: var(--hn-h); padding: 0 9px; }
header.nav .user-search button { flex: none; height: var(--hn-h); padding: 0 9px; white-space: nowrap; }
header.nav .user-search-status:not(:empty) { position: absolute; top: calc(100% + 6px); right: 0; z-index: 2;
  width: max-content; max-width: min(290px, 85vw); padding: 6px 9px; border: 1px solid var(--line); border-radius: 4px;
  background: #0b130d; line-height: 1.4; }
header.nav .hn-rule { flex: none; width: 1px; height: 20px; background: var(--line); }

/* ---- identity ---- */
/* Leave a useful field beside the explicit search-and-pin action on medium desktops. */
@media (min-width: 1280px) and (max-width: 1599.98px) {
  body[data-page="ladder"] header.nav { position: relative; grid-template-columns: max-content minmax(240px, 1fr); row-gap: 8px; }
  body[data-page="ladder"] header.nav .user-search { justify-self: end; }
  body[data-page="ladder"] header.nav .nav-links { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-end; }
}

header.nav .hn-id { justify-self: start; display: flex; align-items: center; gap: 14px; min-width: 0; }
header.nav .hn-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
header.nav .back-main {
  display: inline-flex; align-items: center; flex: none; height: var(--hn-h); min-height: 0; padding: 0 13px;
  border: 1px solid rgba(57, 255, 136, .6); border-radius: 5px; color: var(--accent);
  background: linear-gradient(180deg, rgba(57, 255, 136, .13), rgba(57, 255, 136, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 14px rgba(57, 255, 136, .07);
  font: 650 13px/1 var(--sans); letter-spacing: .02em; white-space: nowrap;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
header.nav .back-main:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 18px var(--glow); }
header.nav .brand { display: inline-flex; align-items: center; gap: 9px; height: var(--hn-h); margin: 0; color: var(--ink);
  font: 700 16px/1 var(--sans); letter-spacing: .06em; white-space: nowrap; }
header.nav .brand .cursor { width: 8px; height: 17px; }
header.nav .live-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; flex: none;
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em; border-radius: 99px; white-space: nowrap; }
header.nav .live-pill i { flex: none; width: 6px; height: 6px; }
header.nav .live-pill[data-state="live"] { background: rgba(57, 255, 136, .06); }
header.nav .live-pill[data-state="stale"] { background: rgba(242, 193, 78, .06); }

/* ---- actions ---- */
header.nav .nav-links { justify-self: end; display: flex; align-items: center; gap: 4px; margin: 0; font-size: 13.5px; white-space: nowrap; }
header.nav .nav-links :is(a.nav-ladder, a.nav-stats, a.nav-heroes) {
  position: relative; display: inline-flex; align-items: center; height: var(--hn-h); padding: 0 10px; border-radius: 5px;
  color: var(--ink-2); font-weight: 500; transition: color .15s, background-color .15s; }
header.nav .nav-links :is(a.nav-ladder, a.nav-stats, a.nav-heroes)::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease-out; }
header.nav .nav-links :is(a.nav-ladder, a.nav-stats, a.nav-heroes):hover { color: var(--ink); background: rgba(57, 255, 136, .05); }
header.nav .nav-links :is(a.nav-ladder, a.nav-stats, a.nav-heroes):hover::after { transform: scaleX(1); }
header.nav .nav-links .cta { display: inline-flex; align-items: center; justify-content: center; height: var(--hn-h); margin-left: 6px;
  padding: 0 16px; border: 0; border-radius: 5px; background: var(--accent); color: var(--accent-ink); cursor: pointer;
  font: 700 13.5px/1 var(--sans); letter-spacing: .04em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px rgba(57, 255, 136, .45), 0 6px 20px -8px rgba(57, 255, 136, .6);
  transition: background-color .15s, box-shadow .15s; }
header.nav .nav-links .cta:hover { background: #63ffa3; color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(57, 255, 136, .6), 0 0 22px var(--glow); }
header.nav .nav-links .cta:active { background: var(--accent-2); }
header.nav .nav-links .hn-rule { margin: 0 8px 0 10px; }
header.nav .fx-toggle { display: inline-flex; align-items: center; gap: 7px; height: var(--hn-tool); padding: 0 10px 0 9px;
  border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink-3); cursor: pointer;
  font: 500 11px/1 var(--mono); white-space: nowrap; transition: color .15s, border-color .15s; }
header.nav .fx-toggle::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; box-sizing: border-box; }
header.nav .fx-toggle[aria-pressed="true"] { color: var(--mint); border-color: rgba(111, 227, 194, .32); }
header.nav .fx-toggle[aria-pressed="true"]::before { border: 0; background: currentColor; box-shadow: 0 0 6px currentColor; }
header.nav .fx-toggle:hover { color: var(--ink); border-color: #2f5a42; }
header.nav .background-effects { position: relative; flex: none; }
header.nav .background-effects > summary { display: flex; align-items: center; gap: 7px; height: var(--hn-tool); box-sizing: border-box;
  padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink-3); cursor: pointer;
  font: 500 11px/1 var(--mono); list-style: none; }
header.nav .background-effects > summary::-webkit-details-marker { display: none; }
header.nav .background-effects[data-active] > summary { color: var(--mint); border-color: rgba(111, 227, 194, .32); }
header.nav .background-effects > summary:hover { color: var(--ink); border-color: #2f5a42; }
header.nav .background-effects-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 190px;
  box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #0b1510;
  box-shadow: 0 8px 24px #0008; white-space: normal; }
header.nav .background-effect { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); cursor: pointer; }
header.nav .background-effect input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
header.nav .background-effects-menu p { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
header.nav #lang-switch { display: inline-flex; align-items: center; justify-content: center; height: var(--hn-tool); min-width: 36px;
  margin-left: 4px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-2);
  font: 600 11px/1 var(--mono); letter-spacing: .06em; transition: color .15s, border-color .15s; }
header.nav #lang-switch:hover { color: var(--ink); border-color: #2f5a42; }
/* Agent Speed on GitHub: an icon tool beside motion and language; its name is in aria-label and title. */
header.nav .source-link { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--hn-tool); height: var(--hn-tool); margin-right: 6px; border: 1px solid var(--line); border-radius: 5px;
  color: var(--ink-2); transition: color .15s, border-color .15s; }
header.nav .source-link svg { width: 15px; height: 15px; }
header.nav .source-link:hover { color: var(--ink); border-color: #2f5a42; }

/* Effects off: the header's two existing loops hold still too. */
header.nav:has(#fx-toggle[aria-pressed="false"]) .cursor,
header.nav:has(#fx-toggle[aria-pressed="false"]) .live-pill i { animation: none; }

/* Touch: every header control is a 44px target. The wide row is 63px with its border, still inside the
   64px anchor offset. Search text is 16px because smaller text makes iOS zoom the page on focus. */
@media (pointer: coarse) {
  header.nav { --hn-h: 44px; --hn-tool: 44px; padding-top: 9px; padding-bottom: 9px; }
  header.nav #lang-switch { min-width: 44px; }
  header.nav .user-search input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  header.nav *, header.nav *::before, header.nav *::after { animation: none !important; transition: none !important; }
}

/* ---- two rows: identity, then a full-width action bar; scrolls with the page ---- */
@media (max-width: 1279.98px) {
  header.nav { position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px;
    padding: 10px var(--gutter) 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  header.nav .user-search { flex: 1 1 160px; margin-left: auto; }
  header.nav .nav-links { flex: 1 0 100%; margin: 10px calc(-1 * var(--gutter)) 0; padding: 7px var(--gutter);
    border-top: 1px solid var(--line-soft); background: rgba(9, 17, 12, .55); }
  header.nav .nav-links a.nav-stats { margin-left: -10px; }
  header.nav .nav-links .cta { margin-left: auto; }
}

/* ---- phones ---- */
@media (max-width: 599.98px) {
  header.nav { --hn-h: 44px; --hn-tool: 44px; column-gap: 8px; padding-top: 8px; }
  header.nav .hn-id { gap: 8px; }
  header.nav .hn-id .hn-rule { display: none; }
  header.nav .back-main { padding: 0 10px; font-size: 12.5px; }
  header.nav .live-pill .clock { display: none; }
  /* The action bar is full on phones: the GitHub tool takes the free right end of the identity row. */
  header.nav .source-link { position: absolute; top: 8px; right: var(--gutter); width: var(--hn-h); height: var(--hn-h); margin: 0; }
  header.nav .source-link svg { width: 17px; height: 17px; }
  header.nav .nav-links { gap: 4px; margin-top: 8px; padding: 6px var(--gutter) 8px; font-size: 13px; }
  header.nav .nav-links :is(a.nav-ladder, a.nav-stats, a.nav-heroes) { padding: 0 8px; }
  header.nav .nav-links a.nav-stats { margin-left: -8px; }
  header.nav .nav-links :is(a.nav-ladder, a.nav-stats, a.nav-heroes)::after { left: 8px; right: 8px; }
  header.nav .nav-links .cta { flex: 1 1 auto; min-width: 0; margin: 0 4px; padding: 0 12px; font-size: 13px; }
  header.nav .nav-links .hn-rule { display: none; }
  header.nav .fx-toggle { padding: 0 8px 0 7px; gap: 5px; }
  header.nav #lang-switch { min-width: 44px; margin-left: 0; }
}

@media (max-width: 759.98px) {
  header.nav .user-search { flex-basis: 100%; width: 100%; max-width: none; margin-top: 8px; }
  header.nav .user-search input { font-size: 16px; }
  header.nav .user-search button { min-width: 56px; font-size: 13px; }
  /* Brand over its live status, so the longest state labels never widen the identity row. */
  header.nav .hn-lockup { flex-direction: column; align-items: flex-start; gap: 0; }
  header.nav .brand { height: 24px; gap: 7px; font-size: 15px; }
  header.nav .brand .cursor { width: 7px; height: 14px; }
  header.nav .live-pill { height: 16px; padding: 0 6px; gap: 5px; font-size: 9.5px; letter-spacing: .08em; }
  header.nav .live-pill i { width: 5px; height: 5px; }
}

/* Keep the site-statistics label and actions within narrow phone screens. */
@media (max-width: 380px) {
  header.nav .nav-links { gap: 2px; }
  header.nav .nav-links :is(a.nav-ladder, a.nav-stats, a.nav-heroes) { padding: 0 6px; }
  header.nav .nav-links .cta { margin: 0 2px; padding: 0 8px; }
}

/* Three independent views share the same navigation. */
header.nav .nav-pages { display: flex; align-items: center; gap: 4px; }
header.nav .nav-pages [aria-current="page"] { color: var(--ink); background: rgba(57, 255, 136, .07); }
header.nav .nav-pages [aria-current="page"]::after { transform: scaleX(1); }
body:not([data-page="ladder"]) header.nav { grid-template-columns: minmax(0, 1fr) max-content; }
body[data-page="stats"] .overview { border-top: 0; padding-top: 26px; }
body[data-page="heroes"] .heroes { border-top: 0; padding-top: 26px; }
@media (max-width: 599.98px) {
  header.nav .nav-links { flex-wrap: wrap; row-gap: 6px; }
  /* The three pages split the row in equal thirds: one aligned control, each tab a full-width target. */
  header.nav .nav-pages { flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  header.nav .nav-pages :is(a.nav-ladder, a.nav-stats, a.nav-heroes) { justify-content: center; margin-left: 0; }
  header.nav .nav-links .cta { margin-left: 0; }
}
/* Forced colours drop the tinted background and underline bar, so the current page keeps a text underline. */
@media (forced-colors: active) {
  header.nav .nav-pages [aria-current="page"] { text-decoration: underline 2px; text-underline-offset: 6px; }
}

/* ---- effect menus: background (#background-effects) and number (#number-effects), side by side ---- */
/* Both share the .background-effects chip and menu; data-active colours the border while one paints.
   The tools never push the bar wider than the screen: in the two-row layout a row too narrow for every
   tool lets the last ones wrap to the right instead. */
@media (max-width: 1279.98px) {
  header.nav .nav-links { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
}
/* Phones: Join keeps its whole label; the two menus and the language link share its row. */
@media (max-width: 599.98px) {
  header.nav .nav-links .cta { min-width: max-content; }
  header.nav .background-effects > summary { gap: 5px; padding: 0 9px; }
}
/* 400px and below (360/390): the state word gives way, the border colour (data-active) still shows it. */
@media (max-width: 400px) {
  header.nav :is(#background-effects-state, #number-effects-state) { display: none; }
  header.nav .background-effects > summary { padding: 0 8px; }
}
/* The single wide row in English: the longer labels drop the state word until the row has room. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  header.nav:lang(en) :is(#background-effects-state, #number-effects-state) { display: none; }
}

/* ---- search result: position, previous / next, the pinned match; floats under the field ---- */
header.nav .user-search-result { position: absolute; top: calc(100% + 6px); left: 0; z-index: 3; display: flex; align-items: center; gap: 4px;
  width: max(100%, 280px); max-width: min(360px, calc(100vw - 2 * var(--gutter))); padding: 4px; border: 1px solid var(--line); border-radius: 4px;
  background: #0b130d; box-shadow: 0 8px 24px #0008; font: 12px/1.3 var(--mono); }
header.nav .user-search-result[hidden] { display: none; }
header.nav .user-search-result button { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line);
  border-radius: 4px; background: var(--panel); color: var(--accent); font: 16px/1 var(--mono); cursor: pointer; }
header.nav .user-search-result button:disabled { color: var(--ink-3); cursor: default; }
header.nav .user-search-result .us-close { margin-left: auto; color: var(--ink-2); border-color: transparent; }
header.nav .us-where { min-width: 3.6em; color: var(--accent); text-align: center; font-variant-numeric: tabular-nums; }
header.nav .us-who { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
header.nav .us-who::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; background: var(--mint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 1.5h4l-.6 4.2 2.6 2.3v1.5H8.7L8 14.5l-.7-5H4V8l2.6-2.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 1.5h4l-.6 4.2 2.6 2.3v1.5H8.7L8 14.5l-.7-5H4V8l2.6-2.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* While the bar shows, the status line is for screen readers only (it repeats the bar). */
header.nav .user-search[data-results] .user-search-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
@media (pointer: coarse), (max-width: 759.98px) {
  header.nav .user-search-result button { width: 44px; height: 44px; }
  header.nav .user-search-result { width: 100%; max-width: none; }
}