/* ============================================================
   main.css
   ============================================================
   Niente Bootstrap: il vecchio lo carica da CDN insieme a jQuery, Popper,
   Trix, Toastify e quattro tracker su OGNI pagina, per usarne le card e la
   griglia. Qui la griglia e' CSS grid e le card sono ~40 righe.

   IL TEMA E' SCURO, SEMPRE. Il vecchio faceva lo stesso (data-bs-theme="dark"
   hardcoded, col theme-toggle commentato fuori dal footer), e qui la ragione
   e' piu' forte che l'abitudine: il viewer e la mappa del cielo sono neri per
   forza — sono foto di cielo notturno — e una home chiara accanto a quelle e'
   uno sbalzo, non una scelta. Per un po' i colori hanno seguito la preferenza
   di sistema; il risultato era un sito che cambiava identita' a meta'.

   I colori restano VARIABILI, non valori sparsi: se un giorno si vuole un
   interruttore chiaro/scuro, basta un secondo blocco su [data-theme="light"]
   e nient'altro da toccare. admin.css usa le stesse variabili e segue da se'.
   ============================================================ */

:root {
    color-scheme: dark;

    --bg: #0d1117;
    --bg-soft: #161b22;
    --fg: #c9d1d9;
    --muted: #8b949e;
    --accent: #58a6ff;
    /* Il colore del testo SOPRA l'accento. Sul tema chiaro l'accento era un blu
       carico e ci voleva il bianco; qui e' un azzurro luminoso, e il bianco
       sopra scende a ~2,2:1 di contrasto — sotto la soglia di leggibilita'.
       L'inchiostro scuro ci sta a ~7:1. Variabile e non valore sparso: e' il
       punto unico da cambiare se un giorno torna un tema chiaro. */
    --on-accent: #0d1117;
    --line: #30363d;
    --ok: #3fb950;
    --ko: #f85149;
    --shadow: 0 1px 3px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .3);
}

* {
    box-sizing: border-box;
}

/* La pagina e' una colonna: header, contenuto che si prende lo spazio che
   avanza, footer in fondo. Cosi' il footer sta SEMPRE in fondo — anche quando
   il contenuto e' corto, dove prima galleggiava a meta' schermo — e soprattutto
   <main> ha un'altezza VERA invece che dettata dal contenuto. E' quello che
   permette a una mappa di riempire il suo contenitore e ai pannelli di
   scorrere DENTRO invece di allungare la pagina. */
body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
    flex: 1 1 auto;
    /* min-height:0 e' la riga che fa funzionare lo scroll interno: senza, un
       elemento flex non scende sotto la dimensione del suo contenuto, e un
       figlio con overflow:auto allunga la pagina invece di scorrere. */
    min-height: 0;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}

h1 {
    margin: 0 0 .5rem;
    font-size: 2.25rem;
    font-weight: 300;
    letter-spacing: -.02em;
}

a {
    color: var(--accent);
}

.muted {
    color: var(--muted);
    font-size: .875rem;
}

/* --- navigazione pubblica --- */

/* Fisso in alto mentre si scorre — il gemello esatto del footer, che e'
   sticky in basso. Il punto e' che navigazione e firma stiano SEMPRE dove le
   si cerca, su ogni pagina, senza dover risalire.

   sticky e non fixed: un elemento sticky occupa il suo spazio nel flusso,
   quindi il contenuto sotto non ci finisce sotto. Con fixed servirebbe un
   padding-top su main pari all'altezza dell'header, da tenere allineato a
   mano ogni volta che l'header cambia — e da rifare a ogni breakpoint.

   Lo z-index e' lo stesso del footer: sono la stessa cosa, ai due estremi. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 72rem;
    min-height: 3rem;
    margin: 0 auto;
    padding: .45rem 1.5rem;
}

/* Sulle pagine a tutto schermo (viewer e mappa del cielo) il contenuto arriva
   ai bordi: un header incolonnato al centro su 72rem ci starebbe sopra come un
   corpo estraneo. Qui si allarga anche lui. */
body.viewer .site-header-inner,
body.skymap-page .site-header-inner {
    max-width: none;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--fg);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

/* Il logo prende il colore del testo (currentColor nell'SVG), quindi funziona
   sia nell'header normale sia in quello chiaro sovrapposto del viewer senza
   una seconda regola. L'accento solo al passaggio: e' un marchio, non un
   pulsante da illuminare in permanenza. */
.site-logo {
    flex: 0 0 auto;
    transition: color .15s ease;
}

.site-brand:hover .site-logo,
.site-brand:focus-visible .site-logo {
    color: var(--accent);
}

.site-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-links a {
    color: var(--muted);
    text-decoration: none;
}

.site-links a:hover,
.site-links a[aria-current="page"] {
    color: var(--fg);
}

.language-switch {
    display: inline-flex;
    margin-left: auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .375rem;
}

.language-switch a {
    display: grid;
    min-width: 2.5rem;
    min-height: 2rem;
    padding: .25rem .5rem;
    place-items: center;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
}

.language-switch a + a {
    border-left: 1px solid var(--line);
}

.language-switch a:hover {
    color: var(--fg);
    background: var(--bg);
}

.language-switch a.active {
    color: var(--on-accent);
    background: var(--accent);
}

/* --- hero --- */

.hero {
    max-width: 42rem;
    margin: 0 auto;
    /* Asimmetrico, e non per capriccio: SOPRA si somma gia' il padding di
       main (1.5rem), e i due insieme facevano 5rem — ottanta pixel di vuoto
       prima del titolo, che sembrava una scelta e invece era una somma che
       nessuno aveva fatto. SOTTO invece lo spazio serve davvero, a staccare
       il titolo dalle card. */
    padding: .5rem 0 2.5rem;
    text-align: center;
}

