/* The Liquid Fleet, la navigation et la recherche de l'en-tête (01/10 : retours du capitaine).

   Posée par chaque page après style.css (et avant menu.css, qu'app.js ajoute au chargement) :
   style.css reste la feuille commune et n'est pas touchée ; tout ce qui est nouveau dans
   l'en-tête vit ici, sous le préfixe ns- (nav search). L'en-tête : la marque à gauche, un champ
   de recherche CENTRÉ (la bible du navire), puis les liens et le wallet de toujours.

   Les règles de style.css à 620 et 480 px restent telles quelles : sous 620, « How it works » et
   « Signals » quittent la rangée (hide-sm), comme avant ; sous 480, la marque garde sa ligne et la
   navigation passe dessous, le bouton du wallet calé à droite. Le champ, lui, se replie en une
   icône sous 1000 px (mesuré : entre la marque et les six éléments de la rangée, il reste moins de
   150 px à 900 ; sous 1280 px depuis le 02/10 au soir, la rangée a grandi : voir « petits écrans » plus bas) ;
   l'icône se pose à gauche de la navigation, et sous 600 (480 avant le 02/10 au soir) au bout de la ligne de la
   marque, pour ne rien prendre à la rangée que la session du 30/09 a mesurée (menu.css). Ouverte,
   la recherche devient une barre fixée en haut de la fenêtre, un voile derrière, le panneau des
   résultats dessous. */

:root {
  --ns-w: 380px;                 /* le champ, au plus large */
  --ns-pop-w: 480px;             /* le panneau des résultats */
  --ns-z: 46;                    /* au-dessus du menu du membre (45), sous les modales (50) et le toast (60) */
  --ns-bar-h: 44px;              /* la barre ouverte sur petit écran */
  --ns-narrow: 1279px;           /* documentaire : la vraie valeur est dans les media queries ci-dessous (et search.js) ; 999 jusqu'au 02/10, 1199 jusqu'au 02/10 au soir */
}

/* le champ ouvert sur petit écran et le panneau se posent par rapport à l'en-tête */
header.top { position: relative }

/* ---------------------------------------------------------------- la colonne du milieu */

