/* ═══════════════════════════════════════════════════════════════════
   PIPSTER · ÉCHELLE DE PRIX — habillage du panneau
   ─────────────────────────────────────────────────────────────────
   Tout est porté par `#ladderPanel` : la feuille est chargée sur le
   terminal, qui héberge déjà cinq autres panneaux, et une classe nue
   comme `.lad-table` finirait par en toucher un autre.

   Les quatre couleurs reprennent la légende du classeur d'origine —
   bleu pour l'axe, rouge pour le quart de tour, ambre pour
   l'intermédiaire, vert pour le secondaire. Ce n'est pas un choix
   esthétique : c'est le code que le client lit déjà.
   ═══════════════════════════════════════════════════════════════════ */

#ladderPanel {
  /* Déclarées ici et pas dans :root — la peau du terminal a ses propres
     jetons, et en ajouter quatre au global les exposerait à tout le reste. */
  --lad-axis:    #4E7FFF;
  --lad-quarter: #E5484D;
  --lad-mid:     #D9A21B;
  --lad-minor:   #35B37E;
  --lad-line:    var(--stroke, rgba(128, 128, 128, .22));

  font-size: 10.5px;
  min-width: 0;
}

/* L'ATTRIBUT `hidden` NE SUFFIT PAS DÈS QU'UNE RÈGLE POSE UN `display`.
   `.lad-menu { display: grid }` et la règle d'agent utilisateur
   `[hidden] { display: none }` ont la même spécificité : la dernière
   déclarée l'emporte, et c'est la nôtre. Le menu des ancrages s'affichait
   donc en permanence, ouvert dès le chargement. */
#ladderPanel [hidden] { display: none !important; }

/* ─── Barre du prix de référence ──────────────────────────────────── */

.lad-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 6px;
  min-width: 0;
}

.lad-ref-k {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-2);
  flex: none;
}

.lad-ref-in {
  flex: 1 1 auto;
  min-width: 0;                     /* sinon le champ pousse la barre hors du dock */
  background: var(--surface-2, #172033);
  border: 1px solid var(--lad-line);
  border-radius: 5px;
  color: var(--text-1);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 4px 6px;
  text-align: center;
  /* Un prix reste un prix en arabe : ni miroir, ni réordonnancement. */
  direction: ltr;
  unicode-bidi: plaintext;
}

.lad-ref-in:focus {
  outline: none;
  border-color: var(--lad-axis);
}

.lad-icon {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--lad-line);
  border-radius: 5px;
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
}

.lad-icon:hover { color: var(--text-1); border-color: var(--text-2); }
.lad-icon[aria-expanded="true"] { color: var(--lad-axis); border-color: var(--lad-axis); }
/* La bascule du tracé. Même signal que les deux autres commandes de la
   barre — un bouton qui agit doit se reconnaître à la même chose. Éteinte,
   elle retombe sur l'état neutre de `.lad-icon` : rien à écrire. */
.lad-icon[aria-pressed="true"] { color: var(--lad-axis); border-color: var(--lad-axis); }
.lad-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ─── Menu des ancrages & réglages ────────────────────────────────── */

