/* ══════════════════════════════════════════════════════════════════════════
   PIPSTER · MARKET INTELLIGENCE — HABILLAGE DU PANNEAU
   ──────────────────────────────────────────────────────────────────────────
   Suisse, institutionnel, sobre. La hiérarchie est portée par la TAILLE et
   l'ESPACE, pas par la couleur : une seule encre d'accent, deux teintes
   sémantiques, et rien d'autre.

   ── LA COULEUR NE DIT PAS « BIEN » OU « MAL » ────────────────────────────
   Un panneau de décision qui peint WAIT en rouge apprend à l'utilisateur que
   patienter est un échec. Ici WAIT a exactement la même autorité typographique
   qu'un ordre d'achat : même graisse, même corps, même encre. Seule la
   DIRECTION (haussier/baissier) est teintée, parce qu'elle est une orientation
   et non un jugement.

   ── PAS DE VARIABLES NEUVES ──────────────────────────────────────────────
   On emprunte les jetons du terminal (`--text-1/2/3`, `--panel`, `--line`,
   `--up`, `--down`, `--accent`) : les trois peaux et les deux thèmes suivent
   sans une ligne de plus. Voir project_pipster_skins / project_pipster_theme.
   ══════════════════════════════════════════════════════════════════════════ */

#miPanel {
  --mi-gap: 14px;
  display: flex;
  flex-direction: column;
  gap: var(--mi-gap);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.mi-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; min-width: 0;
}
.mi-inst { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mi-inst > span:first-child {
  font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--text-1);
}
.mi-tf {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 5px;
}
.mi-dq[data-dq] {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; font-weight: 600;
  color: #8a6410; background: rgba(211, 166, 67, .16);
}
.mi-dq[data-dq="INSUFFICIENT"], .mi-dq[data-dq="INVALID"] {
  color: var(--down); background: rgba(220, 90, 80, .14);
}

/* ── Les quatre chiffres qui décident ────────────────────────────────────── */
.mi-grid4 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden;
}
.mi-kpi {
  background: var(--panel); padding: 9px 11px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.mi-kpi-wide { grid-column: 1 / -1; }
.mi-k {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.mi-v {
  font-size: 14px; font-weight: 600; color: var(--text-1);
  letter-spacing: -.005em; overflow-wrap: anywhere;
}
.mi-sub { font-size: 10px; color: var(--text-3); line-height: 1.35; }

/* L'ACTION : le point focal, et il l'est par la taille — pas par la couleur. */
.mi-act { font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
/* WAIT n'est ni verte ni rouge : c'est une décision, pas un état d'alerte. */
.mi-act[data-act="BUY_NOW"]  { color: var(--up); }
.mi-act[data-act="SELL_NOW"] { color: var(--down); }

/* La jauge de qualité : un filet, pas un cadran de casino. */
.mi-meter {
  height: 3px; background: var(--line); border-radius: 2px; overflow: hidden;
  margin-top: 3px;
}
.mi-meter > i { display: block; height: 100%; background: var(--text-2); }

/* ── Sections ────────────────────────────────────────────────────────────── */
.mi-sec { border-top: 1px solid var(--line); padding-top: var(--mi-gap); min-width: 0; }
.mi-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 650; margin: 0 0 8px;
}
.mi-h-sm { font-size: 9.5px; }
.mi-sid { font-size: 9px; letter-spacing: .04em; color: var(--text-3); opacity: .75; }
.mi-type { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; }
.mi-type-sm { font-size: 12.5px; font-weight: 600; }
.mi-foot { font-size: 9.5px; color: var(--text-3); margin: 2px 0 0; }
.mi-note { font-size: 10.5px; color: var(--text-3); margin-top: 6px; line-height: 1.45; }

/* ── Pourquoi pas maintenant ─────────────────────────────────────────────── */
.mi-why-lead { font-size: 12px; color: var(--text-2); margin: 0 0 7px; line-height: 1.5; }
.mi-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.mi-li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--text-2); padding-inline-start: 11px; position: relative;
}
.mi-li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .52em;
  width: 3px; height: 3px; border-radius: 50%; background: var(--text-3);
}
.mi-li-v { color: var(--text-3); font-size: 11px; flex: none; }

