/* THE HEADER'S TAB ROW - #quicknav and its menus (web/js/nav.js).
   Moved out of site.css on 2026-09-25 so the two pages that do NOT load
   site.css - token.html (page 2) and index.html (the pool chart, page 3)
   - can carry the same tab row: site.css @imports this file, those two
   <link> it directly. One set of rules, three kinds of page. */

/* Page-split quicklinks nav - plain links between real pages, not a
   JS-driven tab system (see web/js/nav.js). Its own full-width row, last
   in the header, under a rule. */
#quicknav {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  flex-basis: 100%; order: 10; margin-left: 0;   /* its own row, last */
  padding-top: 12px; border-top: 1px solid var(--border);
}
/* Language, the explorer picker, the pumpkin and the theme button: one
   group at the far right of the tab row (nav.js mountNavTools, 2026-09-29).
   When the row is too narrow the group wraps to a line of its own, still
   on the right. */
#navtools {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap;
  max-width: 100%;
  margin-block: -3px;   /* the icon buttons are a touch taller than the tabs: the row keeps the tabs' height */
}
/* The currency disclaimer (a currency other than USD) as the row's last
   line, right-aligned under the tools - a note floating under the button
   covered the page below it, and on a phone ran off the screen. */
header #localeDisclaimer {
  position: static; flex-basis: 100%; width: auto; max-width: none;
  text-align: right; margin-top: -2px; font-size: 10.5px; line-height: 1.3;
  color: var(--text-muted); pointer-events: none;
}
/* On a phone a long label ("Language (PT · BRL)") made the group wider than
   the screen: there it may wrap, still to the right. */
@media (max-width: 760px) {
  #navtools { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; margin-block: 0; }
}
#navtools > * { margin-left: 0; order: 0; }
/* The search box leads the tools group (2026-09-30), a little narrower
   than it was up top so the group still fits beside the tabs. */
#navtools .searchwidget { display: flex; align-items: center; min-height: 0; }
#navtools .searchwidget input { width: 220px; }
/* A laptop (2026-10-06, when the pDAI button joined the pumpkin): 30 px off
   the box keeps the group on the tabs' line at 1366 on page 3 too. The
   button went on 2026-10-14; the box stayed 190 (the Trending tab came the
   same day as the button and takes the room). */
@media (max-width: 1440px) { #navtools .searchwidget input { width: 190px; } }
@media (max-width: 760px) {
  #navtools .searchwidget { flex-basis: 100%; }
  #navtools .searchwidget .emojiwrap { flex: 1; min-width: 0; }   /* an input's natural width held it open past the screen on page 3's search line */
  #navtools .searchwidget input { width: auto; flex: 1; min-width: 0; }
}
/* A fork's own link is a box like the plain tabs, so the row stays level
   on pages 2 and 3 too (their headers style `a` differently). */
#quicknav .navdrop > a { display: inline-block; }
/* Readable over the bolt (2026-09-19, per user: "I need to be able to see
   these better in the bolt"): the tabs are full-ink with a soft halo of
   the page background, so a label crossing the blue still reads. */
#quicknav a {
  text-decoration: none;
  color: var(--text);
  text-shadow: 0 0 6px var(--bg), 0 0 10px var(--bg), 0 1px 2px var(--bg);
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 8px;
}
#quicknav a:hover { color: var(--text); background: var(--surface-hover); }
/* The header search's results are links (js/search.js, 2026-10-15 - a right
   click opens one in a new tab) and the search box sits in this row: they
   keep the dropdown's own look, not a tab's. */
#quicknav a.searchdrop-row { text-shadow: none; font-size: inherit; font-weight: inherit; padding: 8px 12px; border-radius: 0; color: inherit; white-space: normal; }
#quicknav a.searchdrop-row:hover { color: inherit; background: var(--surface-hover); }
#quicknav a.active { color: var(--accent-text); background: var(--accent); }
/* the halo is for a label over the page; on the lit pill it only blurred the text */
#quicknav a.active, #quicknav .groupstab.active { text-shadow: none; }
/* The Favorites fork (nav.js): hover or keyboard focus opens Tokens / Pools
   under the tab; a small gap-free bridge so the pointer can travel down. */
.navdrop { position: relative; display: inline-block; }
.navdrop .navmenu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60; min-width: 120px;
  padding: 6px; margin-top: 2px; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
}
.navdrop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; }
.navdrop:hover .navmenu, .navdrop:focus-within .navmenu { display: flex; }
.navdrop .navmenu a { text-shadow: none; padding: 6px 12px; font-size: 13px; }

