/* Testatina della tavoletta (_tablet/components/_header.html), condivisa da
   tabletView e tabletProsopo: occhiello (Corpus / Selection), poi
   ‹ prec · SIGLA · succ › su una riga, in primario; la sigla corrente più
   grande, gerarchia solo tipografica */
.tablet-adjacent {
    display: flex;
    align-items: first baseline;   /* sigla su più righe: prev/next sulla prima */
    flex-wrap: nowrap;         /* mai a capo: lo slot fisso perderebbe senso */
    white-space: nowrap;
    min-width: 0;
    font-size: var(--fs-sm);
    color: var(--bs-primary);
}
/* slot fisso della precedente, anche vuoto (prima tavoletta): la sigla
   corrente non scivola a sinistra. 7em ≈ 8 caratteri (mediana delle sigle: 9);
   le più lunghe sfumano verso destra, intere nel title del link */
.tablet-adjacent .runhead-prev {
    flex: 0 0 7em;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    white-space: nowrap;
}
.tablet-adjacent .sep {
    flex: none;
}
/* block, non inline-block: la linea di base di un inline-block è la sua
   ULTIMA riga, e con una sigla su più righe prev/next scendevano in fondo */
.tablet-adjacent .tablet-siglum .rt {
    display: block;
}
/* prev e next: al massimo 7em. La sigla troppo lunga si taglia sullo span
   .rt e svanisce verso destra (.is-clipped, messa da runhead.js solo se il
   testo trabocca: il CSS non sa misurarlo, e una maschera fissa sbiadirebbe
   anche "RAE 4"). Senza JS: taglio netto. Frecce e · restano interi. */
.tablet-adjacent #nav-prev,
.tablet-adjacent #nav-next {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
    min-width: 0;
    max-width: 7em;
    flex: none;
}
.tablet-adjacent #nav-prev .rt,
.tablet-adjacent #nav-next .rt {
    min-width: 0;
    overflow: hidden;
}
.tablet-adjacent .rt.is-clipped {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5em), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 1.5em), transparent);
}
/* frecce: glifi tipografici nel serif della sigla, più grandi del corpo
   dell'etichetta; line-height 0 per non alzare la riga. Su hover scorrono
   nella loro direzione: è l'unico segnale, niente sottolineatura. Fuori da .rt: niente maschera, niente transizione. */
.tablet-adjacent .runhead-arrow {
    flex: none;
    font-family: var(--font-serif);
    font-size: 1.8em;
    line-height: 0;
    transition: transform 150ms ease-out;
}
.tablet-adjacent #nav-prev:hover .runhead-arrow { transform: translateX(-3px); }
.tablet-adjacent #nav-next:hover .runhead-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .tablet-adjacent .runhead-arrow { transition: none; }
}
.tablet-siglum {
    display: inline;
    min-width: 0;
    flex: 0 1 auto;            /* sigla lunga: va a capo, non si taglia */
    white-space: normal;
    overflow-wrap: anywhere;   /* a capo sugli spazi; dentro la parola solo se non entra */
    font-family: var(--font-serif);
    font-size: 1.75rem;
    line-height: 1.1;
    margin: 0;
    color: var(--bs-primary);
}
.tablet-adjacent a {
    color: inherit;
    text-decoration: none;
}
.tablet-adjacent .sep {
    margin: 0 0.5em;
}
/* occhiello quando lo sfoglio è limitato alla selezione di /database/advanced */
.nav-scope-selection {
    color: var(--bs-primary);
}
.nav-scope-selection a {
    color: inherit;
    text-decoration: none;
}
.nav-scope-selection a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.nav-scope-selection .sep {
    margin: 0 0.4em;
}
.nav-scope-selection .nav-scope-off {
    margin-left: 0.5em;
    font-size: var(--fs-sm);
    line-height: 1;
    color: var(--bs-secondary-color);
}
.nav-scope-selection .nav-scope-off:hover {
    color: var(--bs-danger);
    text-decoration: none;
}