.lad-menu {
  display: grid;
  gap: 2px;
  margin: 0 6px 6px;
  padding: 4px;
  background: var(--surface-2, #172033);
  border: 1px solid var(--lad-line);
  border-radius: 6px;
}

.lad-menu button {
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  padding: 4px 6px;
  text-align: start;
}

.lad-menu button:hover { background: rgba(120, 140, 200, .14); color: var(--text-1); }

.lad-cog {
  margin: 0 6px 6px;
  padding: 6px;
  background: var(--surface-2, #172033);
  border: 1px solid var(--lad-line);
  border-radius: 6px;
}

.lad-cog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  color: var(--text-2);
  min-width: 0;
}

.lad-cog-row > span { min-width: 0; }

.lad-cog-row input,
.lad-cog-row select {
  flex: none;
  width: 88px;
  background: var(--surface, #0e1626);
  border: 1px solid var(--lad-line);
  border-radius: 4px;
  color: var(--text-1);
  font: inherit;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  padding: 2px 4px;
}

.lad-cog-row select { width: 108px; }

.lad-cog-hint {
  color: var(--text-3, var(--text-2));
  font-size: 9.5px;
  line-height: 1.45;
  margin-top: 5px;
}

.lad-reset {
  margin-top: 7px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--lad-line);
  border-radius: 5px;
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  padding: 4px;
}

.lad-reset:hover { color: var(--text-1); border-color: var(--text-2); }

/* ─── Encadrement du prix ─────────────────────────────────────────── */

.lad-now {
  position: relative;
  margin: 0 6px 6px;
  padding: 6px 8px;
  background: rgba(120, 140, 200, .1);
  border: 1px solid var(--lad-line);
  border-radius: 6px;
  min-height: 0;
}

.lad-now:empty { display: none; }

.lad-now-h {
  color: var(--text-1);
  font-size: 11px;
  font-weight: 600;
  /* Chiffres et mots mêlés : sans ceci, « Entre 4273.25 et 4281.25 » sort
     dans le désordre en arabe. */
  unicode-bidi: plaintext;
}

.lad-now-d {
  display: flex;
  gap: 10px;
  margin-top: 3px;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

.lad-now-up { color: var(--up, #35B37E); }
.lad-now-dn { color: var(--down, #E5484D); }

/* Position dans l'encadrement : le bas de la jauge est le niveau du bas. */
.lad-gauge {
  position: absolute;
  inset-inline-end: 6px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: rgba(128, 128, 128, .25);
  overflow: hidden;
}

.lad-gauge i {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: block;
  background: var(--lad-axis);
  border-radius: 2px;
}

/* ─── Bascule échelle / tableau ───────────────────────────────────── */

.lad-tabs {
  display: flex;
  gap: 4px;
  padding: 0 6px 6px;
}

.lad-tab {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--lad-line);
  border-radius: 5px;
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  padding: 3px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lad-tab.on {
  color: var(--text-1);
  border-color: var(--lad-axis);
  background: rgba(78, 127, 255, .14);
}

/* ─── Le tableau ──────────────────────────────────────────────────── */

.lad-scroll {
  max-height: 268px;
  overflow: auto;
  overscroll-behavior: contain;
}

.lad-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* En-tête maintenu visible : passé la dixième ligne, on ne sait plus quelle
   colonne est laquelle. `position: sticky` sur le `th`, jamais sur la rangée —
   une rangée en `collapse` ne peut pas être collante. */
.lad-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2, #172033);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-2);
  text-align: end;
  padding: 3px 6px 5px;
  border-bottom: 1px solid var(--lad-line);
  white-space: nowrap;
}

.lad-table th:first-child { text-align: start; }

.lad-table td {
  padding: 2.5px 6px;
  white-space: nowrap;
  text-align: end;
  /* Prix, angles et écarts sont des nombres : ils gardent leur sens de
     lecture même dans une interface en arabe. */
  unicode-bidi: plaintext;
}

.lad-table td.lad-px:first-child,
.lad-table td.lad-n { text-align: start; }

.lad-table td.lad-px { color: var(--text-1); font-weight: 600; }
.lad-table td.lad-gap,
.lad-table td.lad-n { color: var(--text-2); }

.lad-table td.lad-ang {
  text-align: center;
  color: var(--text-2);
}

/* La nature du niveau se lit à la couleur de son angle et au filet de tête
   de ligne. Le filet est du côté du DÉBUT de ligne : `border-inline-start`
   le fait passer à droite en arabe sans une règle de plus. */
.lad-table tr.lad-r > td:first-child {
  border-inline-start: 2px solid transparent;
}

/* LA SPÉCIFICITÉ SE COMPTE, ELLE NE SE DEVINE PAS. Écrites
   `tr.lad-k-axis > td:first-child`, ces quatre règles perdaient contre la
   règle de filet ci-dessus (`.lad-table tr.lad-r > td:first-child`, une
   classe de plus) : le filet gardait son `transparent` d'origine et la
   nature du niveau ne se voyait NULLE PART, dans les deux sens d'écriture.
   Elles reprennent donc le même préfixe `.lad-table`, ce qui égalise la
   spécificité — et l'ordre tranche, comme il doit. */
.lad-table tr.lad-k-axis    > td:first-child { border-inline-start-color: var(--lad-axis); }
.lad-table tr.lad-k-quarter > td:first-child { border-inline-start-color: var(--lad-quarter); }
.lad-table tr.lad-k-mid     > td:first-child { border-inline-start-color: var(--lad-mid); }
.lad-table tr.lad-k-minor   > td:first-child { border-inline-start-color: var(--lad-minor); }

.lad-table tr.lad-k-axis    .lad-ang { color: var(--lad-axis); font-weight: 700; }
.lad-table tr.lad-k-quarter .lad-ang { color: var(--lad-quarter); font-weight: 600; }
.lad-table tr.lad-k-mid     .lad-ang { color: var(--lad-mid); }
.lad-table tr.lad-k-minor   .lad-ang { color: var(--lad-minor); opacity: .85; }

.lad-table tr.lad-k-axis .lad-px { font-weight: 700; }

/* La ligne du prix de référence : l'origine de tout le tableau. */
.lad-table tr.lad-isref td {
  background: rgba(120, 140, 200, .1);
  font-weight: 700;
  color: var(--text-1);
}

.lad-table tr.lad-isref .lad-ang { color: var(--text-1); }

/* La ligne du prix courant. Elle n'est PAS une ligne de l'échelle : d'où
   l'absence de `lad-r`, et un fond franc pour qu'on ne la confonde pas. */
.lad-table tr.lad-mark td {
  background: rgba(78, 127, 255, .22);
  color: var(--text-1);
  font-weight: 700;
  padding-top: 4px;
  padding-bottom: 4px;
  border-block: 1px solid var(--lad-axis);
}

.lad-empty {
  text-align: center !important;
  color: var(--text-2);
  padding: 12px 8px !important;
  font-size: 10px;
  line-height: 1.5;
  /* Les cellules du tableau sont en `nowrap` — un prix ne se coupe pas.
     Une PHRASE, si : sans cela le message d'accueil sortait tronqué dans
     un panneau de 264 px. */
  white-space: normal !important;
}

/* ─── Légende et mention ──────────────────────────────────────────── */

.lad-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 6px 0;
  font-size: 9.5px;
  color: var(--text-2);
}

.lad-key { display: inline-flex; align-items: center; gap: 4px; }

.lad-key i {
  display: inline-block;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}

.lad-k-axis    i { color: var(--lad-axis); }
.lad-k-quarter i { color: var(--lad-quarter); }
.lad-k-mid     i { color: var(--lad-mid); }
.lad-k-minor   i { color: var(--lad-minor); }

.lad-note {
  padding: 5px 6px 2px;
  font-size: 9px;
  line-height: 1.45;
  color: var(--text-3, var(--text-2));
}

/* PANNEAU VERROUILLÉ : la carte d'achat REMPLACE le contenu, elle ne se
   pose pas par-dessus. `.saas-lockpanel` n'est pas une surimpression — elle
   est dans le flux (voir saas-terminal.css), et #btPanel masque déjà son
   propre contenu de la même façon. Sans cette règle, le module affichait à
   qui ne l'a pas acheté un champ de prix de référence, deux onglets et une
   légende, tous inertes, avant l'offre. */
#ladderPanel.saas-lock-mode > *:not(.saas-lockpanel) { display: none !important; }

/* ─── L'échelle prend la hauteur qu'on lui donne ─────────────────────
   `.lad-scroll` est plafonnée à 268 px parce que le dock FLOTTE au-dessus
   du graphique par défaut : sans plafond, un module à 65 niveaux y
   couvrirait les bougies qu'il commente.

   Dans le panneau d'ogilio (§37 de terminal-ogilio.css), la colonne a une
   hauteur définie et la section la remplit : le plafond n'y protège plus
   rien, il laissait 468 px de vide sous treize niveaux. L'échelle y prend
   donc ce qui reste, le pied et la mention restant collés en bas.

   `min-height: 150px` : sur un écran bas, ou dans le tiroir mobile
   entrouvert, mieux vaut une liste courte qui défile qu'une liste écrasée
   à deux lignes. */
#ogPanel #ladderPanel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#ogPanel #ladderPanel .lad-scroll {
  flex: 1 1 auto;
  min-height: 150px;
  max-height: none;
}

/* ═══════════════════════════════════════════════════════════════════
   RÉACTIONS AUX ANGLES
   ─────────────────────────────────────────────────────────────────
   TROIS TONS, ET PAS UN DE PLUS — c'est la doctrine de couleur du
   terminal, reprise telle quelle de la Matrice de décision :

     `fact`   l'ardoise verte des faits acquis — rejet, cassure, retest
              tenu. Le prix a fait quelque chose, et la bougie est close.
     `watch`  l'orange qui TEMPÈRE — approche, test, attente de
              confirmation. Jamais une direction.
     `bad`    le rouge de ce qui S'EST DÉMENTI — faux breakout, cassure
              invalidée.

   AUCUNE COULEUR NE DIT « ACHETER » NI « VENDRE ». Un rejet à 45° peint
   en vert dirait exactement ce que ce module s'interdit de dire ; le vert
   ici veut dire « confirmé », pas « haussier ». C'est la raison pour
   laquelle le ton suit la CERTITUDE et non le sens du mouvement.
   ═══════════════════════════════════════════════════════════════════ */

#ladderPanel {
  --lad-rx-fact:  #2E9E6B;
  --lad-rx-watch: #D9A21B;
  --lad-rx-bad:   #E5484D;
}

/* ─── D'où vient la référence ─────────────────────────────────────── */

.lad-ref-src {
  flex: none;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3, #7A8394);
  border: 1px solid var(--lad-line);
  border-radius: 4px;
  padding: 1px 4px;
  white-space: nowrap;
}

.lad-ref-src.is-auto {
  color: var(--lad-axis);
  border-color: color-mix(in srgb, var(--lad-axis) 45%, transparent);
}

.lad-ref-lock {
  flex: none;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: var(--lad-axis);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── La colonne « Réaction » ─────────────────────────────────────── */

#ladderPanel .lad-rx {
  text-align: end;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--text-3, #7A8394);
  /* Elle ne doit JAMAIS pousser les trois colonnes de chiffres : le prix,
     l'angle et l'écart sont ce qu'on vient lire, la réaction les commente.
     Un mot long dans une des six langues élargirait sinon la colonne au
     détriment du prix, qui se retrouverait tronqué. */
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ladderPanel .lad-rx-fact  { color: var(--lad-rx-fact); }
#ladderPanel .lad-rx-watch { color: var(--lad-rx-watch); }
#ladderPanel .lad-rx-bad   { color: var(--lad-rx-bad); }

/* ─── Les réglages ────────────────────────────────────────────────── */

.lad-cog-sec {
  margin: 10px 0 4px;
  padding-top: 8px;
  border-top: 1px solid var(--lad-line);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-2);
}

.lad-cog-sub {
  margin: 8px 0 3px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3, #7A8394);
}

.lad-cog-check { cursor: pointer; }

.lad-rx-list {
  display: grid;
  gap: 2px;
}

/* Un réglage sans effet se DÉSARME et le montre : les sept cases sous un
   « Notifications » éteint promettraient un choix qui n'arrivera pas. */
.lad-rx-list.is-off { opacity: .45; }
.lad-rx-cfg.rx-off .lad-cog-row:not(:first-of-type) { opacity: .45; }

.lad-rx-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-2);
  cursor: pointer;
  min-width: 0;
}

