/* ═══════════════════════════════════════════════════════════════════════
   AvioWeather — sezione "decode explainer" (card statica didattica)
   Fonte del comportamento: design project "AvioWeather Website" →
   components/decode-explainer-a.html (proposta A approvata, variante
   SENZA legenda a tendina: le spiegazioni vivono nei popup).
   La card dentro .dx-stage è un'istanza PIXEL-IDENTICA di .avx-card
   (assets/metar-card.css) con dati finti e RAW già aperto in modo statico:
   qui NON si ridefinisce nulla della card, solo lo strato annotazioni.
   Il mount usa data-avx-static (NON data-avx-metar): live-metar.js non
   deve idratarla — la card live resta solo nella hero.
   Popup/marker sono creati da assets/decode-explainer.js (defer, CSP-safe).
   Loaded by: index.html (root + en/de/es/fr). Niente su login.html.
   ═══════════════════════════════════════════════════════════════════════ */

.dx-split{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,56px);align-items:start}
@media(min-width:880px){.dx-split{grid-template-columns:0.82fr 1.18fr;gap:clamp(44px,5vw,76px)}}

/* ── colonna sinistra: testata sezione. NIENTE sticky (il file-proposta
      la agganciava a top:24px durante lo scroll — bocciato dall'owner
      2026-07-21: il testo deve stare fermo nel flusso). ── */
.dx-copy .kicker{margin-bottom:18px}
.dx-lead{color:var(--fg-2);font-size:var(--fs-lead);line-height:1.55;margin-top:20px;max-width:44ch}
.dx-note{margin-top:20px;font-size:.9rem;color:var(--fg-2);line-height:1.55;max-width:44ch}
.dx-note b{color:var(--fg);font-weight:600}

/* ── disclaimer: non si può non vedere, non sporca la card — CENTRATO
      sopra la card (richiesta owner 2026-07-21). La pill "esplora" è stata
      RIMOSSA su richiesta owner: l'invito all'interazione vive nella
      dx-note della colonna sinistra. ── */
