/* ═══════════════════════════════════════════════════════════════════════
   PIPSTER PRO · ICÔNES D'INSTRUMENTS — placement
   ─────────────────────────────────────────────────────────────────────
   Le dessin vient de `static/instrument-icons.js` (généré). Cette feuille
   ne fait que réserver la place et poser le filet.

   ESPACE DE NOMS À PART, ET CE N'EST PAS DU CONFORT. Le terminal impose
   `fill: none; stroke: currentColor` à ses pictogrammes (`.dock-ico`,
   `.ico`) : ce sont des icônes de trait. Une icône d'instrument est un
   APLAT MULTICOLORE — tombée dans une de ces règles, elle sortirait
   parfaitement invisible, sans la moindre erreur. D'où `.ii` et
   `.ii-slot`, que rien d'autre ne vise, et un `fill` jamais hérité.
   ═══════════════════════════════════════════════════════════════════ */

.ii {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* La boîte. `--ii-size` est le seul réglage : chaque emplacement le pose. */
.ii-slot {
  display: inline-flex;
  flex: none;
  width: var(--ii-size, 20px);
  height: var(--ii-size, 20px);
  border-radius: 50%;
  overflow: hidden;
  /* Deux marques ont un disque presque blanc — Google et Microsoft, dont
     l'identité EST leurs couleurs et qu'on ne pouvait donc pas assombrir.
     Sur la surface claire du thème clair, leur bord disparaissait. Ce
     filet intérieur le rend, et reste invisible sous un disque foncé :
     une seule règle couvre les deux thèmes. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}

/* ─── Ligne de contexte ───────────────────────────────────────────────
   L'icône est un VOISIN de #pbSymbol, jamais son enfant : app.js écrit
   `textContent` sur ce nœud à trois endroits, dont le rafraîchissement du
   prix toutes les deux secondes. Placée dedans, elle serait effacée au
   premier tic — et le défaut n'apparaîtrait qu'après le chargement.

   PAS D'`order` ICI, ET C'EST UNE CORRECTION MESURÉE. La première version
   posait `order: 1` en permanence pour se ranger avec la pastille de
   marché. Or la peau n'ordonne les enfants de la bande QUE sous 640 px :
   au-dessus, tout le monde est à `order: 0`, et un seul élément à 1 part
   en BOUT DE LIGNE. L'icône se retrouvait à 1 172 px du bord gauche,
   collée au dernier badge — relevé à l'écran, pas déduit. Le rang n'est
   donc posé que là où la peau en pose un ; ailleurs, l'ordre du document
   suffit. */
#instIcon {
  --ii-size: 26px;
}

@media (max-width: 640px) {
  /* Même rang que la pastille de marché. À rang égal, c'est l'ordre du
     document qui départage : l'icône est déclarée après elle, elle la
     suit à l'écran. */
  #instIcon { order: 1; }
}

#priceBar #instIcon {
  --ii-size: 20px;
  margin-inline-end: 7px;
  vertical-align: middle;
}

@media (max-width: 1023.98px) {
  #instIcon { --ii-size: 22px; }
}

@media (max-width: 560px) {
  #instIcon { --ii-size: 20px; }
}

/* ─── Liste déroulante des symboles ───────────────────────────────────
   La rangée était `justify-content: space-between` sur DEUX enfants :
   sigle à gauche, nom à droite. Un troisième enfant aurait réparti les
   trois à intervalles égaux et décollé l'icône de son sigle. On repasse
   donc en alignement au départ, et c'est le NOM qui est poussé à droite
   par sa marge automatique — le résultat est identique à l'ancien, avec
   l'icône en plus. */
#symbolDropdown li[data-ticker] {
  align-items: center;
  justify-content: flex-start;
}

#symbolDropdown .sd-ico {
  --ii-size: 22px;
  margin-inline-end: 10px;
}

#symbolDropdown .sd-name {
  margin-inline-start: auto;
  padding-inline-start: 10px;
}

/* ─── Champ de recherche ──────────────────────────────────────────────
   Au repos le champ montre l'instrument chargé : la loupe cède la place à
   son icône, comme sur TradingView. Dès qu'on y entre, la loupe revient —
   c'est elle qui dit « on cherche », l'icône dirait « on affiche ».

   RÉSERVÉ AUX GRANDS ÉCRANS. Sous 1024 px la peau replie la boîte de
   recherche sur sa seule loupe (`#symbolInput` à largeur nulle) : y
   masquer la loupe retirerait le seul point d'accroche de la recherche. */
#symIcon { display: none; }

@media (min-width: 1024px) {
  #symbolWrap:not(:focus-within) > #symIcon {
    display: inline-flex;
    --ii-size: 18px;
  }
  #symbolWrap:not(:focus-within) > .sw-icon { display: none; }
}

/* Tant qu'aucun instrument n'est peint, la boîte ne réserve rien : un rond
   vide à côté du titre ressemblerait à une image cassée. */
.ii-slot:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   PLANCHE DE L'ADMINISTRATION — /admin/instruments
   ─────────────────────────────────────────────────────────────────────
   Cette feuille n'est chargée sur les pages du site que si la page la
   demande (`admin_render(..., ['instrument-icons'])`). Les règles de
   placement du terminal, plus haut, sont inertes ici : aucun des
   identifiants qu'elles visent n'existe sur cette page.
   ═══════════════════════════════════════════════════════════════════ */

.iis-grid {
  --ii-size: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
}

.iis-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--surface-2);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.iis-cell:hover { background: var(--raised); border-color: var(--border); }
.iis-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Retour de copie porté par la cellule : une notification flottante pour un
   mot copié serait disproportionnée. */
.iis-cell.is-copied { border-color: var(--up); background: var(--up-soft); }

/* Un repli se voit de loin, ou il ne sert à rien de le signaler. */
.iis-cell.is-fallback { border-color: var(--down); background: var(--down-soft); }

.iis-ico { flex: none; }

.iis-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }

.iis-t {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  /* Les tickers portent des caractères neutres (`^GSPC`, `SI=F`) que le
     sens de lecture arabe rejetterait à l'autre bout. Le sigle est une
     donnée technique : il se lit de gauche à droite, partout. */
  direction: ltr;
  unicode-bidi: isolate;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iis-n {
  font-size: 11px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iis-warn {
  margin-inline-start: auto;
  flex: none;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--down);
  color: var(--on-contrast, #fff);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}