/*
 * Gli argomenti: «Il filo» di un tag e la mappa (dalla 0.27.0).
 *
 * Si carica solo sulle pagine dei tag e sulla pagina con il modello «La mappa
 * degli argomenti». Il linguaggio e' quello delle prove approvate il 5 ottobre
 * 2026: niente fotografie, il filo rosso, l'avorio della carta, il nome in
 * grande. Un tag non e' una sezione: non deve sembrarlo.
 */

.in-filo,
.in-mappa {
    --in-filo-rosso: var(--in-marchio);
    --in-filo-carta: var(--in-fondo-servizio);
    --in-filo-riga: #ece6da;
    --in-filo-tenue: #6b6760;
    padding-top: var(--in-s8);
}

.in-filo-dentro {
    max-width: var(--in-larghezza-impianto);
}

/* ------------------------------------------------------------ la testa */

.in-filo-testa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--in-s8);
    padding-bottom: var(--in-s7);
}

.in-filo-testa.is-ridotta .in-filo-principale {
    padding-bottom: var(--in-s5);
}

.in-filo-occhiello {
    margin: 0;
    font: 700 0.8125rem/1 var(--in-interfaccia);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--in-filo-rosso);
}

.in-filo-occhiello span {
    font: 400 1.625rem/1 var(--in-titoli);
    letter-spacing: 0;
    vertical-align: -3px;
    margin-right: 2px;
}

.in-filo-nome,
.in-mappa-titolo {
    margin: var(--in-s4) 0 var(--in-s4);
    font: 400 clamp(3rem, 2rem + 5vw, 6rem)/0.98 var(--in-titoli);
    letter-spacing: -0.02em;
    color: var(--in-testo);
    overflow-wrap: anywhere;
}

.in-mappa-titolo {
    font-size: clamp(2.5rem, 1.8rem + 3.5vw, 5.25rem);
}

.in-filo-frase,
.in-mappa-intro {
    margin: 0 0 var(--in-s6);
    font: italic 400 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.4 var(--in-titoli);
    color: #3a3630;
    max-width: 44rem;
}

.in-mappa-intro p {
    margin: 0 0 var(--in-s3);
}

.in-filo-etichetta {
    margin: 0 0 var(--in-s3);
    font: 700 0.6875rem/1.2 var(--in-interfaccia);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--in-filo-tenue);
}