.dx-warn{display:flex;width:fit-content;margin:0 auto 22px;align-items:center;gap:9px;padding:9px 13px;border-radius:8px;background:rgba(194,65,12,.09);border:1px solid rgba(194,65,12,.32);color:#9a3412;font-family:'Geist Mono',monospace;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600}
.dx-warn svg{width:15px;height:15px;flex:none;stroke:#c2410c;stroke-width:2;fill:none}

/* ── colonna destra: card annotata ── */
.dx-annot{min-width:0}
/* container-type: le @container di metar-card.css (scala tile/ICAO su card
   strette) qui interrogano lo stage, come farebbero col mount live. */
.dx-stage{position:relative;max-width:512px;margin:0 auto;padding:24px 22px 10px;container-type:inline-size}
/* la card resta pixel-identica: qui rendiamo il cassetto RAW già APERTO,
   in-flow (stato "open" dell'iOS), senza toccare il markup della card. */
.dx .avx-reveal{grid-template-rows:1fr}
.dx .avx-reveal>.avx-rawwrap{overflow:visible}
/* niente cap 72px desktop: il raw didattico è sempre tutto visibile */
.dx .avx-reveal .avx-raw{max-height:none;overflow:visible}
.dx .avx-rawbtn{cursor:default}
/* voci interattive della card */
.dx-t{cursor:help;border-radius:6px;-webkit-tap-highlight-color:transparent}

/* ── marker numerici — posizionati via JS sull'angolo di ogni voce ── */
.dx-mark{position:absolute;z-index:6;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:#0a0a0a;color:#fff;font-family:'Geist Mono',monospace;font-size:.66rem;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2.5px var(--bg),0 2px 6px rgba(10,10,10,.3);cursor:help;letter-spacing:0;transition:transform .18s var(--ease-out-quint),background .18s,box-shadow .18s;-webkit-tap-highlight-color:transparent}
.dx-mark.raw{border-radius:5px;background:#fff;color:#c2410c;box-shadow:0 0 0 2.5px var(--bg),inset 0 0 0 1.4px #c2410c,0 2px 6px rgba(194,65,12,.28)}
.dx-mark:hover,.dx-mark:focus-visible,.dx-mark.hot{transform:scale(1.2);background:var(--accent);color:#fff;box-shadow:0 0 0 2.5px var(--bg),0 3px 11px rgba(29,58,138,.42);outline:none}
.dx-mark.raw:hover,.dx-mark.raw:focus-visible,.dx-mark.raw.hot{background:#c2410c;color:#fff;box-shadow:0 0 0 2.5px var(--bg),0 3px 11px rgba(194,65,12,.4)}

/* ── ring di evidenziazione (overlay non distruttivo sopra la voce) ── */
.dx-ring{position:absolute;z-index:5;border:2px solid var(--accent);border-radius:9px;background:rgba(29,58,138,.05);opacity:0;pointer-events:none;transition:opacity .16s,left .2s var(--ease-out-quint),top .2s var(--ease-out-quint),width .2s var(--ease-out-quint),height .2s var(--ease-out-quint)}
.dx-ring.on{opacity:1}

/* ── popup didattico (fixed, segue la voce toccata) ── */
.dx-pop{position:fixed;z-index:80;max-width:270px;display:flex;gap:10px;padding:12px 13px;background:#0a0a0a;color:#fff;border-radius:12px;box-shadow:0 14px 38px -10px rgba(10,10,10,.55);opacity:0;transform:translateY(4px) scale(.98);transform-origin:50% 100%;transition:opacity .16s,transform .16s var(--ease-out-quint);pointer-events:none}
.dx-pop.on{opacity:1;transform:none}
.dx-pop .dx-pop-n{flex:none;width:21px;height:21px;border-radius:50%;background:#fff;color:#0a0a0a;font-family:'Geist Mono',monospace;font-size:.64rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.dx-pop .dx-pop-n.raw{background:#f97316;color:#0a0a0a}
.dx-pop-term{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:.9rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.dx-pop-chip{font-family:'Geist Mono',monospace;font-size:.64rem;font-weight:500;color:#cbd5e6;background:rgba(255,255,255,.1);border-radius:4px;padding:2px 6px}
.dx-pop-exp{margin:5px 0 0;font-size:.8rem;line-height:1.46;color:#d4d4d8}
.dx-pop-exp b{color:#fff;font-weight:600}
.dx-pop-sw{display:inline-block;width:8px;height:8px;border-radius:2px;vertical-align:-1px;margin-right:1px}
/* swatch categorie via classe (i testi popup arrivano dai JSON i18n) */
.dx-pop-sw.sw-vfr{background:#2d8559}
.dx-pop-sw.sw-mvfr{background:#1d3a8a}
.dx-pop-sw.sw-ifr{background:#b91c1c}
.dx-pop-sw.sw-lifr{background:#6d28d9}
.dx-pop-caret{position:absolute;left:var(--cx,50%);bottom:-5px;width:11px;height:11px;background:#0a0a0a;transform:translateX(-50%) rotate(45deg)}
.dx-pop.below .dx-pop-caret{bottom:auto;top:-5px}

/* ── caption raw ── */
.dx-rawcap{display:flex;align-items:center;gap:10px;margin:30px 0 12px;font-family:'Geist Mono',monospace;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3)}
.dx-rawcap::before{content:"";width:22px;height:1px;background:var(--border-strong)}
/* stringa raw tokenizzata: ogni token porta il numero della sua voce ed è toccabile */
.dx-rawline{display:flex;flex-wrap:wrap;gap:9px 8px;padding:15px 15px 17px;background:var(--card);border:1px solid var(--border);border-radius:10px;font-family:'Geist Mono',monospace}
.dx-tok{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;color:var(--fg);white-space:nowrap;padding:4px 5px;border-radius:6px;border:1px solid transparent;cursor:help;background:none;font-family:inherit;transition:background .16s,border-color .16s,transform .16s var(--ease-out-quint);-webkit-tap-highlight-color:transparent}
.dx-tok:hover,.dx-tok:focus-visible,.dx-tok.hot{background:var(--accent-soft);border-color:rgba(29,58,138,.28);outline:none}
.dx-tok.only:hover,.dx-tok.only:focus-visible,.dx-tok.only.hot{background:rgba(194,65,12,.08);border-color:rgba(194,65,12,.32)}
.dx-b{display:inline-flex;align-items:center;justify-content:center;font-family:'Geist Mono',monospace;font-weight:600;font-size:.6rem;width:16px;height:16px;border-radius:50%;background:#0a0a0a;color:#fff;flex:none;letter-spacing:0}
.dx-b.raw{border-radius:3px;background:#fff;color:#9a3412;border:1.3px solid #c2410c;width:15px;height:15px}
.dx-tok.only .dx-tt{color:#9a3412}

/* ═══ ingresso "arriva e si aggancia" (richiesta owner 2026-07-21: niente
      comparse — ogni pezzo ARRIVA con slancio, supera di poco la posizione
      e si assesta con uno snap; i marker calano dall'alto e si agganciano
      all'angolo della voce). Solo se JS + motion ok. ═══ */
.dx-anim .avx-head-group,.dx-anim .avx-metrics,.dx-anim .avx-rawsec{opacity:0}
.dx-anim .dx-mark{opacity:0}
.dx-anim .dx-tok{opacity:0}
.dx-anim .avx-card{opacity:0}
.dx-anim.play .avx-card{animation:dxDock .55s var(--ease-out-quint) both}
.dx-anim.play .avx-head-group{animation:dxSeg .45s var(--ease-out-quint) both;animation-delay:.16s}
.dx-anim.play .avx-metrics{animation:dxSeg .45s var(--ease-out-quint) both;animation-delay:.28s}
.dx-anim.play .avx-rawsec{animation:dxSeg .45s var(--ease-out-quint) both;animation-delay:.40s}
/* Marker = pezzi che volano da LONTANO e si agganciano (autoassemblaggio):
   il punto di partenza per-marker arriva dal JS via --fx/--fy (280–460px,
   direzioni sparse); overshoot lungo il vettore d'arrivo, poi snap.
   Niente animazioni su testo (richiesta owner): la caption raw è statica. */
.dx-anim.play .dx-mark{animation:dxMark .6s var(--ease-out-quint) both;animation-delay:calc(.58s + var(--k,0)*.07s)}
.dx-anim.play .dx-tok{animation:dxTok .45s var(--ease-out-quint) both;animation-delay:calc(1.35s + var(--k,0)*.045s)}
@keyframes dxDock{0%{opacity:0;transform:translateY(36px) scale(.97)}60%{opacity:1;transform:translateY(-5px) scale(1.004)}80%{transform:translateY(2px)}100%{opacity:1;transform:none}}
@keyframes dxSeg{0%{opacity:0;transform:translateY(18px)}70%{opacity:1;transform:translateY(-3px)}100%{opacity:1;transform:none}}
@keyframes dxMark{0%{opacity:0;transform:translate(var(--fx,0px),var(--fy,-260px)) scale(.4)}14%{opacity:1}62%{transform:translate(calc(var(--fx,0px)*-.05),calc(var(--fy,-260px)*-.05)) scale(1.12)}80%{transform:translate(0,0) scale(.97)}100%{opacity:1;transform:none}}
@keyframes dxTok{0%{opacity:0;transform:translateY(13px)}70%{opacity:1;transform:translateY(-2px)}100%{opacity:1;transform:none}}

@media(max-width:420px){
  .dx-stage{padding:22px 16px 8px}
  .dx-rawline{font-size:.78rem}
  .dx-pop{max-width:min(270px,calc(100vw - 20px))}
}
@media(prefers-reduced-motion:reduce){
  .dx-pop,.dx-ring,.dx-mark,.dx-tok{transition:none}
}