/**
 * TESSin_Dictionary v1.6.0 - il collegamento a un termine dentro un testo.
 *
 * v1.6.0 (giro xDT-FRONT-1 "scala e ponte"): le uniche tre tinte cablate di
 * questo foglio - fondo, inchiostro e filo del popover - passano al ponte dei
 * colori del tema (`--tsn-studio-color-*`, emesso a runtime da
 * `TESSin\Studio\DesignConfig\Block\CssVariables`), col fallback dichiarato
 * uguale al valore di prima: sotto un tema che non pubblica il ponte la resa
 * e' identica byte per byte, sotto Studio il popover segue la palette.
 * ⚠️ Le MISURE di questo file restano in `em` DI PROPOSITO e non passano ai
 * token `--tsn-fs-*`: un rimando vive DENTRO un testo altrui (descrizione
 * prodotto, pagina CMS, articolo) e deve dimensionarsi sul testo che lo
 * ospita, non su una scala assoluta. Per la stessa ragione la sonda G-REM-1
 * qui misura 0 `font-size` in rem, e deve continuare a misurarne 0.
 *
 * DISCRETO PER SCELTA. Un rimando al dizionario e' un servizio, non una
 * chiamata all'azione: non deve competere con i collegamenti commerciali
 * della stessa pagina. Da qui la sottolineatura punteggiata di 1px nel
 * COLORE DEL TESTO - nessun colore proprio, e in particolare nessun colore
 * caldo: nella palette di casa il rosso appartiene al marchio.
 *
 * NESSUNA PRIMITIVA DEL CORE E' TOCCATA. Solo classi `tsn-*`, applicate
 * dal nostro motore ai soli nodi che ha creato lui.
 *
 * ACCESSIBILITA':
 *  - anello di fuoco su `:focus-visible`, mai su `:focus` nudo;
 *  - `text-underline-offset` per non tagliare i discendenti delle lettere;
 *  - il collegamento e' in linea nel testo, quindi l'area toccabile segue
 *    la riga: si garantisce un'altezza di riga tale da non scendere sotto
 *    i 24px richiesti (WCAG 2.5.8) sui contesti compatti;
 *  - il popover compare al passaggio del mouse E al fuoco da tastiera
 *    (`:focus-within`), quindi funziona SENZA JavaScript. Il JavaScript
 *    aggiunge soltanto la chiusura con Escape.
 *
 * MOVIMENTO RIDOTTO: chi lo chiede al sistema operativo non vede
 * transizioni.
 */

.tsn-dict-link {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: currentColor;
    cursor: help;
}

.tsn-dict-link:hover {
    text-decoration-style: solid;
}

.tsn-dict-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Presentazione <<plain>>: decide il tema, noi non ci mettiamo bocca. */
.tsn-dict-link--plain {
    text-decoration-line: underline;
    text-decoration-style: solid;
    cursor: pointer;
}

/* Presentazione <<marker>>: un segno di apertura, decorativo e muto. */
.tsn-dict-link--marker::after {
    content: "\2197";
    display: inline-block;
    margin-left: 0.15em;
    font-size: 0.75em;
    line-height: 1;
    vertical-align: super;
    text-decoration: none;
    opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/*  POPOVER - arricchimento progressivo, mai un requisito              */
/* ------------------------------------------------------------------ */

.tsn-dict-term {
    position: relative;
    display: inline;
    /* Area toccabile: la riga non scende sotto i 24px anche nei contesti
       compatti (WCAG 2.5.8). */
    line-height: 1.7;
}

.tsn-dict-pop {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    display: block;
    width: 320px;
    max-width: 100%;
    margin-top: 0.4em;
    padding: 0.75em 0.9em;
    background: var(--tsn-studio-color-surface, #ffffff);
    color: var(--tsn-studio-color-ink, #1a1a1a);
    border: 1px solid var(--tsn-studio-color-border, rgba(0, 0, 0, 0.14));
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    font-size: 0.8125em;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.tsn-dict-term:hover .tsn-dict-pop,
.tsn-dict-term:focus-within .tsn-dict-pop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Chiusura con Escape: il solo compito del JavaScript di questa
   superficie. L'attributo lo mette e lo toglie lo script; senza script
   non compare mai e il popover si comporta come sopra. */
.tsn-dict-term[data-tsn-dict-dismissed] .tsn-dict-pop {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .tsn-dict-pop {
        transition: none;
    }
}