.ns-search {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; justify-content: center; align-items: center; padding: 0 22px;
}
.ns-form {
  position: relative; display: flex; align-items: center;
  width: 100%; max-width: var(--ns-w); height: 36px; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s, background .15s;
}
.ns-form:focus-within { border-color: rgba(217,169,76,.55); background: var(--surface-2) }
.ns-ico { position: absolute; left: 11px; width: 14px; height: 14px; fill: var(--ink-faint); pointer-events: none }
.ns-form:focus-within .ns-ico { fill: var(--gold) }
.ns-input {
  flex: 1; min-width: 0; height: 100%; padding: 0 34px; margin: 0;
  background: transparent; border: 0; outline: none; appearance: none; -webkit-appearance: none;
  color: var(--ink); font: 400 14px/1 var(--sans); letter-spacing: -.005em;
}
.ns-input::placeholder { color: var(--ink-faint) }
.ns-input::-webkit-search-cancel-button, .ns-input::-webkit-search-decoration { -webkit-appearance: none; display: none }
/* le raccourci « / », montré tant qu'on ne tape pas */
.ns-kbd {
  position: absolute; right: 9px; padding: 3px 6px; border-radius: 5px; pointer-events: none;
  border: 1px solid var(--line); background: var(--bg-deep); color: var(--ink-faint);
  font: 500 11px/1 var(--mono);
}
.ns-form:focus-within .ns-kbd, .ns-form.has-text .ns-kbd { display: none }
/* effacer ce qu'on a tapé (bureau), fermer la barre (petit écran) : un seul bouton, deux libellés (search.js) */
.ns-clear, .ns-close, .ns-toggle {
  appearance: none; display: grid; place-items: center; padding: 0; border: 0; background: transparent;
  color: var(--ink-mute); cursor: pointer; border-radius: 6px;
}
.ns-clear { position: absolute; right: 6px; width: 26px; height: 26px }
.ns-clear:hover { color: var(--ink); background: var(--surface) }
.ns-clear svg, .ns-close svg, .ns-toggle svg { width: 14px; height: 14px; fill: currentColor; display: block }
.ns-clear[hidden], .ns-close[hidden], .ns-toggle[hidden], .ns-pop[hidden], .ns-scrim[hidden] { display: none }
.ns-close { display: none }
.ns-toggle {
  display: none; width: 36px; height: 36px; flex: none;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm);
  transition: border-color .15s, background .15s, color .15s;
}
.ns-toggle:hover, .ns-toggle[aria-expanded="true"] { color: var(--ink); border-color: #2a3346; background: var(--surface-2) }
.ns-input:focus-visible, .ns-toggle:focus-visible, .ns-clear:focus-visible, .ns-close:focus-visible { outline: 2px solid rgba(217,169,76,.7); outline-offset: 2px }
.ns-input:focus-visible { outline: none }   /* le cadre du champ s'éclaire déjà (focus-within) */

/* ---------------------------------------------------------------- le panneau des résultats */

.ns-pop {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: var(--ns-z);
  width: min(var(--ns-pop-w), calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 18px 50px rgba(0,0,0,.6); text-align: left;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.ns-list { padding: 6px 0 }
.ns-group + .ns-group { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px }
.ns-group-h {
  padding: 8px 14px 4px; margin: 0;
  font: 500 11px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
}
.ns-item {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start;
  padding: 8px 14px; color: var(--ink-mute); text-decoration: none; cursor: pointer;
}
.ns-item:hover, .ns-item[aria-selected="true"] { background: var(--surface-2) }
.ns-item[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--gold) }
.ns-item-ic { grid-row: 1 / span 2; margin-top: 2px; width: 16px; height: 16px; fill: var(--ink-faint) }
.ns-item:hover .ns-item-ic, .ns-item[aria-selected="true"] .ns-item-ic { fill: var(--gold) }
.ns-t { color: var(--ink); font-size: 13.5px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere }
.ns-t .ns-hit { background: none; color: var(--gold); font-weight: 650 }
.ns-s {
  grid-column: 2; color: var(--ink-faint); font-size: 12px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ns-s .ns-hit { background: none; color: var(--ink-mute); font-weight: 600 }
.ns-s .ns-page { color: var(--ink-mute) }
/* une entrée réservée (équipage, lecteurs du direct) : montrée à qui y a droit, avec son cadenas */
.ns-gate {
  grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--bg-deep);
  font: 600 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.ns-gate svg { width: 10px; height: 10px; fill: currentColor }
.ns-msg { margin: 0; padding: 14px 16px; color: var(--ink-mute); font-size: 13px; line-height: 1.5 }
.ns-msg b { color: var(--ink); font-weight: 600 }
.ns-foot {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between;
  padding: 8px 14px; border-top: 1px solid var(--line-soft); color: var(--ink-faint); font-size: 11.5px;
}
.ns-foot kbd { font: 500 10.5px/1 var(--mono); color: var(--ink-mute); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; background: var(--bg-deep) }
.ns-scrim { position: fixed; inset: 0; z-index: calc(var(--ns-z) - 1); background: rgba(3,4,7,.62) }

/* ---------------------------------------------------------------- la rangée des liens */

/* six éléments dans la rangée : un écart un peu plus serré que les 26 px d'avant (style.css), pour
   que « How it works » tienne à côté du champ dès 1000 px sans toucher les règles de 620 et 480 */
nav.top-nav { gap: 22px }
nav.top-nav a { white-space: nowrap }

/* 02/10 : retours du capitaine : deux groupes, les guides, un filet, les instruments, chacun derrière son icône
   (.ico, layout.css), qui passe à l'or sur la page en cours. Le contraste du texte reste celui de --ink-mute (jamais
   --ink-faint : trop pâle).
   02/10 (soir) : retours du capitaine : How you board d'abord et EN OR (le guide qui compte le plus : la porte du
   navire), puis How it works dans le gris des liens ; les deux avec leur icône (l'ancre, le compas) et leur « ? ».
   Les guides reprennent la taille des instruments (14 px) : un lien en or plus petit que ses voisins se lisait comme
   une note de bas de page. Sur sa page, How you board reste or, un cran plus clair. */
nav.top-nav .nav-sep { flex: none; width: 1px; height: 18px; background: var(--line) }
nav.top-nav a .ico { margin-right: 6px }
nav.top-nav a[aria-current] .ico { color: var(--gold) }
nav.top-nav .nav-board { color: var(--gold) }
nav.top-nav .nav-board:hover, nav.top-nav .nav-board[aria-current] { color: var(--gold-hi) }

/* 02/10 : la rangée ne déborde jamais (mesuré de 360 à 1440, anon et membre). La marque ne se tasse plus (elle passait
   sur deux lignes, « The Liquid / Fleet », dès que la place manquait) ; le seul élément qui cède est le wallet : le
   nom du membre se coupe (ellipsis de menu.css) plutôt que la rangée sorte de l'écran. La cloche et l'avatar gardent
   leur taille. */
header.top .brand { flex: none }
nav.top-nav { min-width: 0 }
nav.top-nav > * { flex: none }
nav.top-nav #wallet-slot { flex: 0 1 auto; display: flex; min-width: 0 }
nav.top-nav .fm-bar { min-width: 0 }
nav.top-nav .fm-user { flex: 0 1 auto; min-width: 0 }
nav.top-nav .fm-bell, nav.top-nav .fm-ring, nav.top-nav .fm-caret { flex: none }

/* (l'encart « Why the Fleet exists » de l'accueil vit dans layout.css depuis le 02/10 : il est une colonne du héros) */

/* ---------------------------------------------------------------- petits écrans : l'icône, puis la barre */

/* 02/10 : retours du capitaine : la rangée a deux liens de plus (How you board, le filet) et les icônes ; mesuré, le
   champ n'a plus sa place sous 1200 px (à 1200 il garde 266 px, 233 pour un membre) : l'icône dès 1199, search.js suit
   (NARROW_PX). Puis la rangée se replie par paliers ; 02/10 (soir) : retours du capitaine : How you board passe en
   tête et reste le plus longtemps possible, How it works part le premier (tous deux restent dans « Browse the deck »
   de la recherche et en boutons sur l'accueil). Les guides ont pris leur icône et leur « ? » (56 px de plus) : mesuré
   à 1200, le champ tombait à 223 px et « Come aboard » s'écrasait, d'où l'icône dès 1279 (search.js suit). Mesuré de
   360 à 1440, visiteur et membre, avec ~30 px de marge à chaque palier (les polices système du Mac sont plus larges
   que celles de Windows) ; le nom d'un membre est le seul élément qui cède (ellipsis), jamais un lien :
     1280 et plus : le champ, tous les liens ;
     1000 à 1279 : l'icône de recherche, tous les liens ;
      920 à  999 : sans How it works ;
      820 à  919 : sans Signals non plus (How you board, le filet, True PnL, Weather, le wallet) ;
      621 à  819 : sans How you board ni le filet (True PnL, Weather, le wallet), comme sur un téléphone : avec les deux
                   instruments et le wallet, il ne tient plus sur la ligne de la marque ;
      620 et moins : les règles de style.css (hide-sm) ; 600 et moins : la marque et l'icône sur la première ligne, la
                     rangée dessous (True PnL, Weather, le wallet et la cloche). */
@media (max-width: 1279px) {
  nav.top-nav { gap: 20px }
  .ns-search { flex: 0 0 auto; padding: 0; margin-left: auto; margin-right: 20px }
  .ns-form, .ns-pop, .ns-kbd { display: none }
  .ns-toggle { display: grid }
  .ns-search.is-open .ns-form {
    display: flex; position: fixed; top: 10px; left: 16px; right: 16px; z-index: var(--ns-z);
    width: auto; max-width: none; height: var(--ns-bar-h);
    border-color: rgba(217,169,76,.55); background: var(--surface-2);
  }
  .ns-search.is-open .ns-input { font-size: 16px }     /* 16 px : iOS ne zoome pas sur le champ */
  .ns-search.is-open .ns-close { display: grid; position: absolute; right: 6px; width: 32px; height: 32px }
  /* une seule croix sur la barre (vu à 390 le 01/10 : deux croix côte à côte) : elle ferme ; Échap efface d'abord */
  .ns-search.is-open .ns-clear { display: none }
  .ns-search.is-open .ns-pop {
    display: block; position: fixed; top: calc(var(--ns-bar-h) + 18px); left: 16px; right: 16px;
    width: auto; max-width: none; transform: none; max-height: calc(100vh - var(--ns-bar-h) - 34px); max-height: calc(100dvh - var(--ns-bar-h) - 34px);
  }
  .ns-search.is-open .ns-pop[hidden] { display: none }
  .ns-foot { display: none }                           /* les raccourcis clavier n'ont pas de sens au doigt */
  /* 02/10 : la barre sert aussi sur un écran de bureau étroit (1000 à 1279) : 720 px au plus, centrée, au lieu de
     traverser toute la fenêtre (vu à 1100 : 1 068 px de champ) */
  .ns-search.is-open .ns-form, .ns-search.is-open .ns-pop { left: max(16px, 50% - 360px); right: max(16px, 50% - 360px) }
}

@media (max-width: 999px) {
  nav.top-nav .nav-how { display: none }
}

@media (max-width: 919px) {
  nav.top-nav .nav-tool.hide-sm { display: none }
}

@media (max-width: 819px) {
  nav.top-nav .nav-board, nav.top-nav .nav-sep { display: none }
}

@media (max-width: 620px) {
  .ns-search { margin-right: 16px }
}

/* sous 600 : la marque et l'icône sur la première ligne, la rangée dessous (la règle de style.css à 480, reprise ici
   120 px plus tôt : mesuré le 02/10 au soir, de 481 à 568 la rangée d'un visiteur ne tenait pas sur la ligne de la
   marque et « Come aboard » s'écrasait jusqu'à 30 px, son texte hors du bouton) ; 16 px entre les liens (02/10 : les icônes
   prennent 40 px, mesuré à 390 avec le menu d'un membre) */
@media (max-width: 600px) {
  header.top { flex-wrap: wrap; row-gap: 14px }
  header.top .brand .name { white-space: nowrap }
  nav.top-nav { width: 100%; gap: 16px }
  nav.top-nav #wallet-slot { margin-left: auto }
  .ns-search { margin-right: 0 }
  nav.top-nav a .ico { margin-right: 5px }
}

@media (prefers-reduced-motion: reduce) {
  .ns-form, .ns-toggle { transition: none }
}