/* il ritmo */
.in-ritmo {
    display: block;
    width: 100%;
    max-width: 760px;
    height: 84px;
    overflow: visible;
}
.in-ritmo-barra { fill: var(--in-filo-rosso); }
.in-ritmo-vuoto { fill: #c9c2b4; }
.in-ritmo-anno { stroke: #e5dfd2; vector-effect: non-scaling-stroke; }
.in-ritmo-etichetta { font: 600 11px var(--in-interfaccia); fill: var(--in-filo-tenue); }

/* il lato: sezioni e vicini */
.in-filo-sezioni {
    list-style: none;
    margin: 0 0 var(--in-s6);
    padding: 0;
}
.in-filo-sezioni li {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--in-filo-riga);
    font: 400 1.0625rem/1.3 var(--in-titoli);
}
.in-filo-sezioni i { width: 10px; height: 10px; border-radius: 50%; }
.in-filo-sezioni a { color: var(--in-testo); text-decoration: none; }
.in-filo-sezioni a:hover { color: var(--in-filo-rosso); }
.in-filo-sezioni b { font: 600 0.8125rem var(--in-interfaccia); color: var(--in-filo-tenue); }

.in-vicini {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    overflow: visible;
}
.in-vicini-filo { stroke: var(--in-filo-rosso); }
.in-vicini-centro { fill: var(--in-filo-rosso); }
.in-vicini-voce circle { fill: #fff; stroke: var(--in-testo); stroke-width: 1.5; transition: fill .15s; }
.in-vicini-voce text { font: 400 15px var(--in-titoli); fill: var(--in-testo); text-anchor: middle; }
.in-vicini-voce:hover circle,
.in-vicini-voce:focus circle { fill: var(--in-filo-rosso); }
.in-vicini-voce:hover text,
.in-vicini-voce:focus text { fill: var(--in-filo-rosso); text-decoration: underline; }

/* ------------------------------------------------------------ gli anni */

.in-filo-anni {
    border-top: 1px solid var(--in-testo);
    padding-bottom: var(--in-s7);
}

.in-filo-anno-testa {
    display: grid;
    grid-template-columns: 200px 140px 1fr auto;
    align-items: end;
    gap: var(--in-s5);
    padding: 28px 0 18px;
    border-bottom: 1px solid var(--in-filo-riga);
    cursor: pointer;
    list-style: none;
}
.in-filo-anno-testa::-webkit-details-marker { display: none; }
.in-filo-anno-testa:focus-visible { outline: 2px solid var(--in-fuoco); outline-offset: 4px; }

.in-filo-anno-numero {
    font: 300 4.5rem/0.8 var(--in-titoli);
    color: var(--in-testo);
}
.in-filo-anno:not([open]) .in-filo-anno-numero { color: #b9b2a6; }

.in-filo-anno-quanti { font: 600 0.8125rem var(--in-interfaccia); color: var(--in-filo-tenue); }

.in-mini { display: flex; gap: 4px; align-items: flex-end; height: 34px; }
.in-mini-mese { width: 16px; height: 4px; background: #e5dfd2; }
.in-mini-mese.is-pieno { height: max(6px, var(--h)); background: var(--in-filo-rosso); }

.in-filo-anno-apri { font: 600 0.8125rem var(--in-interfaccia); color: var(--in-filo-rosso); }
.in-filo-anno-apri .is-chiuso::after { content: " ↓"; }
.in-filo-anno[open] .in-filo-anno-apri .is-chiuso,
.in-filo-anno:not([open]) .in-filo-anno-apri .is-aperto { display: none; }

/* il filo */
.in-filo-nodi {
    --in-filo-asse: 229px;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    position: relative;
}
.in-filo-nodi::before {
    content: "";
    position: absolute;
    left: var(--in-filo-asse);
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--in-filo-rosso);
}

.in-filo-mese {
    padding: 22px 0 6px calc(var(--in-filo-asse) + 31px);
    font: 700 0.6875rem var(--in-interfaccia);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--in-filo-tenue);
}

.in-filo-nodo {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 60px;
    padding: 12px 0;
    position: relative;
}
.in-filo-nodo::before {
    content: "";
    position: absolute;
    left: calc(var(--in-filo-asse) - 7px);
    top: 20px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--in-filo-rosso);
}
.in-filo-data {
    text-align: right;
    font: 600 0.8125rem var(--in-interfaccia);
    color: var(--in-filo-tenue);
    padding-top: 16px;
}
.in-filo-sezione {
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    font: 700 0.65625rem var(--in-interfaccia);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--in-filo-tenue);
}
.in-filo-sezione i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.in-filo-titolo {
    margin: 4px 0;
    font: 400 1.625rem/1.15 var(--in-titoli);
}
.in-filo-titolo a { color: var(--in-testo); text-decoration: none; }
.in-filo-titolo a:hover { color: var(--in-filo-rosso); }
.in-filo-firma { margin: 0; font: italic 400 0.9375rem var(--in-titoli); color: var(--in-filo-tenue); }

/* il silenzio: il filo diventa tratteggio */
.in-filo-silenzio {
    position: relative;
    height: 90px;
}
.in-filo-silenzio::after {
    content: "";
    position: absolute;
    left: calc(var(--in-filo-asse) - 3px);
    top: 0;
    bottom: 0;
    width: 10px;
    background: var(--in-fondo);
}
.in-filo-silenzio::before {
    content: "";
    position: absolute;
    left: var(--in-filo-asse);
    top: 0;
    bottom: 0;
    border-left: 2px dashed #c9a9a9;
    z-index: 1;
}
.in-filo-silenzio span {
    position: absolute;
    left: calc(var(--in-filo-asse) + 31px);
    top: 34px;
    font: italic 400 0.9375rem var(--in-titoli);
    color: #9a8f80;
}

