/* Ma·Trading — l'accueil des débutants : la visite guidée, la première
   mission et les bulles au premier contact.

   Feuille séparée, jamais de style en ligne : la CSP est verrouillée sur
   'self' et un <style> serait bloqué sans le moindre message visible. Les
   POSITIONS, elles, sont posées en JS par el.style.* — du CSSOM, que la CSP
   n'interdit pas (draw.js dimensionne déjà ses canvas comme ça). */

/* ════════════════════════════════════════════════════════════════
   A · la visite guidée
   ════════════════════════════════════════════════════════════════ */

/* Avale les clics pendant la visite : on ne veut pas qu'un élève déclenche
   un ordre en essayant de suivre les explications. Transparent — c'est le
   halo qui assombrit. */
#tour-block { position: fixed; inset: 0; z-index: 3000; }

/* Le halo. L'ombre démesurée assombrit TOUT sauf le rectangle du bloc :
   l'élément visé reste éclairé, à sa place, sans qu'on ait à le déplacer ni
   à toucher à son z-index. */
#tour-spot {
  position: fixed; z-index: 3001; pointer-events: none;
  border: 2px solid var(--orange); border-radius: 10px;
  /* .78 assombrissait au point de rendre gris foncé sur noir les chiffres dont
     la bulle était justement en train de parler (§2.3 de l'audit oeil-70ans) :
     le halo doit désigner, pas effacer le reste de l'écran. */
  box-shadow: 0 0 0 9999px rgba(5, 5, 7, .58), 0 0 26px -2px var(--glow);
  transition: top .3s var(--ease), left .3s var(--ease),
              width .3s var(--ease), height .3s var(--ease);
}

#tour-bubble {
  position: fixed; z-index: 3002;
  width: 320px; max-width: calc(100vw - 24px);
  background: var(--bg2); color: var(--txt);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px 14px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9);
  transition: top .3s var(--ease), left .3s var(--ease);
}
#tour-bubble h4 {
  font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: 17px; line-height: 1.25; margin-bottom: 6px; color: var(--txt);
}
#tour-bubble p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-bottom: 14px; }
#tour-bubble b { color: var(--txt); font-weight: 600; }

.tour-foot { display: flex; align-items: center; gap: 8px; }
.tour-count {
  font-size: 11.5px; color: var(--muted); margin-right: auto;
  font-variant-numeric: tabular-nums; letter-spacing: .06em; white-space: nowrap;
}
.tour-btn {
  padding: 7px 13px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); background: var(--bg3); color: var(--txt);
  white-space: nowrap;
}
.tour-btn:hover:not(:disabled) { border-color: var(--txt); }
.tour-btn:disabled { opacity: .35; cursor: default; }
.tour-btn.go {
  background: var(--orange); border-color: var(--orange);
  color: var(--bg); font-weight: 600;
}
.tour-skip {
  background: none; border: none; color: var(--muted); font: inherit; font-size: 12.5px;
  text-decoration: underline dotted; text-underline-offset: 3px; padding: 7px 4px;
  white-space: nowrap;
}
.tour-skip:hover { color: var(--orange); }

/* ════════════════════════════════════════════════════════════════
   B · la première mission
   ════════════════════════════════════════════════════════════════ */

/* En bas à GAUCHE, au-dessus du graphique. À droite, elle recouvrirait
   « Nouvel ordre » et « Positions » — c'est-à-dire précisément les deux
   endroits où la mission demande d'agir. */
#mission {
  position: fixed; z-index: 60; left: 78px; bottom: 16px;
  width: 250px; background: var(--bg2);
  border: 1px solid rgba(243, 112, 33, .4); border-radius: 12px;
  box-shadow: 0 20px 46px -16px rgba(0, 0, 0, .9);
  overflow: hidden;
}
#mission.mission-out { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }

.mission-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 11px 13px 10px; border: none; background: none;
  color: var(--txt); font: inherit; text-align: left;
}
.mission-head h4 {
  flex: 1; font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: 14px; line-height: 1.2;
}
.mission-caret { color: var(--muted); font-size: 12px; transition: transform .2s var(--ease); }
#mission.closed .mission-caret { transform: rotate(-90deg); }

.mission-bar { height: 3px; margin: 0 13px 10px; border-radius: 2px; background: var(--bg3); overflow: hidden; }
.mission-bar i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .45s var(--ease); }

#mission.closed .mission-list, #mission.closed .mission-foot { display: none; }

.mission-list { list-style: none; padding: 0 7px 4px; display: grid; gap: 1px; }
.mission-list li { display: flex; align-items: flex-start; gap: 9px; padding: 6px 7px; border-radius: 7px; }
.mission-list .box {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 4px; margin-top: 1px;
  border: 1px solid var(--line); display: grid; place-items: center;
  font-size: 10px; line-height: 1; color: transparent;
}
.mission-list .txt { font-size: 12.5px; line-height: 1.35; }
.mission-list .done .box { background: var(--orange); border-color: var(--orange); color: var(--bg); }
.mission-list .done .txt { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.mission-foot { padding: 4px 13px 12px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.mission-foot button {
  background: none; border: none; color: var(--muted); font: inherit; font-size: 11px;
  text-decoration: underline dotted; text-underline-offset: 3px; padding: 0; margin-top: 5px;
}
.mission-foot button:hover { color: var(--orange); }

/* ════════════════════════════════════════════════════════════════
   C · la bulle au premier contact
   ════════════════════════════════════════════════════════════════ */
#indice {
  position: fixed; z-index: 2900; width: 250px; max-width: calc(100vw - 24px);
  background: var(--bg2); border: 1px solid rgba(243, 112, 33, .45);
  border-radius: 10px; padding: 11px 13px 10px;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(5px); pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
#indice.on { opacity: 1; transform: none; pointer-events: auto; }
#indice h5 { font-size: 12.5px; font-weight: 700; color: var(--orange); margin-bottom: 4px; }
#indice p { font-size: 12px; line-height: 1.5; color: var(--muted); }
#indice button {
  background: none; border: none; color: var(--muted); font: inherit; font-size: 11px;
  text-decoration: underline dotted; text-underline-offset: 3px; padding: 6px 0 0;
}
#indice button:hover { color: var(--orange); }

/* ════════════════════════════════════════════════════════════════
   Mobile
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* la bulle ne se glisse à côté de rien sur 390 px : elle s'ancre en haut
     ou en bas, pleine largeur. Le JS choisit le bord loin de la cible. */
  #tour-bubble { width: auto; left: 12px; right: 12px; padding: 15px 16px 13px; }
  #tour-bubble h4 { font-size: 16px; }
  #tour-bubble p { font-size: 14px; }
  .tour-btn { padding: 9px 15px; font-size: 14px; }
  .tour-skip { font-size: 13px; }

  /* la mission n'a pas de colonne d'outils à contourner, et doit rester
     au-dessus de la barre SELL/BUY et des onglets */
  #mission {
    left: 10px; right: 10px; width: auto;
    bottom: calc(104px + env(safe-area-inset-bottom));
  }
  /* l'onglet Trade est déjà une liste d'actions : la carte y ferait écran */
  #view-app.m-trade #mission { display: none; }

  #indice { width: auto; left: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #tour-spot, #tour-bubble, #indice, .mission-bar i, .mission-caret { transition: none; }
}