.hero .lead {
    margin: 0;
    color: var(--muted);
    font-size: 1.0625rem;
}

/* --- card --- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.card {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: .75rem;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* <picture> e' inline e crea una scatola shrink-to-fit: dentro, il width:100%
   e l'height:100% delle immagini si risolverebbero contro QUELLA invece che
   contro la card o il riquadro della galleria, e collasserebbero. display:
   contents la toglie di mezzo dal layout lasciando l'<img> figlia diretta,
   che e' esattamente cio' che era prima che aggiungessimo il WebP. */
picture {
    display: contents;
}

.card-cover {
    display: block;
    width: 100%;
    /* Le thumb preservano l'aspetto e sono vincolate in larghezza, quindi
       hanno altezze diverse: il ritaglio uniforma le card senza deformare. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--line);
}

.card-cover--empty {
    display: grid;
    place-items: center;
}

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .5rem;
    padding: 1rem 1.125rem 1.125rem;
}

.card-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.card-text {
    flex: 1;
    color: var(--muted);
    font-size: .9375rem;
}

.card-text > :first-child { margin-top: 0; }
.card-text > :last-child  { margin-bottom: 0; }

.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .25rem;
}

.card-meta time {
    color: var(--muted);
    font-size: .8125rem;
}

.btn {
    padding: .25rem .75rem;
    border: 1px solid var(--line);
    border-radius: .375rem;
    color: var(--fg);
    font-size: .8125rem;
}

.card-link:hover .btn {
    border-color: var(--accent);
    color: var(--accent);
}

/* ============================================================
   VIEWER (/view)
   ============================================================
   La home e' un documento, questa e' un'applicazione a tutto schermo: la
   differenza e' la classe .viewer sul body, non un layout separato.

   Il viewer e' sempre scuro, a prescindere dal tema di sistema: la foto e' il
   contenuto, e un fondo chiaro attorno a una nebulosa ne falsa la lettura.
   ============================================================ */

/* Il viewer ha la stessa impalcatura di tutte le altre pagine: header vero a
   tutta larghezza, footer in fondo, e in mezzo la foto che riempie cio' che
   avanza. Prima header e footer erano due pillole sovrapposte alla foto — una
   grammatica solo sua, che rendeva questa pagina un'isola. I comandi restano
   sovrapposti (barre .hud), ma la cornice del sito e' quella di sempre. */
body.viewer {
    overflow: hidden;
}

body.viewer main {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: none;
    width: 100%;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: #000;
    color: #e6e6e6;
}

.sprite {
    display: none;
}

/* Container di OpenSeadragon (Fase 5): OSD ci inietta dentro il suo canvas a
   tile; sopra ci sta il canvas dell'overlay. isolation:isolate crea un contesto
   di impilamento locale, cosi' lo z-index dell'overlay non scavalca i pannelli
   laterali (.overlay), che restano sopra per ordine del DOM. */
.imView {
    /* L'altezza deve essere VERA e in-flow: OSD misura il contenitore all'open
       e, se la trova a zero, l'immagine sparisce e lo zoom finisce a 0,03%
       (verificato due volte: la prima con position:absolute/inset:0, la seconda
       passando <main> a flex senza dare al figlio come crescere). Qui il
       contenitore e' un elemento flex che si prende cio' che avanza dentro
       <main>, e min-height:0 gli permette di stringersi. */
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    isolation: isolate;
    background: #000;
    touch-action: none;   /* il pan lo gestisce OSD, non lo scroll della pagina */
    cursor: grab;
}

.imView:active {
    cursor: grabbing;
}

/* ⚠️ OSD si costruisce dentro un div con height:100%, e una PERCENTUALE non si
   risolve contro un genitore la cui altezza viene dal flex (per il CSS e'
   `auto`): il suo contenitore collassava a 1 px e l'immagine spariva, con lo
   zoom a 0,03%. Misurato: `#imView=1474x793` ma `osdContainer=1474x1`.
   Ancorandolo in assoluto la percentuale non serve piu' e il contenitore
   riempie sempre, qualunque sia il modo in cui il padre ha preso la sua
   altezza. E' la stessa trappola della Fase 5, entrata da un'altra porta. */
.imView > .openseadragon-container {
    position: absolute !important;
    inset: 0;
    width: auto !important;
    height: auto !important;
}

.imView .openseadragon-canvas {
    outline: none;   /* OSD mette un outline al focus: sul viewer e' rumore */
}

/* Il canvas dell'overlay: sopra l'immagine di OSD, trasparente, e trasparente
   anche al mouse — cosi' pan/zoom arrivano a OSD sotto. */
.sky-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

/* --- barra di caricamento --- */

/* --- caricamento: una nota in un angolo ---------------------- */

/* Era una barra grande in mezzo alla foto. Due difetti: copriva proprio quello
   che si era li' per guardare, e prometteva una precisione che non c'era.
   Ora sta in basso a DESTRA (a sinistra ci sono i comandi), e' piccola, e dice
   COSA sta caricando invece di una percentuale sola. */
.hud-loader {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: rgb(13 17 23 / .82);
    border: 1px solid var(--line);
    backdrop-filter: blur(6px);
    font-size: .75rem;
    color: var(--fg);
    pointer-events: none;
}

.hud-loader[hidden] {
    display: none;   /* [hidden] da solo perde contro display:flex */
}

.hud-loader-label {
    white-space: nowrap;
}

.hud-loader-track {
    position: relative;
    display: block;
    width: 4rem;
    height: 3px;
    border-radius: 999px;
    background: rgb(255 255 255 / .18);
    overflow: hidden;
}

.hud-loader-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent);
    transition: width .15s linear;
}