/* la coda: il rimando alla mappa */
.in-filo-coda {
    background: var(--in-filo-carta);
    padding-block: var(--in-s7);
    margin-inline: calc(-1 * var(--in-margine-laterale));
    padding-inline: var(--in-margine-laterale);
}
.in-filo-coda p { margin: 0 auto; font: 400 1.25rem/1.5 var(--in-titoli); color: #3a3630; }
.in-filo-coda a { color: var(--in-filo-rosso); font: 600 0.875rem var(--in-interfaccia); margin-left: 12px; text-decoration: none; white-space: nowrap; }
.in-filo-coda a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ la mappa */

.in-mappa-testa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--in-s8);
    align-items: end;
    padding-bottom: var(--in-s6);
}

.in-mappa-cerca input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--in-testo);
    border-radius: 999px;
    padding: 14px 22px;
    font: 1rem var(--in-interfaccia);
    color: var(--in-testo);
    background: #fff;
}
.in-mappa-cerca input:focus { outline: 2px solid var(--in-fuoco); outline-offset: 2px; }
.in-mappa-esito { min-height: 1.4em; margin: var(--in-s2) 0 0 22px; font: 0.8125rem var(--in-interfaccia); color: var(--in-filo-tenue); }

.in-mappa-carta {
    margin: 0 calc(-1 * var(--in-margine-laterale));
    padding: 0 var(--in-margine-laterale);
    background: var(--in-filo-carta);
    border-top: 5px double var(--in-testo);
}
.in-mappa-carta > div { position: relative; }
.in-mappa-svg { display: block; width: 100%; height: auto; }
.in-retino-punto { fill: #d9d1c2; }
.in-mappa-legami line { stroke: var(--in-testo); stroke-width: 1; }
.in-mappa-punto circle { stroke: #fff; stroke-width: .5; fill-opacity: .55; transition: opacity .2s, fill-opacity .2s; }
.in-mappa-punto.is-grande circle { stroke-width: 1; fill-opacity: .9; }
.in-mappa-punto:hover circle,
.in-mappa-punto:focus circle { fill-opacity: 1; stroke: var(--in-testo); stroke-width: 2; }
.in-mappa-nome {
    font-family: var(--in-titoli);
    fill: var(--in-testo);
    text-anchor: middle;
    paint-order: stroke;
    stroke: var(--in-filo-carta);
    stroke-width: 4px;
    pointer-events: none;
    transition: opacity .2s;
}
/* Il tema regola i caratteri con font-size-adjust; dentro un SVG che si
 * rimpicciolisce, Chrome calcola la correzione sulla misura sullo schermo e
 * i nomi della mappa diventerebbero minuscoli sul telefono. Nei disegni la
 * misura la decide il disegno. */
.in-mappa-svg text,
.in-vicini text,
.in-ritmo text { font-size-adjust: none; }
.in-mappa-nome--tel { display: none; }
.in-mappa-nota {
    position: absolute;
    right: 0;
    bottom: 16px;
    font: 0.75rem var(--in-interfaccia);
    color: var(--in-filo-tenue);
}

/* ricerca e legenda: chi non passa il filtro si spegne */
.in-mappa-carta.is-filtrata .in-mappa-legami { opacity: .15; }
.in-mappa-punto.is-spento circle { opacity: .12; }
.in-mappa-nome.is-spento { opacity: 0; }
.in-mappa-punto.is-trovato circle { fill-opacity: 1; stroke: var(--in-testo); stroke-width: 1.5; }

.in-mappa-legenda {
    list-style: none;
    margin: 0;
    padding: var(--in-s5) 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 30px;
    border-bottom: 1px solid #e5dfd2;
}
.in-mappa-legenda button {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    margin: -6px -8px;
    border: 1px solid transparent;
    background: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
}
.in-mappa-legenda button:hover { border-color: var(--in-bordo); }
.in-mappa-legenda button[aria-pressed="true"] { border-color: var(--in-testo); background: #fff; }
.in-mappa-legenda i { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; }
.in-mappa-legenda b { display: block; font: 400 1.1875rem/1.25 var(--in-titoli); }
.in-mappa-legenda span span { font: 0.75rem/1.4 var(--in-interfaccia); color: var(--in-filo-tenue); }

/* l'indice dalla A alla Z */
.in-mappa-indice { padding-block: var(--in-s7) var(--in-s8); }
.in-mappa-indice h2 { margin: 0 0 6px; font: 400 2.5rem/1.1 var(--in-titoli); }
.in-mappa-indice-nota { margin: 0 0 var(--in-s5); font: italic 1.0625rem var(--in-titoli); color: var(--in-filo-tenue); }
.in-mappa-lettere { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--in-s6); }
.in-mappa-lettere a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #d9d1c2;
    border-radius: 50%;
    font: 600 0.8125rem var(--in-interfaccia);
    color: var(--in-testo);
    text-decoration: none;
}
.in-mappa-lettere a:hover,
.in-mappa-lettere a:focus { background: var(--in-filo-rosso); border-color: var(--in-filo-rosso); color: #fff; }
.in-mappa-gruppo {
    display: grid;
    grid-template-columns: 80px 1fr;
    border-top: 1px solid var(--in-testo);
    padding: 16px 0;
    scroll-margin-top: 120px;
}
.in-mappa-gruppo h3 { margin: 0; font: 400 2.5rem/1 var(--in-titoli); }
.in-mappa-gruppo ul { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: 30px; }
.in-mappa-gruppo li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px dotted #e5dfd2;
    break-inside: avoid;
    font: 400 1rem/1.35 var(--in-titoli);
}
.in-mappa-gruppo li a { color: var(--in-testo); text-decoration: none; }
.in-mappa-gruppo li a:hover { color: var(--in-filo-rosso); }
.in-mappa-gruppo li b { font: 600 0.6875rem var(--in-interfaccia); color: #9a8f80; padding-top: 4px; }

/* ------------------------------------------------------------ schermi stretti */

@media (max-width: 1100px) {
    .in-filo-testa,
    .in-mappa-testa { grid-template-columns: 1fr; gap: var(--in-s6); }
    .in-mappa-legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .in-mappa-gruppo ul { columns: 3; }
}

@media (max-width: 720px) {
    .in-filo, .in-mappa { padding-top: var(--in-s6); }
    .in-filo-anno-testa { grid-template-columns: auto 1fr; gap: 8px 16px; }
    .in-filo-anno-numero { font-size: 3rem; }
    .in-mini { grid-column: 1 / -1; }
    .in-filo-anno-apri { grid-column: 1 / -1; }
    .in-filo-nodi { --in-filo-asse: 64px; }
    .in-filo-nodo { grid-template-columns: 48px 1fr; gap: 36px; }
    .in-filo-data { font-size: 0.75rem; }
    .in-filo-titolo { font-size: 1.25rem; }
    .in-filo-coda a { display: inline-block; margin: var(--in-s2) 0 0; }

    /* Sul telefono la mappa e' un colpo d'occhio: restano solo i dieci nomi
     * maggiori, scritti a parte in un corpo grande. Il disegno e' largo 1200
     * unita' e qui si riduce a un terzo: 40 unita' diventano circa 13 pixel.
     * Il lavoro vero lo fanno la ricerca e l'indice. */
    .in-mappa-nome { display: none; }
    .in-mappa-nome.in-mappa-nome--tel { display: inline; stroke-width: 8px; }
    .in-ritmo-etichetta { display: none; }
    .in-mappa-nota { position: static; display: block; padding: 0 0 var(--in-s3); }
    .in-mappa-legenda { grid-template-columns: 1fr; }
    .in-mappa-gruppo { grid-template-columns: 1fr; }
    .in-mappa-gruppo ul { columns: 2; column-gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .in-mappa-punto circle,
    .in-mappa-nome,
    .in-vicini-voce circle { transition: none; }
}