/* ── Giostra: al passaggio prev/next le sigle scorrono in orizzontale ──────
   View Transitions cross-document: le due pagine tavoletta fanno opt-in, il
   browser fotografa gli elementi con lo stesso view-transition-name prima e
   dopo la navigazione e ne anima il passaggio. Il nome è per TAVOLETTA
   (`rt-<id>`, inline in _header.html), non per ruolo: con next la piccola di
   destra è lo stesso elemento della nuova grande, e la grande di prima quello
   della nuova piccola di sinistra — il gruppo le sposta e le ridimensiona.
   La sigla che esce e quella che entra non hanno controparte (:only-child) e
   girano via / arrivano come su un tamburo.
   Solo con un tipo `next`/`prev` attivo (js/tablet/runhead.js, pagereveal):
   cambio di modo, back/forward e link da fuori passano senza animazione.
   Firefox non supporta: navigazione normale. */
@view-transition {
    navigation: auto;
}
.tablet-adjacent .rt {
    display: inline-block;   /* box atomico: catturabile come snapshot */
    view-transition-class: runhead;
}

/* il resto della pagina cambia di colpo, e senza tipo anche la testatina.
   Sui gruppi si tocca solo la durata: i keyframe che spostano e
   ridimensionano li genera il browser per ogni nome, non si possono rifare. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}
::view-transition-group(*.runhead),
::view-transition-old(*.runhead),
::view-transition-new(*.runhead) {
    animation-duration: 0s;
}

html:active-view-transition-type(next, prev) {
    --runhead-dur: 480ms;
    --runhead-ease: cubic-bezier(.3, .7, .2, 1);
}

/* chi resta (piccola ↔ grande): scorre e cambia corpo; le due immagini,
   sigla piccola e sigla grande, si danno il cambio in dissolvenza */
html:active-view-transition-type(next, prev)::view-transition-group(*.runhead) {
    animation-duration: var(--runhead-dur);
    animation-timing-function: var(--runhead-ease);
}
html:active-view-transition-type(next, prev)::view-transition-old(*.runhead) {
    animation: var(--runhead-dur) var(--runhead-ease) both runhead-fade-out;
}
html:active-view-transition-type(next, prev)::view-transition-new(*.runhead) {
    animation: var(--runhead-dur) var(--runhead-ease) both runhead-fade-in;
}

/* chi esce e chi entra: tamburo che gira attorno all'asse verticale */
html:active-view-transition-type(next)::view-transition-old(*.runhead):only-child {
    animation: var(--runhead-dur) var(--runhead-ease) both runhead-exit-left;
}
html:active-view-transition-type(next)::view-transition-new(*.runhead):only-child {
    animation: var(--runhead-dur) var(--runhead-ease) both runhead-enter-right;
}
html:active-view-transition-type(prev)::view-transition-old(*.runhead):only-child {
    animation: var(--runhead-dur) var(--runhead-ease) both runhead-exit-right;
}
html:active-view-transition-type(prev)::view-transition-new(*.runhead):only-child {
    animation: var(--runhead-dur) var(--runhead-ease) both runhead-enter-left;
}

@keyframes runhead-fade-out { to   { opacity: 0; } }
@keyframes runhead-fade-in  { from { opacity: 0; } }
@keyframes runhead-exit-left {
    to   { transform: perspective(400px) translateX(-120%) rotateY(70deg); opacity: 0; }
}
@keyframes runhead-enter-right {
    from { transform: perspective(400px) translateX(120%) rotateY(-70deg); opacity: 0; }
}
@keyframes runhead-exit-right {
    to   { transform: perspective(400px) translateX(120%) rotateY(-70deg); opacity: 0; }
}
@keyframes runhead-enter-left {
    from { transform: perspective(400px) translateX(-120%) rotateY(70deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}