/* Quando non si sa quanto manca, la barra scorre avanti e indietro: dice
   "sto lavorando" senza dichiarare un numero che sarebbe inventato. */
.hud-loader.is-indeterminate .hud-loader-bar {
    width: 40%;
    transition: none;
    animation: hud-loader-scorre 1.1s ease-in-out infinite;
}

@keyframes hud-loader-scorre {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}

/* Chi ha chiesto meno animazioni non ha chiesto meno informazioni: la barra
   resta, ferma e piena a meta'. */
@media (prefers-reduced-motion: reduce) {
    .hud-loader.is-indeterminate .hud-loader-bar {
        animation: none;
        width: 50%;
    }
}

/* --- credito dello sfondo (mappa del cielo) ------------------ */

/* Il marchio di Aladin e' nascosto (vedi .aladin-logo-container) ma
   l'attribuzione NO: qui c'e' il nome dello sfondo che si sta guardando, che
   in automatico cambia da solo e prima non si leggeva da nessuna parte. */
.hud-credit {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 20;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: rgb(13 17 23 / .72);
    border: 1px solid var(--line);
    font-size: .7rem;
    color: var(--muted);
    pointer-events: none;
    white-space: nowrap;
}

.hud-credit b {
    color: var(--fg);
    font-weight: 600;
}

/* Il logo di Aladin lo sostituiamo con .hud-credit: stessa informazione, un
   posto solo, e non copre la mappa in un angolo a caso. */
.aladin-logo-container {
    display: none !important;
}

/* --- footer --- */

/* Una riga sola, piccola e centrata: e' una firma, non contenuto. Uguale su
   tutte le pagine, viewer compreso. */
/* sticky e non semplicemente "in fondo al documento": sulle pagine che
   scorrono (la home) resta visibile mentre si scorre, invece di comparire solo
   arrivati in fondo. Cosi' e' la stessa cosa ovunque — che e' il punto. */
.site-footer {
    position: sticky;
    bottom: 0;
    z-index: 40;
    padding: .6rem 1.5rem;
    border-top: 1px solid var(--line);
    background: var(--bg);
    color: var(--muted);
    font-size: .8125rem;
    text-align: center;
}

.site-footer p {
    margin: 0;
}

.site-footer a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--fg);
}

/* --- comandi sovrapposti del viewer --- */

.viewer-gallery {
    position: absolute;
    z-index: 20;
    /* Allineata alla barra dei comandi, che sta dall'altro lato: prima scendeva
       di 4,25rem per scansare l'header quando era una pillola sovrapposta alla
       foto. Ora l'header e' fuori dalla scena e quello spazio era solo un buco. */
    top: .6rem;
    left: .6rem;
    display: flex;
    gap: .375rem;
    max-width: calc(100% - 1.2rem);
    padding: .375rem;
    overflow-x: auto;
    border: 1px solid rgb(255 255 255 / .12);
    border-radius: .5rem;
    background: rgb(13 17 23 / .86);
    backdrop-filter: blur(6px);
    pointer-events: auto;
}

.viewer-gallery a {
    display: block;
    flex: 0 0 4rem;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: .25rem;
    color: #c9d1d9;
    text-decoration: none;
}

.viewer-gallery a:hover {
    border-color: rgb(255 255 255 / .5);
}

.viewer-gallery a.active {
    border-color: #58a6ff;
}

.viewer-gallery img,
.viewer-gallery-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    object-fit: cover;
    place-items: center;
    background: #0a0c10;
    font-size: .75rem;
}

/* I pannelli del viewer sono gli stessi riquadri della mappa del cielo
   (.hud-panel), con due differenze: sono piu' larghi, perche' contengono un
   articolo e una scheda tecnica invece di un elenco, e stanno a destra sotto la
   loro barra. Del vecchio cassetto che scorreva da destra non resta niente:
   copriva mezza foto e non si sapeva mai quanto fosse lungo. */
.hud-panel-body {
    padding: .75rem 1rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: .9375rem;
    line-height: 1.55;
}

.hud-panel-body h2 {
    margin: 0 0 .5rem;
    font-size: 1.125rem;
}

.hud-panel-body > :first-child { margin-top: 0; }
.hud-panel-body > :last-child  { margin-bottom: 0; }

.hud-panel-back {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid rgb(255 255 255 / .1);
    font-size: .875rem;
}

/* --- la scheda tecnica dentro il pannello ---
   Etichetta e valore su due colonne: incolonnati si leggono a colpo d'occhio,
   e i numeri (che sono quasi tutti numeri) restano allineati fra loro. Erano
   andati persi insieme al vecchio pannello a scomparsa. */
.spec + .spec {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(255 255 255 / .1);
}

.spec h3 {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8b949e;
}

.spec dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .15rem .75rem;
    margin: 0;
    font-size: .875rem;
}

.spec-row {
    display: contents;   /* le due celle vanno nella griglia del <dl> */
}

.spec dt {
    color: #8b949e;
}

.spec dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.notice {
    margin: .5rem 0 0;
    color: #d29922;
    font-size: .8125rem;
}

/* Il separatore fra gruppi di comandi: cosa mostra la foto, cosa la misura. */
.hud-sep {
    width: 1px;
    height: 1.25rem;
    margin-inline: .15rem;
    background: rgb(255 255 255 / .16);
}

/* --- la lettura del puntatore, dentro la barra in basso --- */

/* Il pulsante "puntatore" la nasconde: e' l'unica cosa che scriveva la vecchia
   barra inferiore e vale la pena poterla togliere quando si guarda la foto. */