.lad-rx-row > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lad-rx-row > input { flex: none; }

.lad-rx-cc {
  flex: none;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--lad-rx-fact);
  opacity: .8;
}

/* ─── L'infobulle d'un badge ──────────────────────────────────────── */

.lad-rx-tip {
  position: absolute;
  z-index: 12;
  /* Le canevas au-dessus duquel elle flotte est en `pointer-events: none`
     et le conteneur porte l'écouteur : si la bulle prenait les événements,
     elle se placerait sous le pointeur, se masquerait, se replacerait —
     un clignotement à la fréquence de la souris. */
  pointer-events: none;
  max-width: 250px;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--surface-1, #0E1522);
  border: 1px solid var(--lad-line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-1);
}

.lad-rx-tip > b:first-child {
  display: block;
  font-size: 11.5px;
  margin-bottom: 3px;
  color: var(--lad-axis);
}

.lad-rx-tip-r {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.lad-rx-tip-r > i {
  font-style: normal;
  color: var(--text-3, #7A8394);
  flex: none;
}

.lad-rx-tip-r > b {
  font-weight: 600;
  text-align: end;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lad-rx-tip-t {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  color: var(--text-3, #7A8394);
}

/* ─── Mobile ──────────────────────────────────────────────────────────
   Sous 520 px la colonne des réactions passerait devant le prix : elle
   cède. L'information reste au graphique et au journal d'alertes, où elle
   a la place de s'écrire en entier. */
@media (max-width: 520px) {
  #ladderPanel .lad-rx { max-width: 44px; font-size: 8px; }
  .lad-rx-tip { max-width: 200px; }
}

/* ─── Le champ de référence garde SA place ────────────────────────────────
   DÉFAUT MESURÉ le 2026-08-14, après l'ajout de la pastille de source et du
   cadenas : la barre est un flex, le champ porte `flex: 1 1 auto` — c'est
   donc LUI, et lui seul, qui a absorbé les 74 px des deux nouveaux éléments.
   Mesuré dans le dock d'ogilio (278 px de barre) : le champ est tombé de
   ~130 px à 67. Un prix de référence fait sept caractères (« 4386.50 ») et
   n'y tenait plus.

   La leçon est déjà écrite dans ce module, à propos de la pastille d'onglet
   qu'on a retirée : UNE VALEUR TRONQUÉE INFORME MOINS QU'UNE ABSENCE DE
   VALEUR. Le champ reprend donc un plancher, et ce sont les deux éléments
   décoratifs qui cèdent — le cadenas disparaît le premier, la pastille
   ensuite, parce que le prix est le sujet et qu'ils n'en sont que la source. */
#ladderPanel .lad-ref-in {
  min-width: 96px;
}

/* Sous 300 px de barre, la pastille de source s'efface : le cadenas seul dit
   déjà « verrouillée », et l'infobulle du champ dit le reste. */
@container (max-width: 300px) {
  #ladderPanel .lad-ref-src { display: none; }
}

/* Repli pour les navigateurs sans `@container` : on interroge la fenêtre,
   moins juste mais jamais faux dans le sens qui compte — un petit écran a
   forcément une barre étroite. */
@supports not (container-type: inline-size) {
  @media (max-width: 420px) {
    #ladderPanel .lad-ref-src { display: none; }
  }
}

.lad-bar { container-type: inline-size; }