/* THE TOKEN GROUPS TAB (2026-09-25, per user: "a tab called token group
   and once you hover you see all the token groups... present them
   underneath and side by side"). The first tab in the row; its menu is a
   GRID of the group pages under it, held open by nav.js (not :hover - the
   hold is the point) until another tab is entered, the page scrolls, a
   click lands outside it, Escape, or the hold runs out. The wrapper is
   .navgroups, NOT .navdrop, so the fork rules above never touch it. */
.navgroups { position: relative; display: inline-block; }
#quicknav .groupstab {
  font: inherit; font-size: 13.5px; font-weight: 500; line-height: normal;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; border: 0; margin: 0;
  background: transparent; color: var(--text); cursor: pointer;
  text-shadow: 0 0 6px var(--bg), 0 0 10px var(--bg), 0 1px 2px var(--bg);
}
#quicknav .groupstab:hover, #quicknav .navgroups.open .groupstab { color: var(--text); background: var(--surface-hover); }
#quicknav .groupstab.active { color: var(--accent-text); background: var(--accent); }
#quicknav .navgroups.open .groupstab.active { background: var(--accent); }
.groupstab .caret { font-size: 10px; opacity: 0.8; transition: transform 0.15s; }
.navgroups.open .caret { transform: rotate(180deg); }
/* The grid: underneath the tab, one card, the group pages side by side in
   as many columns as fit (nav.js clamps the width to the viewport on open,
   so a phone gets two columns and nothing runs off the right edge). */
.groupsmenu {
  box-sizing: border-box;
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  margin-top: 4px; padding: 10px; width: 640px; max-width: calc(100vw - 48px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.18), var(--shadow);
}
.navgroups.open .groupsmenu { display: block; }
.groupsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 2px 6px; }
#quicknav .groupsgrid a {
  text-shadow: none; padding: 7px 10px; font-size: 13px; border-radius: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The Dysnomia hub's own pages, a labelled section under the groups. */
.groupssub { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.groupslabel {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); padding: 2px 10px 6px;
}
/* The heading is the link to the Dysnomia hub (2026-10-02). */
#quicknav a.groupslabel { display: inline-block; text-shadow: none; padding: 3px 10px 5px; margin-bottom: 2px; border-radius: 7px; background: none; color: var(--text-muted); font-size: 11px; font-weight: 700; }
#quicknav a.groupslabel:hover { color: var(--accent); background: var(--surface-hover); }
#quicknav a.groupslabel.active { color: var(--accent); }
#quicknav a.groupslabel .arrow { opacity: 0; transition: opacity 0.12s; }
#quicknav a.groupslabel:hover .arrow, #quicknav a.groupslabel:focus-visible .arrow { opacity: 1; }

/* THE PHONE HEADER (2026-10-07, per user: "clean up mobile as well if you
   can"). It was 340-390 px tall on a phone - half the first screen - before
   a single token: the logo at desktop size, the line under it on two lines,
   the conference badge, NINE tabs wrapped onto three lines, the search box,
   then Language / explorer beside a two-storey theme stack. Now, under
   760 px: the logo smaller with its line on one row, the badge one slim
   line, the tools (search, then Language / explorer / theme in a row) on
   their own rows ABOVE the tabs - nav.js moves #navtools out of the tab row
   on a phone and back on a desktop - and the tabs ONE line that swipes
   sideways, the page's own tab scrolled into view. Their menus open on a
   tap and hang from the tab as a fixed layer (nav.js), since a scrolling
   row would clip a menu hanging inside it. */