.hud-bar .pointerInfo {
    display: none;
}

/* Aperta e' una riga sola, con i valori a larghezza fissa: le coordinate
   cambiano ad ogni movimento del mouse e, senza incolonnarle, la barra
   ballerebbe di continuo sotto il puntatore. */
.hud-bar.open .pointerInfo {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding-inline: .3rem;
    white-space: nowrap;
}

.pointerInfo b {
    color: #8b949e;
    font-weight: 500;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pointerInfo span {
    display: inline-block;
    color: #c9d1d9;
    font-variant-numeric: tabular-nums;
}

/* Larghezze fisse: i valori cambiano ad ogni movimento del mouse e senza
   queste la barra si allargherebbe e stringerebbe di continuo. */
/* Al minimo che serve al testo: "20h 55m 42.3s" e "+44° 03′ 14″" a 0,75rem
   stanno in poco piu' di cinque caratteri em. E' un min-width, non un width: se
   un formato piu' lungo dovesse servire (gradi decimali), il campo cresce
   invece di tagliare. */
.pi-ra   { min-width: 5.4rem; }
.pi-dec  { min-width: 5.1rem; }
/* text-align a SINISTRA: allineato a destra, la larghezza fissa lasciava il
   vuoto subito dopo la scritta ZOOM — l'etichetta e il suo numero sembravano
   scollegati (segnalato). Ora il numero sta attaccato all'etichetta e lo
   spazio di riserva, che serve a non far ballare la barra, finisce in coda. */
.pi-zoom { min-width: 2.4rem; text-align: left; }

/* Le coordinate portano alla mappa: si vedono cliccabili solo passandoci
   sopra, per non trasformare una lettura in due link sgargianti. */
.pi-vai {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(154, 164, 174, .45);
    cursor: pointer;
}
.pi-vai:hover,
.pi-vai:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* --- skymap (Fase 6) --- */

/* Nascosto alla vista ma NON agli screen reader e ai motori di ricerca: si
   toglie dal flusso senza display:none, che lo cancellerebbe anche per loro. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* La skymap e' una pagina che NON scorre e non ha intestazioni a schermo: la
   mappa E' il contenuto e si prende tutto il contenitore. Lo scroll vive dentro
   i pannelli sovrapposti alla mappa. */
/* La mappa riempie il contenitore in ALTEZZA e in LARGHEZZA: niente cappello
   di 72rem e niente padding, cosi' va da bordo a bordo. Header e footer
   restano dov'erano — sono fuori da <main> e non li tocca nessuno. */
body.skymap-page main {
    display: flex;
    flex-direction: column;
    max-width: none;
    padding: 0;
}

/* La mappa prende lo spazio, l'elenco sta a fianco e non si stringe sotto una
   larghezza leggibile. Sotto i 900 px l'elenco passa sopra la mappa: su un
   telefono e' quello che si usa davvero (un rettangolo di 2 gradi su un
   touch screen e' difficile da centrare). */
/* Niente piu' due colonne: l'elenco delle foto e' diventato un pannello
   SOVRAPPOSTO alla mappa (dentro il container di Aladin, cosi' lo schermo
   intero se lo porta dietro). Qui resta solo la mappa, che si prende tutta
   l'altezza che avanza. */
.skymap-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

/* min-width:0 su entrambe le colonne. Non corregge un difetto osservato — a
   511 px di viewport la pagina misura 511 e non sborda — ma un elemento di
   griglia ha min-width:auto, cioe' si rifiuta di stringersi sotto il proprio
   contenuto: basterebbe un titolo piu' lungo di questi per farla sbordare. */
.skymap-map {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
}

/* Aladin misura il container come OpenSeadragon: vuole un'altezza VERA, non
   una che dipende dal contenuto (che qui e' vuoto). Stessa trappola della
   Fase 5, stessa soluzione — altezza esplicita. */
/* Il contenitore di Aladin. Ha un'altezza VERA (riempie il flex del padre,
   che riempie <main>, che riempie la pagina) e non piu' un min(70vh, 40rem)
   deciso a naso: Aladin misura il contenitore come faceva OpenSeadragon, e
   un'altezza dedotta dal contenuto — che qui e' vuoto — collassa a zero.
   position:relative perche' TUTTA la nostra interfaccia sta qui dentro: e' cosi'
   che lo schermo intero se la porta dietro invece di lasciarla fuori. */
.skymap-canvas {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background: #05070c;
    /* Da bordo a bordo: niente cornice ne' angoli arrotondati, che avrebbero
       senso su un riquadro dentro la pagina e non su una superficie che LA
       pagina la riempie. */
    overflow: hidden;
}

/* La targhetta col nome del campo puntato. E' un elemento del DOM e non un
   disegno: i riquadri e le foto stanno dentro il ciclo di disegno di Aladin
   (che e' il motivo per cui sono fluidi), e una scritta non ha bisogno di
   entrarci. translate(-50%,-50%) la centra sul campo. */
.skymap-tag {
    position: absolute;
    z-index: 20;
    transform: translate(-50%, -50%);
    padding: .15rem .5rem;
    border-radius: .25rem;
    background: rgb(5 7 12 / .82);
    color: #ffd166;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

/* ---- l'interfaccia della mappa (nostra, non di Aladin) ---------------- */

/* IL GUSCIO DEI COMANDI, condiviso fra la mappa del cielo e il viewer.
   Vive dentro il contenitore della scena — e' cosi' che lo schermo intero se lo
   porta dietro. pointer-events:none sul guscio e auto sui pezzi: fra un
   pulsante e l'altro il trascinamento passa a chi sta sotto. */
.hud {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
}

.hud-bar {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    padding: .3rem;
    border: 1px solid rgb(255 255 255 / .14);
    border-radius: .6rem;
    background: rgb(13 17 23 / .82);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

/* Le barre si stringono sul loro contenuto (width:max-content) invece di
   allargarsi a vuoto per tutta la mappa. Il max-width le fa andare a capo
   quando lo schermo e' stretto, invece di uscire dal bordo. */
.hud-bar-top,
.hud-bar-bottom {
    width: max-content;
    max-width: calc(100% - 1.2rem);
}

/* La barra dei comandi sta a DESTRA, e l'ordine dei pulsanti si rispecchia con
   row-reverse: cosi' il primo comando resta quello piu' vicino al bordo, com'e'
   a sinistra, invece di ritrovarsi in mezzo. Il markup non cambia — l'ordine di
   lettura per chi usa la tastiera o uno screen reader resta quello scritto. */
.hud-bar-top {
    top: .6rem;
    right: .6rem;
    flex-direction: row-reverse;
}

.hud-bar-bottom { bottom: .6rem; left: .6rem; }

/* Larghezza FISSA per il nome dello sfondo: "Automatico", "Mellinger", "DSS2"
   e "2MASS" sono lunghi diversi, e senza questo la barra si allargava e si
   restringeva ad ogni cambio, spostando tutti i pulsanti sotto il dito. */
.hud-btn [data-role="survey-name"] {
    display: inline-block;
    width: 5.25rem;
    text-align: left;
}

.hud-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2rem;
    padding: .25rem .5rem;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: #c9d1d9;
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
}

.hud-btn-icon { padding: .25rem; }

.hud-btn:hover,
.hud-btn:focus-visible { background: rgb(255 255 255 / .12); color: #fff; }

/* Acceso: lo stesso azzurro dei riquadri, cosi' "acceso" vuol dire la stessa
   cosa in tutta la pagina. */
.hud-btn.is-on { background: rgb(88 166 255 / .22); color: #fff; }
.hud-btn.is-loading { opacity: .6; cursor: progress; }

.hud-slider {
    display: flex;
    align-items: center;
    padding: 0 .4rem;
}

.hud-slider input {
    width: 6.5rem;
    accent-color: var(--accent);
    cursor: pointer;
}

.hud-readout {
    padding-inline: .4rem;
    color: #9aa4ae;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- il pannello dell'elenco ---- */

/* Ancorato a DESTRA come la barra: il pannello scende da sotto il pulsante che
   lo apre, invece di comparire dall'altra parte della mappa. */
.hud-panel {
    position: absolute;
    z-index: 5;
    /* Sotto la barra QUANTO E' ALTA la barra, non quanto si presume che sia:
       --hud-alto la misura il JS (misuraBarra) e la aggiorna a ogni cambio di
       layout. Il 3,4rem resta come ripiego per il primo fotogramma e per il
       caso in cui il JS non parta. */
    /* 1,2rem e non 0,6: la barra stessa parte a .6rem dal bordo, quindi il suo
       fondo sta a (.6rem + altezza). Sommando un solo .6rem i due riquadri si
       toccavano — misurati 0 px di distanza. */
    top: calc(var(--hud-alto, 2.8rem) + 1.2rem);
    right: .6rem;
    width: min(20rem, calc(100% - 1.2rem));
    /* L'altezza e' limitata e lo scroll sta QUI DENTRO: il pannello non
       allunga mai la pagina, che infatti non scorre. Lo spazio tolto tiene
       conto della barra in alto E di quella in basso: senza, il pannello
       arrivava a coprire i comandi dello zoom. */
    max-height: calc(100% - var(--hud-alto, 2.8rem) - 5.2rem);
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(255 255 255 / .14);
    border-radius: .6rem;
    background: rgb(13 17 23 / .92);
    backdrop-filter: blur(8px);
    pointer-events: auto;
    overflow: hidden;
}

.hud-panel[hidden] { display: none; }

.hud-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .35rem .5rem .75rem;
    border-bottom: 1px solid rgb(255 255 255 / .1);
}

.hud-panel-head h2 {
    margin: 0;
    color: #c9d1d9;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.hud-panel-list {
    margin: 0;
    padding: .35rem;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;   /* arrivato in fondo, non scrolla la pagina */
}

.hud-panel-list li {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.hud-eye {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: #9aa4ae;
    cursor: pointer;
}

.hud-eye:hover { background: rgb(255 255 255 / .12); color: #fff; }
.hud-eye.is-off { color: #6e7681; }

/* Sul viewer i pannelli contengono un articolo o una scheda tecnica, non un
   elenco: servono piu' larghi, e il corpo scorre da se'. */
body.viewer .hud-panel {
    /* Un dito di aria sotto la barra dei comandi: attaccati sembravano un
       pezzo solo, e non si capiva che il pannello e' una cosa che si apre. */
    top: 4rem;
    width: min(26rem, calc(100% - 1.2rem));
    max-height: calc(100% - 9rem);
}

.hud-panel .skymap-item { flex: 1 1 auto; min-width: 0; padding: .35rem; }
.hud-panel .skymap-item img { flex-basis: 3.25rem; width: 3.25rem; }
.hud-panel .skymap-item-text strong { font-size: .8125rem; }
.hud-panel .skymap-item-text small { font-size: .75rem; }

/* "Carico la mappa..." e il messaggio di errore: sovrapposti e centrati, non in
   fila sotto la mappa — che ora riempie tutto e non lascia spazio sotto. */
.skymap-status {
    position: absolute;
    z-index: 40;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: min(28rem, 80%);
    margin: 0;
    text-align: center;
    color: var(--muted);
    font-size: .9375rem;
}

.skymap-status--error {
    color: var(--ko);
}

.skymap-list h2 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--muted);
}

.skymap-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.skymap-item {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .5rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
}

.skymap-item:hover,
.skymap-item:focus-visible {
    border-color: var(--accent);
    background: var(--bg-soft);
}

.skymap-item img {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: .25rem;
    background: var(--line);
}

.skymap-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.skymap-item-text strong {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skymap-item-text small {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ---- la mappa su schermo stretto ---- */
@media (max-width: 46rem) {
    /* Il titolo e l'introduzione si mangiano mezzo schermo su un telefono, e
       la mappa e' il contenuto. L'introduzione sparisce (resta nel <title> e
       nella description, quindi non si perde per chi cerca), il titolo si
       stringe. */
    /* I comandi vanno a capo invece di uscire dallo schermo, e i bersagli
       crescono: un pulsante da 2rem col dito non si prende. */
    .hud-bar-top {
        right: .6rem;
        width: auto;
        max-width: none;
    }

    .hud-btn { min-height: 2.4rem; }
    .hud-btn-icon { padding: .4rem; }

    /* Su uno schermo stretto le etichette spariscono TUTTE: restano nel title
       e nell'aria-label.

       Anche il nome dello sfondo, che prima faceva eccezione. La ragione di
       allora era buona — e' l'unica etichetta che dice uno stato, e senza non
       si saprebbe se si sta guardando la Mellinger o la DSS — ma costava una
       parola larga in una barra che sul telefono va gia' a capo. Ora quello
       stato si annuncia quando CAMBIA, con lo stesso riquadro del suggerimento
       del doppio click (avviso() in skymap.js): un'informazione che serve nel
       momento in cui cambia non ha bisogno di stare sempre a schermo. */
    .hud-btn-text,
    .hud-btn [data-role="survey-name"] { display: none; }

    .hud-slider input { width: 4.5rem; }

    /* Il pannello prende tutta la larghezza ma resta appeso in ALTO, sotto la
       barra che lo apre. Prima si ancorava in basso e costringeva zoom e
       coordinate a scappare in cima allo schermo: un comando che cambia posto
       a seconda di cos'altro e' aperto e' peggio del problema che risolveva. */
    .hud-panel {
        right: .6rem;
        left: .6rem;
        bottom: auto;
        width: auto;
        max-height: min(55%, 20rem);
    }

    /* Zoom, campo e coordinate restano in basso a sinistra, dove sono sul
       desktop: stessa pagina, stesso posto. */
    .hud-bar-bottom {
        bottom: .6rem;
        left: .6rem;
    }
}

@media (max-width: 600px) {
    .site-header-inner {
        gap: .75rem;
        padding-inline: 1rem;
    }

    /* LA STRISCIA DELLE IMMAGINI DIVENTA UNA COLONNA.
       Orizzontale e larga quanto lo schermo doveva per forza stare SOTTO la
       barra dei comandi, e le due si mangiavano l'alto della foto una dopo
       l'altra. In verticale, appoggiata a sinistra, convivono: la barra tiene
       la sua riga in alto e la colonna scende lungo il bordo.
       Le miniature si stringono da 3,5 a 3rem — su una colonna la larghezza e'
       spazio tolto alla foto, mentre in orizzontale era spazio tolto alle altre
       miniature. */
    .viewer-gallery {
        /* IN ALTO, non sotto la barra. Il 4rem di prima era un residuo di
           quando la striscia era orizzontale e larga quanto lo schermo: li'
           doveva per forza scendere sotto i comandi. La barra pero' e'
           ancorata a DESTRA e si stringe sul suo contenuto, quindi lungo il
           bordo sinistro lo spazio in alto c'e' — e lasciarlo vuoto era
           spazio sprecato per un vincolo che non esiste piu' (segnalato). */
        top: .5rem;
        left: .5rem;
        right: auto;
        max-width: none;
        flex-direction: column;
        /* Non oltre lo spazio libero fra la barra in alto e quella in basso:
           se le immagini sono tante la colonna scorre invece di uscire. */
        /* Si ferma prima della meta' dello schermo, dove passano le frecce di
           sfoglio: cosi' non possono incontrarsi nemmeno con molte immagini, e
           la colonna scorre invece di allungarsi. */
        max-height: calc(50% - 3.5rem);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .viewer-gallery a {
        flex: 0 0 auto;
        width: 3rem;
    }

    /* La colonna si prende la striscia sinistra e la barra non ci entra: si
       ferma prima e va a capo nello spazio che le resta. Cosi' le due non
       possono sovrapporsi nemmeno quando i comandi occupano due righe —
       che su un telefono stretto succede. */
    body.viewer:has(.viewer-gallery) .hud-bar-top {
        max-width: calc(100% - 5.2rem);
    }

    /* ⚠️ LA FRECCIA RESTA AL SUO BORDO.
       Per un giro l'ho spostata a 5rem per "farle posto", su una misura che
       diceva sovrapposizione. Quella misura guardava solo le X: la colonna sta
       in alto — con quattro miniature finisce intorno ai 270px — e la freccia
       sta a meta' altezza, 371px. Non si sono mai toccate. Spostata, si
       staccava dal bordo senza motivo, e si vedeva (segnalato).

       Se le immagini sono tante la collisione puo' nascere davvero: allora si
       limita la COLONNA in altezza (sopra), invece di spostare la freccia. E'
       la colonna a doversi contenere, non la navigazione a doversi scansare. */
}

/* --- tag (Fase 10) ------------------------------------------ */

/* Sono LINK, e devono sembrarlo: il tag e' il modo per passare da questa foto
   alle simili. Una pillola piatta che non invita al click sarebbe decorazione. */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
}

.tag {
    display: inline-block;
    padding: .2rem .6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .8125rem;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.tag:hover,
.tag:focus-visible {
    color: var(--fg);
    border-color: var(--accent);
}

/* Il cursore della magnitudine, nella barra in alto del viewer. Compare solo
   con le stelle accese (hidden lo mette/toglie il JS). */
.hud-slider-mag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.hud-slider-mag[hidden] { display: none; }

/* Larghezza fissa sul numero: senza, passando da "16" a "9.5" la barra si
   allarga e sposta i pulsanti sotto il dito — lo stesso motivo per cui il
   nome dello sfondo, sulla mappa, ha una larghezza fissa. */
.hud-slider-mag .hud-readout {
    min-width: 2.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hud-slider-mag input[type="range"] { width: 6rem; }

/* La stella sotto il puntatore, in coda alla barra di lettura. Larghezza
   NON fissa (le sigle sono lunghe diverse) ma con un massimo: e' l'ultima
   voce, quindi allargandosi non sposta le altre. */
.pi-star {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- editor del cielo (solo admin) --------------------------- */

#skyEdit .field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .5rem;
    margin: .5rem 0;
}

#skyEdit label {
    display: block;
    font-size: .8125rem;
    color: var(--muted);
}

#skyEdit input {
    width: 100%;
    margin-top: .2rem;
    padding: .3rem .45rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-size: .875rem;
}

.edit-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem;
}

.edit-nuovo { margin-top: 1rem; }

/* L'esito di un salvataggio: verde implicito, rosso quando e' andata male. */
.edit-errore { color: var(--ko); }

/* Con l'editor acceso il cursore dice che si puo' afferrare. */
body.viewer .imView.modifica-cielo { cursor: crosshair; }

/* --- indice dei tag ----------------------------------------- */

.tag-group { margin-bottom: 2rem; }

.tag-group h2 {
    font-size: 1rem;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: .6rem;
}

/* Nell'indice le pillole sono piu' grandi: qui sono il contenuto della
   pagina, mentre in fondo a un articolo sono una nota. */
.tag-list--grande .tag {
    padding: .35rem .8rem;
    font-size: .9375rem;
}

/* Il conteggio dentro la pillola, smorzato: dice quanto c'e' dietro senza
   rubare l'attenzione al nome, che e' quello su cui si clicca. */
.tag-conta {
    margin-left: .4rem;
    padding-left: .4rem;
    border-left: 1px solid var(--line);
    color: var(--muted);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

/* --- testo lungo (pagina about) ------------------------------ */

/* main e' largo 72rem, giusto per una griglia di card ma troppo per la
   PROSA: righe da novanta caratteri si leggono male, si perde il capo quando
   si va a capo. 38rem sono circa 70 caratteri, che e' la misura comoda. */
.prose {
    max-width: 38rem;
    margin: 0 auto;
}

.prose h2 {
    margin: 2rem 0 .6rem;
    font-size: 1.1rem;
}

.prose p,
.prose li { line-height: 1.65; }

.prose ul {
    padding-left: 1.2rem;
    margin: .5rem 0;
}

.prose li { margin-bottom: .5rem; }

/* I crediti: il nome del progetto in evidenza, la spiegazione smorzata. Sono
   un elenco di debiti, non una lista di link da cliccare per forza. */
.credits { list-style: none; padding-left: 0; }

.credits li {
    padding-left: 1rem;
    border-left: 2px solid var(--line);
    margin-bottom: .9rem;
}

.credits a { font-weight: 600; }

/* Il "torna indietro" in fondo a una pagina o a un pannello. Era usato in tre
   punti (viewer, tag, about) e non era mai stato definito. */
.panel-back {
    margin-top: 2rem;
    font-size: .9375rem;
}

/* --- sfogliare le foto (viewer) ------------------------------ */

/* Ai bordi, verticalmente al centro: e' dove la mano le cerca. Discrete
   finche' non ci passi sopra, perche' il contenuto e' la foto. */
.hud-sfoglia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgb(13 17 23 / .55);
    color: var(--fg);
    text-decoration: none;
    opacity: .55;
    transition: opacity .15s, background .15s;
    backdrop-filter: blur(4px);
}

.hud-sfoglia:hover,
.hud-sfoglia:focus-visible {
    opacity: 1;
    background: rgb(13 17 23 / .85);
}

.hud-sfoglia--prev { left: .75rem; }
.hud-sfoglia--next { right: .75rem; }

/* Su schermo stretto la barra inferiore e i pannelli si prendono i bordi:
   le frecce scendono di dimensione e si avvicinano al bordo. */
@media (max-width: 700px) {
    .hud-sfoglia { width: 2.2rem; height: 2.2rem; opacity: .8; }
    .hud-sfoglia--prev { left: .35rem; }
    .hud-sfoglia--next { right: .35rem; }
}

/* --- i numeri ------------------------------------------------
   Griglia che si adatta da sola: auto-fit + minmax vuol dire che
   le voci si dispongono su 4, 2 o 1 colonna secondo lo spazio,
   senza una sola media query. */
.numeri {
    margin: 2.5rem 0 3rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.numeri-h {
    margin: 0 0 1.5rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.numeri-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.75rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.numeri-griglia li {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.numeri-cifra {
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
    /* Le cifre incolonnate leggono meglio a larghezza fissa: cosi' un 1
       non e' piu' stretto di un 8 e i numeri non ballano. */
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}
.numeri-che {
    font-size: .95rem;
    color: var(--muted);
}
.numeri-base {
    font-size: .78rem;
    line-height: 1.35;
    color: var(--testo-fioco, var(--muted));
    opacity: .75;
}

/* --- footer: firma + lingua ---------------------------------
   Una riga sola, centrata. Il selettore era nato per l'header, dove
   `margin-left: auto` lo spingeva a destra: qui va annullato, se no si
   scolla dalla firma e va a sbattere sul bordo. */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    flex-wrap: wrap;
}

.site-footer .language-switch {
    margin-left: 0;
}

/* Piu' piccolo della versione dell'header: quaggiu' e' un comando di
   servizio, non una voce di navigazione.

   L'altezza NON scende sotto 1.75rem (28px) anche se visivamente
   reggerebbe meno: sotto quella soglia diventa difficile da centrare col
   dito su un telefono, e un comando che si manca e' peggio di un comando
   un po' piu' grande del necessario. */
.language-switch-sm a {
    min-width: 2rem;
    min-height: 1.75rem;
    padding: .15rem .4rem;
    font-size: .6875rem;
}

/* Il suggerimento "doppio click per aprire": la stessa barra di stato che dice
   "carico la mappa", riusata. Piu' viva del testo di servizio perche' e' una
   risposta a un gesto appena fatto, non un messaggio di sistema. */
.skymap-status.is-hint {
    color: var(--fg);
    background: rgb(13 17 23 / .85);
    border-color: var(--accent);
}

/* Il suggerimento del doppio click sulla mappa. Piccolo ma evidente: sta
   sopra la mappa, in basso al centro, e sparisce da solo dopo un paio di
   secondi. Non e' un avviso — e' la risposta a un gesto appena fatto. */
.skymap-hint {
    position: absolute;
    left: 50%;
    bottom: 3.2rem;
    z-index: 30;
    margin: 0;
    padding: .35rem .7rem;
    transform: translate(-50%, .4rem);
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: rgb(13 17 23 / .88);
    color: var(--fg);
    font-size: .8125rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
}
.skymap-hint.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
    .skymap-hint { transition: none; }
}

/* --- lo zoom lento sulla copertina --------------------------
   E' l'effetto che aveva il vecchio sito (css/main.css:181-198 dell'oracolo):
   scale(1.2) con mezzo secondo di transizione. Stessi numeri, perche' la
   richiesta era "quello di prima", non "uno nuovo".

   Il ritaglio lo fa gia' .card con overflow:hidden, quindi l'immagine che
   cresce resta dentro il suo riquadro invece di sbordare sul testo. */
/* ⚠️ IL RITAGLIO STA SULLA SCATOLA, NON SULLA CARD.
   La card ha gia' overflow:hidden, quindi l'immagine ingrandita non esce dai
   suoi bordi esterni — ma dentro la card cresce comunque oltre la propria area
   e va a coprire il titolo che sta sotto (segnalato). Serve un contenitore che
   ritagli PROPRIO la copertina.
   Quel contenitore c'e' gia' ed e' <picture>: fin qui era display:contents,
   cioe' tolta dal layout. Le si ridanno corpo e proporzioni e diventa la
   finestra dentro cui l'immagine si ingrandisce restando al suo posto. */
.card picture {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.card picture .card-cover {
    height: 100%;
    aspect-ratio: auto;
}

.card-cover {
    transition: transform .5s ease;
}

.card:hover .card-cover,
.card:focus-within .card-cover {
    transform: scale(1.2);
}

/* Chi ha chiesto meno animazioni al sistema operativo non se le vede
   arrivare da qui: un'immagine che si muove sotto il puntatore e' esattamente
   il tipo di movimento che quella preferenza esclude. */
@media (prefers-reduced-motion: reduce) {
    .card-cover { transition: none; }
    .card:hover .card-cover,
    .card:focus-within .card-cover { transform: none; }
}

/* --- la ricerca nella mappa ---------------------------------
   Pannello stretto: un elenco di nomi non ha bisogno della larghezza
   dell'elenco foto, che porta le miniature. */
.hud-panel--cerca {
    width: min(22rem, calc(100vw - 2rem));
}

.hud-cerca-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .35rem .55rem;
    border: 1px solid var(--line);
    border-radius: .375rem;
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-size: .875rem;
}
.hud-cerca-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* L'intestazione di gruppo non e' cliccabile e non deve sembrarlo. */
.hud-cerca-gruppo {
    padding: .5rem .6rem .2rem;
    color: var(--muted);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hud-cerca-voce {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    width: 100%;
    padding: .4rem .6rem;
    border: 0;
    border-radius: .375rem;
    background: none;
    color: var(--fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.hud-cerca-voce:hover,
.hud-cerca-voce:focus-visible {
    background: var(--bg-soft);
}
.hud-cerca-voce span {
    color: var(--muted);
    font-size: .8125rem;
}

.hud-cerca-vuoto {
    margin: 0;
    padding: .6rem;
    color: var(--muted);
    font-size: .8125rem;
}

/* Il pulsante del formato coordinate vive nella parte a scomparsa, come la
   lettura che governa: chiuso non c'e' niente da riformattare, quindi non c'e'
   niente da premere. */
.hud-bar .hud-btn-coord {
    display: none;
}
.hud-bar.open .hud-btn-coord {
    display: inline-flex;
}

/* Le coordinate quando il puntatore ha lasciato la foto: ancora leggibili e
   cliccabili — servono proprio per andarci sopra col mouse — ma spente, cosi'
   si capisce che non stanno piu' inseguendo nulla. */
.pointerInfo.is-vecchia {
    opacity: .55;
}
.pointerInfo.is-vecchia:hover {
    opacity: 1;
}