/* ── Liste de définitions du scénario ────────────────────────────────────── */
.mi-dl {
  margin: 0; display: grid; grid-template-columns: minmax(90px, auto) 1fr;
  gap: 5px 12px; font-size: 12px; align-items: baseline;
}
.mi-dl dt {
  color: var(--text-3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600;
}
.mi-dl dd { margin: 0; color: var(--text-1); font-weight: 550; overflow-wrap: anywhere; }
.mi-dd-sub { color: var(--text-3); font-weight: 400; font-size: 10.5px; margin-inline-start: 6px; }

.mi-steps { margin: 0; padding-inline-start: 16px; color: var(--text-2); font-size: 11.5px; }
.mi-steps li { margin-bottom: 2px; }

/* ── Objectifs ───────────────────────────────────────────────────────────── */
.mi-tps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mi-tp {
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.mi-tp-k { font-size: 9px; letter-spacing: .1em; color: var(--text-3); font-weight: 700; }
.mi-tp-v { font-size: 12.5px; font-weight: 650; color: var(--text-1); }
.mi-tp-l { font-size: 9.5px; color: var(--text-3); overflow-wrap: anywhere; }

/* ── Alternatif : délibérément en retrait (§20 de la demande) ────────────── */
.mi-alt { opacity: .82; }
.mi-alt .mi-type { color: var(--text-2); }

/* ── Structure multi-unités ──────────────────────────────────────────────── */
.mi-tfs { display: flex; flex-direction: column; gap: 3px; }
.mi-tf-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12px; padding: 2px 0;
}
.mi-tf-k { color: var(--text-3); font-size: 10.5px; letter-spacing: .06em; font-weight: 650; }
.mi-tf-v { color: var(--text-2); font-weight: 550; }
.mi-tf-v[data-dir="1"]  { color: var(--up); }
.mi-tf-v[data-dir="-1"] { color: var(--down); }
.mi-tf-own { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 6px; }

/* ── Séances ─────────────────────────────────────────────────────────────── */
.mi-sess { display: flex; flex-direction: column; gap: 8px; }
.mi-ses { border-inline-start: 2px solid var(--line); padding-inline-start: 9px; }
.mi-ses[data-live="1"] { border-inline-start-color: var(--accent, var(--text-2)); }
.mi-ses-n {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-2); font-weight: 650; margin-bottom: 2px;
}
.mi-ses-b { display: flex; flex-wrap: wrap; gap: 3px 12px; }
.mi-ses-l { font-size: 11px; color: var(--text-3); }
.mi-ses-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.mi-tag {
  font-size: 9.5px; letter-spacing: .04em; color: var(--text-2);
  border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px;
}

/* ── Niveaux clés ────────────────────────────────────────────────────────── */
.mi-levels { display: flex; flex-direction: column; gap: 3px; }
.mi-lv {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  align-items: baseline; font-size: 12px; padding: 2px 0;
}
.mi-lv-k { color: var(--text-3); font-size: 10.5px; letter-spacing: .05em; }
.mi-lv-v { color: var(--text-1); font-weight: 600; }
.mi-lv-d { color: var(--text-3); font-size: 10px; }
.mi-lv-cluster .mi-lv-k { color: var(--text-2); font-weight: 650; }

/* ── Ce qui a changé ─────────────────────────────────────────────────────── */
.mi-diff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.mi-diff-li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 11.5px;
}
.mi-diff-k { color: var(--text-2); font-weight: 550; }
.mi-diff-v { color: var(--text-3); font-size: 11px; flex: none; }