@media (max-width: 760px) {
  header { margin-bottom: 12px; gap: 8px 10px; }
  header .wordmark { height: auto; margin-top: 6px; }   /* the "Updated" stamp sits in the top-right corner beside it */
  header .wordmark img { height: 44px; }
  /* 9 px with tighter spacing: one line in English at 360 px, two balanced
     lines in a longer language - 8 px was hard to read (review 2026-10-08). */
  header .wordmark .logotag { font-size: 9px; letter-spacing: 0.06em; margin-top: 1px; text-wrap: balance; }
  header > #navtools { order: 9; flex-basis: 100%; margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
  header > #navtools .searchwidget { flex-basis: 100%; }
  /* Pages 2 and 3: Go Back (the arrow), Main and Token Info lead the search
     line instead of a row of their own (nav.js placeBackLinks). */
  #navtools > .navback { display: flex; align-items: center; gap: 2px; flex: none; margin-right: 2px; }
  #navtools > .navback > a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 6px; margin: 0; border-radius: 8px; font-size: 13px; white-space: nowrap; color: var(--text-muted); text-decoration: none; }
  #navtools > .navback > a:active { background: var(--surface-hover); }
  #navtools > .navback > a[hidden] { display: none; }
  #navtools > .navback > .goback { font-size: 16px; padding: 0 8px; }
  #navtools > .navback .gbword { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  header > #navtools:has(> .navback) > .searchwidget { flex: 1 1 120px; min-width: 0; }
  /* ...and the rest of the tools always on the next line: a zero-height
     break (its own flex line, one row-gap given back) between them. */
  header > #navtools:has(> .navback) { row-gap: 0; }
  header > #navtools:has(> .navback) > .navback, header > #navtools:has(> .navback) > .searchwidget { margin-bottom: 8px; }
  header > #navtools:has(> .navback)::before { content: ""; order: 1; flex-basis: 100%; height: 0; }
  header > #navtools:has(> .navback) > :not(.navback):not(.searchwidget) { order: 2; }
  header > #localeDisclaimer { order: 9; flex-basis: 100%; position: static; width: auto; max-width: none; text-align: right; margin-top: -4px; font-size: 10.5px; line-height: 1.3; color: var(--text-muted); pointer-events: none; }
  #quicknav {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 2px;
    scrollbar-width: none; overscroll-behavior-x: contain;   /* no -webkit-overflow-scrolling: obsolete, and older iPhone Safari clips a fixed menu inside such a scroller */
    padding: 8px 0 2px;
    /* No fade mask at the edge: a mask paints the menus hanging from the
       tabs inside the row's own layer, under the page. The tab cut by the
       edge is the cue that the row swipes. */
  }
  #quicknav::-webkit-scrollbar { display: none; }
  #quicknav > * { flex: none; }
  #quicknav a, #quicknav .groupstab { padding: 9px 11px; font-size: 13px; white-space: nowrap; }
  /* The menus: no hover on a phone - a tap opens one (.open), and it hangs
     from the tab as a fixed layer placed by nav.js. */
  .navdrop:hover .navmenu, .navdrop:focus-within .navmenu { display: none; }
  .navdrop.open .navmenu { display: flex; }
  .navdrop .navmenu a { padding: 11px 14px; font-size: 14px; }
  #quicknav .groupsgrid a { padding: 10px 10px; font-size: 13.5px; }
  .groupsmenu { box-sizing: border-box; }
  /* iPhone Safari zooms the page in when a box under 16 px gets the focus
     (site.css has the same rule; this file reaches pages 2 and 3 too). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea { font-size: 16px; }
}
/* A touch screen wider than a phone (a tablet) has no hover either: the
   first tap on a tab with a menu opens the menu, the second follows it. */
@media (hover: none) {
  .navdrop:hover .navmenu, .navdrop:focus-within .navmenu { display: none; }
  .navdrop.open .navmenu { display: flex; }
}
/* The Dysnomia heading has no hover to show its arrow on a touch screen:
   shown, and a finger-sized target (2026-10-07). */
@media (hover: none) {
  #quicknav a.groupslabel .arrow { opacity: 1; }
  #quicknav a.groupslabel { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; }
}

/* The header search's results on a phone (2026-10-07): the name first and
   its badges after it (they led and pushed it off the line), the figures on
   a line under the name rather than squeezed into a column beside it, and a
   badge never broken inside itself ("PulseX / V2" over two lines). In this
   file because the search box is the header's, on pages 2 and 3 too. */
/* A badge never breaks inside itself ("PulseX / V2" over two lines), and
   the TVL / vol line keeps together - at every width (2026-10-08: the
   desktop dropdown wrapped both too). */
.searchdrop-pair .sdsym, .dexbadge, .searchdrop-pair .groupbadge, .searchdrop-metrics .searchdrop-sub { white-space: nowrap; }
@media (max-width: 760px) {
  .searchdrop-row { flex-wrap: wrap; row-gap: 3px; }
  .searchdrop-metrics { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; text-align: left; padding-left: 30px; }
  .searchdrop-pair { flex-wrap: wrap; row-gap: 3px; }
  .searchdrop-metrics .searchdrop-sub { white-space: normal; }
}