/* ── Chronologie ─────────────────────────────────────────────────────────── */
.mi-tl {
  list-style: none; margin: 0; padding: 0 0 0 0;
  display: flex; flex-direction: column; gap: 0;
  max-height: 210px; overflow-y: auto;
}
.mi-tl-li {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 8px;
  align-items: baseline; font-size: 11px; padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.mi-tl-li:last-child { border-bottom: 0; }
.mi-tl-t { color: var(--text-3); font-weight: 600; font-size: 10.5px; }
.mi-tl-e { color: var(--text-2); overflow-wrap: anywhere; }
.mi-tl-v { color: var(--text-3); font-size: 10px; flex: none; }

/* ── Analyste ────────────────────────────────────────────────────────────── */
.mi-ai-tag { font-size: 9px; color: var(--text-3); letter-spacing: .04em; }
.mi-ai-body p { font-size: 12px; color: var(--text-2); line-height: 1.55; margin: 0 0 7px; }
.mi-ai-h { font-weight: 650; color: var(--text-1) !important; }
.mi-ai-a { color: var(--text-1) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — L'ORDRE DE LECTURE CHANGE, PAS SEULEMENT LA LARGEUR
   ──────────────────────────────────────────────────────────────────────────
   §26 impose une priorité : Action → Pourquoi → Scénario → Entrée →
   Invalidation → Objectifs → Ce qui a changé. On la réalise par `order` sur
   un conteneur en colonne, ce qui déplace les blocs SANS toucher au balisage
   ni au script — donc sans risquer de désynchroniser les deux rendus.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  #miPanel { --mi-gap: 12px; }
  .mi-grid4 { grid-template-columns: 1fr; }
  .mi-kpi-wide { order: -1; }            /* l'action passe en tête */
  .mi-tps { grid-template-columns: 1fr; }
  .mi-dl { grid-template-columns: 1fr; gap: 2px; }
  .mi-dl dd { margin-bottom: 6px; }
  .mi-tl { max-height: 160px; }

  #miPanel > .mi-why        { order: 1; }
  #miPanel > #miPrimWrap    { order: 2; }
  #miPanel > .mi-changed    { order: 3; }
  #miPanel > #miAltWrap     { order: 4; }
  #miPanel > #miStructWrap  { order: 5; }
  #miPanel > #miSessWrap    { order: 6; }
  #miPanel > #miLevelsWrap  { order: 7; }
  #miPanel > #miTlWrap      { order: 8; }
  #miPanel > .mi-ai         { order: 9; }
  #miPanel > .mi-foot       { order: 10; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ARABE — CE N'EST PAS QU'UN `direction: rtl`
   ──────────────────────────────────────────────────────────────────────────
   Les propriétés logiques (`padding-inline-start`, `border-inline-start`,
   `margin-inline-start`) font l'essentiel du travail : elles se retournent
   seules. Restent DEUX choses qu'elles ne règlent pas, et ce sont exactement
   celles qui cassaient déjà le terminal en arabe :

   1. LES LIGNES QUI MÊLENT CHIFFRES ET SIGNES. « 4 377,36 – 4 378,17 » ou
      « −1,2 ATR » se réordonnent visuellement en RTL et deviennent faux.
      `unicode-bidi: plaintext` laisse chaque segment suivre sa propre
      direction — la correction déjà appliquée à `.tp-row` et `#tvLiquidity`.
   2. LES PRIX EUX-MÊMES restent en lecture latine : un prix n'est pas du
      texte arabe, et le miroiter le rendrait illisible.
   ══════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .mi-dl dd,
[dir="rtl"] .mi-tp-v,
[dir="rtl"] .mi-lv-v,
[dir="rtl"] .mi-lv-d,
[dir="rtl"] .mi-li-v,
[dir="rtl"] .mi-diff-v,
[dir="rtl"] .mi-tl-t,
[dir="rtl"] .mi-tl-v,
[dir="rtl"] .mi-ses-l,
[dir="rtl"] .mi-sub,
[dir="rtl"] .mi-sid,
[dir="rtl"] .mi-tf-v { unicode-bidi: plaintext; }

/* La grille de la chronologie doit se retourner explicitement : `grid-template-
   columns` n'a pas d'équivalent logique. */
[dir="rtl"] .mi-tl-li { grid-template-columns: auto 1fr 42px; }
[dir="rtl"] .mi-lv { grid-template-columns: auto auto 1fr; }

/* Les flèches de direction sont des SIGNES, pas du texte : elles gardent leur
   sens en RTL (↑ = haussier) et ne doivent donc pas être miroitées. */
[dir="rtl"] .mi-v, [dir="rtl"] .mi-tf-v { unicode-bidi: plaintext; }

@media (prefers-reduced-motion: reduce) {
  .mi-meter > i { transition: none; }
}