/* =========================================================================
   Ciclovia del Tronto — componenti
   Ogni valore viene dai token (tokens.css) o dalla scala Open Props.
   ========================================================================= */

/* Archivo variabile (larghezza 62–125%, peso 100–900), servito dal sito: nessuna richiesta a Google.
   Licenza SIL OFL in assets/fonts/OFL.txt. Sottoinsiemi latin e latin-ext presi da Google Fonts (v25). */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--size-3)); }
body {
  margin: 0;
  background: var(--surface-1);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--font-lineheight-3);
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-1); }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--size-3); top: -100px; z-index: var(--layer-5); background: var(--brand); color: var(--brand-ink); padding: var(--size-2) var(--size-3); font-weight: var(--font-weight-7); }
.skip:focus { top: var(--size-2); }

/* ---------- contenitore e griglia ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * 16px);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
.stack { display: grid; gap: var(--size-3); }

/* ---------- tipografia di ruolo ---------- */
.label {
  font-size: var(--type-label);
  font-weight: var(--font-weight-7);
  font-stretch: var(--font-label-stretch);
  letter-spacing: var(--font-letterspacing-3);
  text-transform: uppercase;
  color: var(--text-2);
}
/* la spiegazione accanto a un'etichetta resta in minuscolo: il maiuscolo lungo si legge male */
.label small { font-size: var(--type-small); font-weight: var(--font-weight-5); letter-spacing: 0; text-transform: none; font-stretch: 100%; }
.eyebrow { display: flex; align-items: center; gap: var(--size-2); }
.eyebrow::before { content: ""; width: var(--size-5); height: 3px; background: var(--brand); }
.display {
  font-size: var(--type-display);
  font-weight: var(--font-display-weight);
  font-stretch: var(--font-display-stretch);
  line-height: var(--font-lineheight-00);
  letter-spacing: -0.01em;
}
.h1 { font-size: var(--type-h1); font-weight: var(--font-display-weight); font-stretch: var(--font-display-stretch); line-height: var(--font-lineheight-0); letter-spacing: -0.005em; }
.h2 { font-size: var(--type-h2); font-weight: var(--font-display-weight); font-stretch: var(--font-display-stretch); line-height: var(--font-lineheight-0); }
.h3 { font-size: var(--type-h3); font-weight: var(--font-weight-7); line-height: var(--font-lineheight-1); }
.lead { font-size: var(--type-lead); color: var(--text-2); max-width: 60ch; line-height: var(--font-lineheight-3); }
.small { font-size: var(--type-small); }
.muted { color: var(--text-2); }
.num { font-variant-numeric: tabular-nums; }
.prose { max-width: 65ch; display: grid; gap: var(--size-3); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: var(--layer-4);
  background: var(--surface-1);
  border-bottom: var(--rule-w) solid var(--rule);
}
.site-header { transition: transform .28s var(--ease-3), box-shadow .2s; will-change: transform; }
.site-header.is-hidden { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px) - 2px)); }
.site-header.is-scrolled { box-shadow: 0 6px 18px -14px rgb(var(--shadow-rgb) / .45); }
.site-header .wrap { display: flex; align-items: center; gap: var(--size-5); min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: var(--size-2); text-decoration: none; flex: none; }
.brand svg { width: 34px; height: 34px; }
.brand-name { display: grid; line-height: 1; }
.brand-name b { font-size: 1.35rem; font-weight: var(--font-weight-9); font-stretch: var(--font-display-stretch); letter-spacing: var(--font-letterspacing-2); }
.brand-name span { font-size: var(--type-label); font-weight: var(--font-weight-6); letter-spacing: var(--font-letterspacing-2); text-transform: uppercase; color: var(--text-2); margin-bottom: 3px; }
/* logo con lo skyline (assets/logo/): versione giorno o notte con le stesse condizioni dei token in tokens.css
   (tema di sistema, data-theme, data-tema dell'interruttore: a parità di peso vince l'ultima regola). Piè: sempre notte. */
.brand-logo img { display: block; height: 52px; width: auto; }
.brand-logo .logo-notte { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo .logo-giorno { display: none; }
  :root:not([data-theme="light"]) .brand-logo .logo-notte { display: block; }
}
:root[data-theme="dark"] .brand-logo .logo-giorno { display: none; }
:root[data-theme="dark"] .brand-logo .logo-notte { display: block; }
:root[data-tema="giorno"] .brand-logo .logo-giorno { display: block; }
:root[data-tema="giorno"] .brand-logo .logo-notte { display: none; }
:root[data-tema="notte"] .brand-logo .logo-giorno { display: none; }
:root[data-tema="notte"] .brand-logo .logo-notte { display: block; }
@media (max-width: 640px) { .site-header .brand-logo img { height: 44px; } }
.nav { display: flex; gap: var(--size-1); margin-inline: auto; }
.nav a {
  position: relative;
  display: block;
  padding: var(--size-2) var(--size-3);
  font-size: var(--type-small);
  font-weight: var(--font-weight-6);
  text-decoration: none;
  color: var(--text-2);
}
.nav a:hover { color: var(--text-1); }
.nav a[aria-current="page"] { color: var(--text-1); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--size-3); right: var(--size-3);
  bottom: calc(-1 * (var(--header-h) - 2.25rem) / 2 - 1px); height: 3px; background: var(--brand);
}
.header-status { display: flex; align-items: center; gap: var(--size-2); font-size: var(--type-small); color: var(--text-2); padding-left: var(--size-4); border-left: var(--rule-w) solid var(--rule); flex: none; }
.header-status b { color: var(--text-1); }
.menu-toggle { display: none; }
/* interruttore giorno / notte */
.theme-toggle {
  display: inline-flex; align-items: center; gap: var(--size-2);
  min-height: 36px; padding: 0 var(--size-3);
  background: var(--surface-1); color: var(--text-1);
  border: var(--rule-w) solid var(--rule-strong); border-radius: var(--radius-5);
  font-size: var(--type-small); font-weight: var(--font-weight-6);
  cursor: pointer; flex: none;
}
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.theme-toggle .i-moon { fill: currentColor; stroke: none; }
.theme-toggle[aria-pressed="true"] .i-sun, .theme-toggle[aria-pressed="false"] .i-moon { display: none; }
@media (max-width: 640px) {
  .theme-toggle { margin-left: auto; padding: 0 var(--size-2); }
}


@media (max-width: 1240px) {
  .header-status { display: none; }
}
@media (max-width: 640px) {
  .site-header .wrap { flex-wrap: wrap; gap: 0; padding-block: var(--size-2); }
  .nav { order: 3; width: 100%; margin: var(--size-1) 0 0; overflow-x: auto; scrollbar-width: none; }
  .nav a { padding: var(--size-2) var(--size-3) var(--size-2) 0; white-space: nowrap; }
  .nav a[aria-current="page"]::after { left: 0; right: var(--size-3); bottom: 0; }
}

/* ---------- menu mobile: hamburger + pannello laterale ---------- */
.menu-toggle {
  display: none; position: relative; flex: none;
  width: 44px; height: 44px; padding: 0; margin-left: var(--size-2);
  background: transparent; color: var(--text-1);
  border: 0; border-radius: var(--radius-2); cursor: pointer;
}
.menu-toggle span {
  position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor;
  transition: transform .32s var(--ease-3), opacity .2s, top .32s var(--ease-3);
}
.menu-toggle span:nth-child(1) { top: 14px; }
.menu-toggle span:nth-child(2) { top: 20px; right: 17px; }
.menu-toggle span:nth-child(3) { top: 26px; }
.menu-toggle:hover span:nth-child(2) { right: 11px; }
.menu-toggle:hover { color: var(--text-2); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translateX(8px); }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

.menu-scrim {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--menu-top, var(--header-h));
  z-index: var(--layer-3); background: rgb(var(--scrim-rgb) / .42);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-3);
}
.menu-panel {
  position: fixed; right: 0; bottom: 0; top: var(--menu-top, var(--header-h));
  z-index: var(--layer-3);
  width: min(460px, 100%);
  display: grid; grid-template-rows: 1fr auto; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-1);
  border-left: var(--rule-w) solid var(--rule);
  padding: var(--size-6) max(var(--size-5), env(safe-area-inset-right, 0px)) max(var(--size-5), env(safe-area-inset-bottom, 0px)) var(--size-6);
  transform: translateX(100%); visibility: hidden;
  transition: transform .38s var(--ease-4), visibility 0s linear .38s;
}
.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }
.menu-open .menu-panel { transform: none; visibility: visible; transition: transform .38s var(--ease-4), visibility 0s; }
.menu-open, .menu-open body { overflow: hidden; }
.menu-sections { list-style: none; padding: 0; display: grid; border-top: 2px solid var(--text-1); margin-top: var(--size-3); }
.menu-sections a {
  display: grid; gap: 2px; padding: var(--size-4) 0 var(--size-4) var(--size-4);
  border-bottom: var(--rule-w) solid var(--rule); text-decoration: none; position: relative;
}
.menu-sections a b { font-size: clamp(1.9rem, 7vw, 2.4rem); font-weight: var(--font-display-weight); font-stretch: var(--font-display-stretch); line-height: 1; }
.menu-sections a span { font-size: var(--type-small); color: var(--text-2); }
.menu-sections a::before { content: ""; position: absolute; left: 0; top: var(--size-4); bottom: var(--size-4); width: 4px; background: transparent; }
.menu-sections a[aria-current="page"]::before { background: var(--brand); }
.menu-sections a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.menu-quick { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--size-2); margin-top: var(--size-5); }
.menu-quick a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--size-3); border: var(--rule-w) solid var(--rule-strong); font-size: var(--type-small); font-weight: var(--font-weight-6); text-decoration: none; }
.menu-quick a:hover { background: var(--surface-2); }
.menu-foot { display: grid; gap: var(--size-2); padding-top: var(--size-6); }
.menu-foot .strip { width: 100%; height: auto; }
/* le voci entrano in sequenza */
.menu-panel .stagger { opacity: 0; transform: translateX(18px); transition: opacity .3s, transform .4s var(--ease-4); }
.menu-open .menu-panel .stagger { opacity: 1; transform: none; transition-delay: calc(80ms + var(--i, 0) * 55ms); }

@media (max-width: 960px) {
  .js .nav { display: none; }
  .js .menu-toggle { display: inline-block; }
  .header-status { display: none; }
  .theme-toggle { margin-left: auto; }
}
@media (max-width: 640px) {
  .js .site-header .wrap { flex-wrap: nowrap; padding-block: 0; }
  .theme-toggle span { display: none; }
  /* solo icona, accanto all'hamburger: stessa famiglia, quindi senza bordo né fondo (area di tocco sempre 44px) */
  .theme-toggle { width: 44px; height: 44px; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-2); background: transparent; }
  .theme-toggle:hover { background: transparent; color: var(--text-2); }
  .theme-toggle svg { width: 20px; height: 20px; }
}
@media (min-width: 961px) { .menu-panel, .menu-scrim { display: none; } }

/* ---------- difficoltà: forma + colore ---------- */
.diff {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--type-small); font-weight: var(--font-weight-6); white-space: nowrap;
}
.diff-shape { width: .8em; height: .8em; flex: none; }
.diff[data-d="1"] { --d: var(--diff-1); }
.diff[data-d="2"] { --d: var(--diff-2); }
.diff[data-d="3"] { --d: var(--diff-3); }
.diff[data-d="4"] { --d: var(--diff-4); }
.diff-shape { fill: var(--d); }
.diff.badge {
  padding: .3em .6em .3em .5em;
  background: var(--surface-1);
  border: var(--rule-w) solid var(--rule);
}

/* ---------- stato ---------- */
.status { display: inline-flex; align-items: center; gap: .45em; font-size: var(--type-small); font-weight: var(--font-weight-6); white-space: nowrap; }
.status::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--s); flex: none; }
.status[data-s="aperto"] { --s: var(--status-ok); }
.status[data-s="parziale"] { --s: var(--status-warn); }
.status[data-s="parziale"]::before { border-radius: 0; transform: rotate(45deg); }
.status[data-s="chiuso"] { --s: var(--status-closed); }
.status[data-s="chiuso"]::before { border-radius: 0; height: .2em; width: .7em; }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--size-2);
  min-height: 44px; padding: 0 var(--size-4);
  background: var(--brand); color: var(--brand-ink);
  font-weight: var(--font-weight-7); font-size: var(--type-small);
  border: 0; border-radius: var(--radius-1);
  text-decoration: none; cursor: pointer;
  transition: transform .15s var(--ease-3);
}
.btn:hover { transform: translateY(-1px); }
.btn-quiet {
  background: transparent; color: var(--text-1);
  border: var(--rule-w) solid var(--rule-strong);
}
.linkish { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: var(--type-small); color: var(--text-1); }

/* ---------- banner del consenso alle statistiche (assets/consenso.js) ---------- */
/* fisso in basso: non sposta la pagina. I due pulsanti hanno lo stesso peso: rifiutare è facile come accettare */
.consenso {
  position: fixed; z-index: var(--layer-5);
  inset-inline: var(--size-3); bottom: calc(var(--size-3) + env(safe-area-inset-bottom, 0px));
  max-width: 560px; margin-inline: auto;
  display: grid; gap: var(--size-3); padding: var(--size-4);
  background: var(--surface-1); color: var(--text-1);
  border: var(--rule-w) solid var(--rule-strong);
  box-shadow: 0 10px 30px -12px rgb(var(--shadow-rgb) / .35);
  font-size: var(--type-small); line-height: var(--font-lineheight-3);
}
.consenso-titolo { font-weight: var(--font-weight-7); }
.consenso a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.consenso-azioni { display: flex; flex-wrap: wrap; gap: var(--size-2); }
.consenso-azioni .btn { flex: 1 1 140px; justify-content: center; }
/* «Cookie» nel piè di pagina riapre il banner: senza JavaScript non serve */
html:not(.js) [data-consenso-apri] { display: none; }

/* ---------- hero con mappa ---------- */
.hero { position: relative; background: var(--surface-2); border-bottom: var(--rule-w) solid var(--rule); }
.hero-map { position: relative; height: clamp(520px, 72vh, 780px); overflow: hidden; }
.hero-map canvas { width: 100%; height: 100%; touch-action: none; }
.hero-intro {
  position: absolute; z-index: 2;
  top: var(--size-5); left: max(var(--size-5), env(safe-area-inset-left, 0px));
  width: min(380px, calc(100% - 2 * var(--size-5)));
  display: grid; gap: var(--size-3);
  padding: var(--size-5);
  background: var(--surface-1);
  border: var(--rule-w) solid var(--rule);
}
.hero-intro .display { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
.hero-intro .display span { display: block; color: var(--text-2); }
.hero-intro p { color: var(--text-2); font-size: var(--type-small); line-height: var(--font-lineheight-3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--size-3); align-items: center; }

.map-ui { position: absolute; z-index: 2; display: flex; gap: var(--size-2); }
.map-controls { right: max(var(--size-3), env(safe-area-inset-right, 0px)); top: var(--size-3); flex-direction: column; }
.map-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--surface-1); color: var(--text-1);
  border: var(--rule-w) solid var(--rule-strong);
  cursor: pointer; font-size: 1.2rem; line-height: 1;
}
.map-btn:hover { background: var(--surface-3); }
.map-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.map-hint {
  right: max(var(--size-3), env(safe-area-inset-right, 0px)); bottom: var(--size-3);
  font-size: var(--type-label); color: var(--text-2);
  background: var(--surface-1); padding: var(--size-1) var(--size-2);
  border: var(--rule-w) solid var(--rule);
}
.map-scroll-note {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--surface-ink); color: var(--text-on-ink);
  padding: var(--size-2) var(--size-3); font-size: var(--type-small); font-weight: var(--font-weight-6);
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.map-scroll-note.is-on { opacity: .92; }
.map-compass { right: max(var(--size-3), env(safe-area-inset-right, 0px)); top: 172px; width: 40px; justify-content: center; align-items: center; font-size: var(--type-label); font-weight: var(--font-weight-7); color: var(--text-2); }
.map-compass svg { width: 28px; height: 28px; }

/* etichette proiettate sopra la mappa 3D */
.map-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.map-label {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -100%);
  font-size: var(--type-label); font-weight: var(--font-weight-7); font-stretch: var(--font-label-stretch);
  letter-spacing: var(--font-letterspacing-2); text-transform: uppercase;
  color: var(--text-1); white-space: nowrap;
  text-shadow: 0 0 3px var(--surface-1), 0 0 3px var(--surface-1), 0 0 2px var(--surface-1);
}
.map-label small { display: block; font-size: var(--type-label); font-weight: var(--font-weight-5); letter-spacing: 0; text-transform: none; color: var(--text-2); text-align: center; }
.map-label.is-peak { color: var(--text-2); font-weight: var(--font-weight-6); }
.map-label.is-big { font-size: var(--type-small); }
.map-station {
  position: absolute; left: 0; top: 0; width: 9px; height: 9px;
  transform: translate(-50%, -50%);
  background: var(--surface-1); border: 2px solid var(--text-1);
}
.seg-chip {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 5px 2px 4px;
  font-size: var(--type-label); font-weight: var(--font-weight-8);
  background: var(--surface-1); color: var(--text-1);
  border: 1.5px solid var(--d);
  pointer-events: auto; cursor: pointer;
  transition: opacity .2s, transform .15s;
}
.seg-chip .diff-shape { width: 9px; height: 9px; }
.seg-chip.is-dim { opacity: .25; }
/* i codici dei tratti restano sopra segnaposto e gruppi */
.seg-chip { z-index: 2; }
.seg-chip.is-hot { transform: translate(-50%, -50%) scale(1.15); background: var(--d); color: var(--surface-1); }
.seg-chip.is-hot .diff-shape { fill: var(--surface-1); }
.seg-chip[data-d="1"] { --d: var(--diff-1); }
.seg-chip[data-d="2"] { --d: var(--diff-2); }
.seg-chip[data-d="3"] { --d: var(--diff-3); }
.seg-chip[data-d="4"] { --d: var(--diff-4); }

/* scheda al passaggio del mouse */
.map-card {
  position: absolute; z-index: 3; left: 0; top: 0;
  width: 260px; pointer-events: none;
  background: var(--surface-1);
  border: var(--rule-w) solid var(--rule-strong);
  padding: var(--size-3);
  display: grid; gap: var(--size-2);
  box-shadow: 0 10px 30px -12px rgb(var(--shadow-rgb) / .35);
}
.map-card[hidden] { display: none; }
.map-card h3 { font-size: var(--type-h3); font-weight: var(--font-weight-8); font-stretch: var(--font-label-stretch); line-height: var(--font-lineheight-1); }
.map-card .route { font-size: var(--type-small); color: var(--text-2); }
.map-card .figures { display: flex; gap: var(--size-3); font-size: var(--type-small); }
.map-card .figures b { font-weight: var(--font-weight-8); }
.map-card .meta { display: flex; justify-content: space-between; gap: var(--size-2); align-items: center; }
.map-card .go { font-size: var(--type-small); font-weight: var(--font-weight-7); border-top: var(--rule-w) solid var(--rule); padding-top: var(--size-2); }
.map-card.is-pinned { pointer-events: auto; }

/* barra legenda + numeri sotto la mappa */
.legend-bar { border-top: var(--rule-w) solid var(--rule); background: var(--surface-1); }
.legend-bar .wrap { display: flex; flex-wrap: wrap; gap: var(--size-2) var(--size-5); align-items: center; padding-block: var(--size-3); justify-content: space-between; }
.legend { display: flex; flex-wrap: wrap; gap: var(--size-2) var(--size-4); align-items: center; list-style: none; padding: 0; }
.legend li { display: flex; align-items: center; gap: .4em; font-size: var(--type-small); color: var(--text-2); }
.legend .swatch-line { width: 22px; height: 0; border-top: 3px solid var(--text-1); }
.legend .swatch-line.dash { border-top-style: dashed; }
.legend .swatch-line.river { border-color: var(--river); }
.legend .swatch-station { width: 9px; height: 9px; border: 2px solid var(--text-1); background: var(--surface-1); }
.figures-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: var(--rule-w) solid var(--rule); background: var(--surface-1); }
.figure { padding: var(--size-3) var(--size-4); border-left: var(--rule-w) solid var(--rule); display: grid; gap: 2px; align-content: start; }
.figure:first-child { border-left: 0; }
.figure b { font-size: var(--font-size-4); font-weight: var(--font-display-weight); font-stretch: var(--font-display-stretch); line-height: 1.1; }
.figure span { font-size: var(--type-small); color: var(--text-2); }
@media (max-width: 860px) {
  .figures-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure:nth-child(odd) { border-left: 0; }
  .figure { border-top: var(--rule-w) solid var(--rule); }
  .figure:last-child { grid-column: 1 / -1; }
}

/* fallback 2D della mappa */
.map2d { position: relative; height: 100%; display: grid; grid-template-rows: 1fr auto; }
.map2d-svg { width: 100%; height: 100%; }
.map2d-card { border-top: var(--rule-w) solid var(--rule); background: var(--surface-1); padding: var(--size-3); min-height: 116px; display: grid; gap: var(--size-2); align-content: start; }
.map2d-note { position: absolute; right: var(--size-2); top: var(--size-2); }
.seg2d { cursor: pointer; }
.seg2d .hit { stroke: transparent; stroke-width: 18; fill: none; }
.seg2d .line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.seg2d.is-dim { opacity: .2; }

@media (max-width: 1080px) {
  .hero-intro { position: relative; top: 0; left: 0; width: 100%; border: 0; border-bottom: var(--rule-w) solid var(--rule); padding: var(--size-5) var(--gutter-r) var(--size-5) var(--gutter); }
  .hero-intro .display span { display: inline; }
}
@media (max-width: 719px) {
  .hero-map { height: auto; min-height: 0; }
  /* posto riservato alla pianta 2D finché lo script non la inserisce (altrimenti spinge giù i tratti):
     svg largo 210% (almeno 760 px), alto 563/900 della larghezza, più il riquadro sotto (116 px), come in map2d.js */
  .js .hero-map:not(.is-3d):not(:has(.map2d)) { min-height: calc(max(210vw, 760px) * 563 / 900 + 116px); }
  .hero-map.is-3d { height: 70vh; min-height: 420px; }
  .map-hint { display: none; }
}

/* ---------- elenco tratti ---------- */
.section { padding-block: var(--size-9) var(--size-10); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--size-3) var(--size-7); align-items: end; margin-bottom: var(--size-6); }
.section-head p { max-width: 46ch; color: var(--text-2); font-size: var(--type-small); }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; } }

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--size-3) var(--size-4);
  padding: var(--size-4);
  background: var(--surface-2);
  border: var(--rule-w) solid var(--rule);
}
.filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--size-2); align-content: start; }
.filters legend, .field label { padding: 0; margin-bottom: var(--size-2); font-size: var(--type-label); font-weight: var(--font-weight-7); letter-spacing: var(--font-letterspacing-3); text-transform: uppercase; color: var(--text-2); font-stretch: var(--font-label-stretch); }
.field { display: grid; min-width: 0; align-content: start; }
.select {
  appearance: none; width: 100%; min-height: 40px;
  padding: 0 2rem 0 var(--size-2);
  /* freccia disegnata con due triangoli nel colore del tema (niente SVG con colore fisso) */
  background-color: var(--surface-1);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: var(--rule-w) solid var(--rule-strong); border-radius: 0;
  font-size: var(--type-small);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--size-1); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
/* solo il contenitore esterno: lo span dell'icona di difficoltà, dentro, non prende il riquadro */
.chip > span {
  display: inline-flex; align-items: center; gap: .4em; min-height: 40px;
  padding: 0 var(--size-2);
  background: var(--surface-1); border: var(--rule-w) solid var(--rule-strong);
  font-size: var(--type-small); font-weight: var(--font-weight-6);
}
.chip input:checked + span { background: var(--selected-bg); color: var(--selected-ink); border-color: var(--selected-bg); }
.chip input:checked + span .diff-shape { fill: var(--selected-ink); }
.chip input:focus-visible + span { box-shadow: var(--focus-ring); }
.filters-wide { grid-column: span 2; }
/* pulsante dei filtri: solo sul telefono, dove il pannello resta chiuso finché non lo apri */
.filters-toggle {
  display: none; align-items: center; gap: var(--size-2); width: 100%; min-height: 44px; padding: 0 var(--size-3);
  background: var(--surface-2); color: var(--text-1); border: var(--rule-w) solid var(--rule-strong);
  font-size: var(--type-small); font-weight: var(--font-weight-7); cursor: pointer; text-align: left;
}
.filters-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.filters-toggle::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease-3); }
.filters-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
@media (max-width: 560px) {
  .js .filters-toggle { display: flex; }
  .js .filters { display: none; border-top: 0; }
  .js .filters.is-open { display: grid; }
}
@media (max-width: 560px) { .filters-wide { grid-column: auto; } }

.results-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--size-2) var(--size-4); padding-block: var(--size-4) var(--size-3); font-size: var(--type-small); color: var(--text-2); }
.results-bar b { color: var(--text-1); }
.results-bar .sort { display: flex; align-items: center; gap: var(--size-2); }
.results-bar .sort .select { width: auto; min-height: 36px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--size-4); list-style: none; padding: 0; }
.card {
  position: relative;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--surface-1);
  border: var(--rule-w) solid var(--rule);
  transition: border-color .15s, transform .15s var(--ease-3);
}
.card:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.card-map { position: relative; aspect-ratio: 16 / 7; max-width: 100%; background: var(--surface-2); border-bottom: var(--rule-w) solid var(--rule); overflow: hidden; }
.card-map > svg { width: 100%; height: 100%; }
.card-map .code { position: absolute; left: var(--size-3); top: var(--size-2); }
.card-map .diff { position: absolute; right: var(--size-2); top: var(--size-2); }
.card-body { display: grid; gap: var(--size-2); padding: var(--size-3) var(--size-4) var(--size-4); align-content: start; }
.card h3 { font-size: var(--type-h3); font-weight: var(--font-weight-8); font-stretch: var(--font-label-stretch); line-height: var(--font-lineheight-1); }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card .route { font-size: var(--type-small); color: var(--text-2); min-width: 0; }
.card .row { display: flex; flex-wrap: wrap; gap: var(--size-1) var(--size-4); font-size: var(--type-small); }
.card .row b { font-weight: var(--font-weight-8); }
.card .foot { display: flex; justify-content: space-between; align-items: center; gap: var(--size-2); border-top: var(--rule-w) solid var(--rule); padding-top: var(--size-2); margin-top: var(--size-1); font-size: var(--type-small); color: var(--text-2); min-width: 0; }
.card .foot .acc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .spark { height: 34px; width: 100%; }
/* telefono: scheda compatta, mappa più bassa e niente profilo (il dislivello resta in cifre) */
@media (max-width: 560px) {
  .card-map { aspect-ratio: 16 / 5; }
  .card .spark { display: none; }
  .card-body { padding: var(--size-3); gap: var(--size-1); }
  .card .foot { margin-top: var(--size-2); }
}
.empty { padding: var(--size-8) var(--size-4); text-align: center; border: var(--rule-w) dashed var(--rule-strong); display: grid; gap: var(--size-3); justify-items: center; }

/* ---------- pagina interna ---------- */
.page-head { padding-block: var(--size-7) var(--size-6); display: grid; gap: var(--size-4); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--size-2); font-size: var(--type-small); color: var(--text-2); list-style: none; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--size-2); color: var(--rule-strong); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.title-row { display: flex; flex-wrap: wrap; gap: var(--size-3) var(--size-4); align-items: center; }

.keyfigs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-block: var(--rule-w) solid var(--rule); }
.keyfigs div { padding: var(--size-3) var(--size-4) var(--size-3) 0; display: grid; gap: 2px; }
.keyfigs div + div { padding-left: var(--size-4); border-left: var(--rule-w) solid var(--rule); }
.keyfigs dt { font-size: var(--type-label); text-transform: uppercase; letter-spacing: var(--font-letterspacing-3); font-weight: var(--font-weight-7); color: var(--text-2); font-stretch: var(--font-label-stretch); }
.keyfigs dd { font-size: var(--font-size-5); font-weight: var(--font-display-weight); font-stretch: var(--font-display-stretch); line-height: 1.1; }
.keyfigs dd small { font-size: var(--type-small); font-weight: var(--font-weight-6); font-stretch: 100%; color: var(--text-2); margin-left: 2px; }
@media (max-width: 900px) {
  .keyfigs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .keyfigs div:nth-child(4) { padding-left: 0; border-left: 0; }
  .keyfigs div:nth-child(n+4) { border-top: var(--rule-w) solid var(--rule); }
}
@media (max-width: 480px) {
  .keyfigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keyfigs div { padding-left: var(--size-3) !important; border-left: var(--rule-w) solid var(--rule) !important; }
  .keyfigs div:nth-child(odd) { padding-left: 0 !important; border-left: 0 !important; }
  .keyfigs div:nth-child(n+3) { border-top: var(--rule-w) solid var(--rule); }
}

.layout-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--size-8); padding-block: var(--size-7) var(--size-9); }
@media (max-width: 960px) { .layout-2 { grid-template-columns: minmax(0, 1fr); gap: var(--size-7); } }
.block { display: grid; gap: var(--size-3); align-content: start; }
.block + .block { margin-top: var(--size-7); }
.block-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--size-3); border-bottom: 2px solid var(--text-1); padding-bottom: var(--size-2); }
.block-title h2 { font-size: var(--type-h3); font-weight: var(--font-weight-8); font-stretch: var(--font-label-stretch); text-transform: uppercase; letter-spacing: var(--font-letterspacing-2); }

.profile { width: 100%; height: auto; }
.profile-wrap { overflow-x: auto; }
/* strada e fondo (tratto-view.js roadHTML): fasce lungo il tratto, 2px di fondo tra le fasce, estremi arrotondati */
.road { display: grid; gap: var(--size-4); margin-bottom: var(--size-3); }
.road-row { display: grid; gap: var(--size-2); }
.road-bar { display: flex; gap: 2px; height: 14px; background: var(--surface-1); }
.road-run { min-width: 2px; transition: opacity .15s; }
.road-run:first-child { border-radius: var(--radius-2) 0 0 var(--radius-2); }
.road-run:last-child { border-radius: 0 var(--radius-2) var(--radius-2) 0; }
.road-bar:hover .road-run:not(:hover) { opacity: .45; }
/* non indicato: tratteggio a 45° sul fondo, senza colore di categoria */
.is-ignoto { background: repeating-linear-gradient(45deg, var(--rule-strong) 0 1.5px, var(--surface-2) 1.5px 5px); box-shadow: inset 0 0 0 1px var(--rule); }
.road-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--size-1) var(--size-4); font-size: var(--type-small); }
.road-legend li { display: flex; align-items: baseline; gap: var(--size-2); }
.road-legend small { color: var(--text-3); }
.road-legend b { font-weight: var(--font-weight-7); white-space: nowrap; }
@media (max-width: 640px) {
  .road-legend { flex-direction: column; }
  .road-legend li { display: grid; grid-template-columns: 12px 1fr auto; }
  .road-legend small { display: block; }
}
.road-sw { flex: none; width: 12px; height: 12px; border-radius: var(--radius-1); align-self: center; }
.road-km { display: flex; justify-content: space-between; margin-top: calc(-1 * var(--size-1)); }
.conditions { border: var(--rule-w) solid var(--rule); padding: var(--size-4); display: grid; gap: var(--size-2); background: var(--surface-1); }
/* con deviazione o chiuso tutto il riquadro prende il colore dello stato: è un avviso */
.conditions:is([data-s="parziale"], [data-s="chiuso"]) { background: color-mix(in srgb, var(--s) 10%, var(--surface-1)); border-color: color-mix(in srgb, var(--s) 55%, var(--surface-1)); }
.conditions[data-s="aperto"] { --s: var(--status-ok); }
.conditions[data-s="parziale"] { --s: var(--status-warn); }
.conditions[data-s="chiuso"] { --s: var(--status-closed); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--size-2) var(--size-4); font-size: var(--type-small); }
.kv dt { color: var(--text-2); }
.kv dd { text-align: right; font-weight: var(--font-weight-6); }
.list-ruled { list-style: none; padding: 0; display: grid; }
.list-ruled li { padding-block: var(--size-2); border-bottom: var(--rule-w) solid var(--rule); font-size: var(--type-small); display: flex; justify-content: space-between; gap: var(--size-3); }
.list-ruled li:first-child { border-top: var(--rule-w) solid var(--rule); }
.locator { border: var(--rule-w) solid var(--rule); background: var(--surface-2); }
.locator > svg { width: 100%; height: auto; }
.photo-ph {
  aspect-ratio: 4 / 3; max-width: 100%;
  display: grid; place-items: end start; padding: var(--size-3);
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--rule) 70%, transparent) 9px 10px),
    var(--surface-2);
  border: var(--rule-w) solid var(--rule);
  font-size: var(--type-small); color: var(--text-2);
}
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-4); }
.pager a { display: grid; gap: var(--size-1); padding: var(--size-3) var(--size-4); border: var(--rule-w) solid var(--rule); text-decoration: none; background: var(--surface-1); }
.pager a:hover { border-color: var(--rule-strong); }
.pager .next { text-align: right; }
.pager b { font-weight: var(--font-weight-8); font-stretch: var(--font-label-stretch); }

/* ---------- tabella stato ---------- */
.table-wrap { overflow-x: auto; border-top: 2px solid var(--text-1); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--type-small); min-width: 620px; }
table.data th { text-align: left; font-size: var(--type-label); text-transform: uppercase; letter-spacing: var(--font-letterspacing-3); color: var(--text-2); font-weight: var(--font-weight-7); padding: var(--size-3) var(--size-3) var(--size-2) 0; border-bottom: var(--rule-w) solid var(--rule); }
table.data td { padding: var(--size-3) var(--size-3) var(--size-3) 0; border-bottom: var(--rule-w) solid var(--rule); vertical-align: top; }
table.data td.n { text-align: right; white-space: nowrap; }
table.data a { font-weight: var(--font-weight-7); }

.aside-panel { border: var(--rule-w) solid var(--rule); padding: var(--size-4); display: grid; gap: var(--size-3); background: var(--surface-1); align-content: start; }
.aside-panel .kv dd { font-size: var(--type-small); }

.schema-wrap { overflow-x: auto; border: var(--rule-w) solid var(--rule); background: var(--surface-1); }
.schema { min-width: 980px; width: 100%; height: auto; }

.timeline { list-style: none; padding: 0; display: grid; }
.timeline li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--size-4); padding-block: var(--size-3); border-bottom: var(--rule-w) solid var(--rule); }
.timeline time { font-weight: var(--font-weight-8); font-stretch: var(--font-label-stretch); }
.timeline p { font-size: var(--type-small); color: var(--text-2); }
.timeline p b { color: var(--text-1); }

/* ---------- comuni ---------- */
.town-list { list-style: none; padding: 0; border-top: var(--rule-w) solid var(--rule); }
.town { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 1fr); gap: var(--size-6); padding-block: var(--size-6); border-bottom: var(--rule-w) solid var(--rule); align-items: start; }
.town .locator { aspect-ratio: 300 / 170; }
.town h2 { font-size: var(--type-h2); font-weight: var(--font-display-weight); font-stretch: var(--font-display-stretch); line-height: 1; }
.seglist { list-style: none; padding: 0; display: grid; gap: var(--size-1); font-size: var(--type-small); }
.seglist a { display: flex; gap: var(--size-2); align-items: center; text-decoration: none; }
.seglist a:hover span { text-decoration: underline; }
@media (max-width: 900px) { .town { grid-template-columns: minmax(0, 1fr); gap: var(--size-4); } .town .locator { max-width: 420px; } }

/* ---------- footer ---------- */
.site-footer { background: var(--surface-ink); color: var(--text-on-ink); margin-top: var(--size-9); }
.site-footer .wrap { padding-block: var(--size-7) var(--size-5); display: grid; gap: var(--size-6); }
/* piè: logo verticale piccolo a sinistra, a destra i link in tre gruppi con titolo (sul telefono vanno sotto) */
.site-footer .top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--size-6) var(--size-9); }
.site-footer .foot-logo img { height: 80px; width: auto; }
.foot-nav { flex: 1 1 360px; max-width: 640px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--size-5); font-size: var(--type-small); }
.foot-nav div { display: grid; gap: var(--size-2); align-content: start; }
.foot-h { font-size: var(--type-label); font-weight: var(--font-weight-7); letter-spacing: var(--font-letterspacing-2); text-transform: uppercase; color: color-mix(in srgb, var(--text-on-ink) 60%, transparent); }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
@media (max-width: 480px) { .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-footer .fine { border-top: 1px solid color-mix(in srgb, var(--text-on-ink) 22%, transparent); padding-top: var(--size-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--size-3); font-size: var(--type-label); line-height: var(--font-lineheight-3); color: color-mix(in srgb, var(--text-on-ink) 75%, transparent); }
.site-footer .fine p { max-width: 70ch; }
.site-footer .fine .linkish { color: inherit; font-size: inherit; }
.site-footer + * { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =========================================================================
   Luoghi: dove fermarsi, schede, Approdo Bici
   ========================================================================= */
.cat-ico { flex: none; }
[data-cat="vedere"] { --c: var(--cat-vedere); }
[data-cat="dormire"] { --c: var(--cat-dormire); }
[data-cat="mangiare"] { --c: var(--cat-mangiare); }
[data-cat="servizi"] { --c: var(--cat-servizi); }

/* badge Approdo Bici: il nome è sempre accompagnato da "bike friendly" */
.approdo {
  display: inline-flex; align-items: center; gap: var(--size-2);
  padding: var(--size-1) var(--size-3) var(--size-1) var(--size-2);
  border: var(--rule-w) solid var(--cat-dormire); color: var(--text-1);
  background: color-mix(in srgb, var(--cat-dormire) 8%, var(--surface-1));
  border-radius: var(--radius-2); line-height: 1.15; max-width: 100%;
}
.approdo .approdo-mark { width: 28px; height: 28px; color: var(--cat-dormire); flex: none; }
.approdo b { display: block; font-size: var(--type-small); font-weight: var(--font-weight-8); font-stretch: var(--font-label-stretch); letter-spacing: .02em; }
.approdo small { display: block; font-size: var(--type-label); color: var(--text-2); }
.approdo[data-lvl="completo"] { border-width: 2px; }
.approdo.is-big { padding: var(--size-3) var(--size-4); gap: var(--size-3); }
.approdo.is-big .approdo-mark { width: 52px; height: 52px; }
.approdo.is-big b { font-size: var(--font-size-4); }
.approdo.is-big small { font-size: var(--type-small); }

.tag-esempio {
  display: inline-block; padding: 1px 7px; font-size: var(--type-label); font-weight: var(--font-weight-8);
  letter-spacing: var(--font-letterspacing-3); text-transform: uppercase;
  background: var(--brand); color: var(--brand-ink);
}
.access { display: inline-flex; align-items: center; gap: .4em; font-weight: var(--font-weight-6); }
.access::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--status-ok); }
.access[data-a="esterno"]::before { background: var(--status-warn); border-radius: 0; transform: rotate(45deg); }
.access[data-a="chiuso"]::before { background: var(--status-closed); border-radius: 0; height: .2em; width: .7em; }

.place-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--size-3); }
.place-card {
  position: relative; display: grid; gap: var(--size-2); align-content: start;
  padding: var(--size-3) var(--size-4) var(--size-4);
  background: var(--surface-1); border: var(--rule-w) solid var(--rule);
  transition: border-color .15s, transform .15s var(--ease-3);
}
.place-card:hover, .place-card.is-hot { border-color: var(--rule-strong); transform: translateY(-2px); }
/* la categoria si legge dall'icona piena, lo stesso segno dei segnaposto sulla mappa */
.place-card .place-cat .cat-ico { box-sizing: content-box; padding: 5px; border-radius: 50%; background: var(--c); color: var(--on-cat); }
.place-card h3 { font-size: var(--type-h3); font-weight: var(--font-weight-8); font-stretch: var(--font-label-stretch); line-height: var(--font-lineheight-1); }
.place-card h3 a { text-decoration: none; }
.place-card h3 a::after { content: ""; position: absolute; inset: 0; }
.place-top { display: flex; justify-content: space-between; align-items: center; gap: var(--size-2); }
.place-cat { display: inline-flex; align-items: center; gap: .4em; font-size: var(--type-label); font-weight: var(--font-weight-7); letter-spacing: var(--font-letterspacing-2); text-transform: uppercase; color: var(--c); font-stretch: var(--font-label-stretch); }
.feat { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--size-1); }
.feat li { font-size: var(--type-label); padding: 2px 7px; border: var(--rule-w) solid var(--rule); color: var(--text-2); }

/* schede categoria */
.cat-tabs { display: flex; gap: var(--size-1); overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid var(--text-1); margin-bottom: var(--size-4); }
.cat-tabs button {
  display: inline-flex; align-items: center; gap: var(--size-2); flex: none;
  min-height: 46px; padding: 0 var(--size-4);
  background: transparent; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px;
  font-size: var(--type-small); font-weight: var(--font-weight-7); color: var(--text-2); cursor: pointer;
}
.cat-tabs button .n { font-weight: var(--font-weight-5); color: var(--text-3); }
.cat-tabs button[aria-selected="true"] { color: var(--text-1); border-bottom-color: var(--c, var(--brand)); }
.cat-tabs button:hover { color: var(--text-1); }

.soste-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--size-6); align-items: start; }
.soste-map { position: sticky; top: calc(var(--header-h) + var(--size-3)); border: var(--rule-w) solid var(--rule); background: var(--surface-2); }
/* solo il disegno: la mappa stradale ha i suoi svg (tratti di Leaflet, icone delle finestrelle) */
.soste-map [data-map-svg] > svg { width: 100%; height: auto; display: block; }
/* posto riservato al disegno finché soste.js non lo inserisce (sul telefono spingerebbe giù l'elenco):
   svgMap largo 520 con proporzione 1,3 → 520×400, come in drawMap */
.js .soste-map [data-map-svg]:empty { aspect-ratio: 520 / 400; }
.soste-map .cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--size-1) var(--size-3); padding: var(--size-2) var(--size-3); font-size: var(--type-label); color: var(--text-2); border-top: var(--rule-w) solid var(--rule); background: var(--surface-1); }
.soste-map .cap .linkish { font-size: var(--type-label); font-weight: var(--font-weight-7); }
.soste-map .pin2d.is-cluster { cursor: zoom-in; }
@media (max-width: 1000px) { .soste-layout { grid-template-columns: minmax(0, 1fr); } .soste-map { position: relative; top: 0; order: -1; } }
.pin2d { cursor: pointer; transition: opacity .15s; }
.pin2d.is-dim { opacity: .18; }
.pin2d.is-hot > circle:first-child { stroke: var(--text-1); stroke-width: 2; }
.note-esempi { display: flex; gap: var(--size-3); align-items: flex-start; padding: var(--size-3) var(--size-4); background: color-mix(in srgb, var(--brand) 16%, var(--surface-1)); font-size: var(--type-small); margin-bottom: var(--size-5); }

/* segnaposto sulla mappa 3D */
.map-pin {
  position: absolute; left: 0; top: 0; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--c); color: var(--on-cat); border: 2px solid var(--surface-1);
  pointer-events: auto; cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 6px -2px rgb(var(--shadow-rgb) / .45);
}
.map-pin:focus-visible { box-shadow: var(--focus-ring); }
.map-pin svg { width: 14px; height: 14px; }
.map-pin.is-off { display: none; }
/* più segnaposto nello stesso punto: un bottone con il numero; colore della categoria se è una sola */
.map-cluster {
  position: absolute; left: 0; top: 0; min-width: 32px; height: 32px; padding: 0 var(--size-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  border-radius: var(--radius-5); border: 2px solid var(--surface-1);
  background: var(--c, var(--text-1)); color: var(--surface-1);
  font: inherit; font-size: var(--type-label); font-weight: var(--font-weight-8); line-height: 1;
  box-shadow: 0 2px 6px -2px rgb(var(--shadow-rgb) / .45);
  pointer-events: auto; cursor: zoom-in; visibility: hidden;
}
.map-cluster[data-cat] { color: var(--on-cat); }
.map-cluster:focus-visible { box-shadow: var(--focus-ring); }
.map-layers { left: max(var(--size-3), env(safe-area-inset-left, 0px)); bottom: var(--size-3); flex-wrap: wrap; align-items: center; max-width: calc(100% - 420px); }
.map-layers .label { margin-right: var(--size-1); background: var(--surface-1); padding: 3px 6px; }
.layer-chip { display: inline-flex; align-items: center; gap: .4em; min-height: 32px; padding: 0 var(--size-3) 0 var(--size-2); background: var(--surface-1); border: var(--rule-w) solid var(--rule-strong); border-radius: var(--radius-5); font-size: var(--type-label); font-weight: var(--font-weight-7); cursor: pointer; color: var(--text-2); }
.layer-chip .dot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.layer-chip .dot svg { width: 11px; height: 11px; }
.layer-chip[aria-pressed="true"] { color: var(--text-1); border-color: var(--c); }
.layer-chip[aria-pressed="true"] .dot { background: var(--c); color: var(--on-cat); }
@media (max-width: 1080px) { .map-layers { max-width: calc(100% - 32px); bottom: 56px; } }

/* home: anteprima delle soste */
.cat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--size-3); list-style: none; padding: 0; }
.cat-tiles a { display: grid; gap: var(--size-2); padding: var(--size-4); min-height: 150px; align-content: space-between; background: var(--surface-1); border: var(--rule-w) solid var(--rule); text-decoration: none; transition: transform .15s var(--ease-3), border-color .15s; }
.cat-tiles a:hover { transform: translateY(-2px); border-color: var(--rule-strong); }
.cat-tiles b { font-size: var(--font-size-4); font-weight: var(--font-display-weight); font-stretch: var(--font-display-stretch); line-height: 1.05; }
.cat-tiles .ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--on-cat); }
@media (max-width: 860px) { .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* checklist */
.checklist { list-style: none; padding: 0; display: grid; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--size-2); padding-block: var(--size-2); border-bottom: var(--rule-w) solid var(--rule); font-size: var(--type-small); align-items: start; }
.checklist .ok { color: var(--status-ok); font-weight: var(--font-weight-8); }
.checklist .no { color: var(--text-3); }
.checklist li.is-no { color: var(--text-3); }
.selftest label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--size-2); padding-block: var(--size-2); border-bottom: var(--rule-w) solid var(--rule); font-size: var(--type-small); cursor: pointer; }
.selftest input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cat-dormire); }
.selftest-result { border: 2px solid var(--rule-strong); padding: var(--size-4); display: grid; gap: var(--size-2); background: var(--surface-1); }
.selftest-result[data-r="completo"], .selftest-result[data-r="base"] { border-color: var(--cat-dormire); }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--size-4); counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--text-1); padding-top: var(--size-3); display: grid; gap: var(--size-2); font-size: var(--type-small); color: var(--text-2); }
.steps li::before { content: counter(s); font-size: var(--font-size-6); font-weight: var(--font-display-weight); font-stretch: var(--font-display-stretch); color: var(--text-1); line-height: 1; }
.steps b { color: var(--text-1); font-size: var(--type-body); }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- modulo di contatto (attivita.html#aderisci) ---------- */
.sponsor-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-2) var(--size-4); margin-top: var(--size-4); }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-4) var(--size-5); max-width: 860px; margin-top: var(--size-4); }
.contact-form .cf-wide { grid-column: 1 / -1; }
.contact-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-form legend { padding: 0; margin-bottom: var(--size-2); font-size: var(--type-label); font-weight: var(--font-weight-7); letter-spacing: var(--font-letterspacing-3); text-transform: uppercase; color: var(--text-2); font-stretch: var(--font-label-stretch); }
.input {
  width: 100%; min-height: 44px; padding: var(--size-2);
  background-color: var(--surface-1); color: var(--text-1);
  border: var(--rule-w) solid var(--rule-strong); border-radius: 0;
  font: inherit; font-size: var(--type-body);
}
.select.input { padding-right: 2rem; }
textarea.input { resize: vertical; min-height: 7rem; line-height: var(--font-lineheight-3); }
.input::placeholder { color: var(--text-3); }
.cf-checklist { padding: var(--size-3); background: var(--surface-2); }
.cf-privacy { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--size-2); font-size: var(--type-small); cursor: pointer; }
.cf-privacy input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--text-1); }
.cf-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-2) var(--size-4); }
.cf-send .btn:disabled { opacity: .6; cursor: progress; transform: none; }
/* campo trappola per i programmi automatici: fuori schermo, non solo nascosto (alcuni saltano i campi hidden) */
.cf-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border: 2px solid var(--rule-strong); padding: var(--size-3) var(--size-4); display: grid; gap: var(--size-1); background: var(--surface-1); }
.form-status[data-s="ok"] { border-color: var(--status-ok); }
.form-status[data-s="errore"] { border-color: var(--status-closed); }
@media (max-width: 640px) { .contact-form { grid-template-columns: minmax(0, 1fr); } }
.privacy h2 { margin-top: var(--size-4); }
.input[type="file"] { padding: var(--size-2); font-size: var(--type-small); cursor: pointer; }
.field .small.muted { margin-top: var(--size-1); }

/* ---------- invito a segnalare un percorso (home, La ciclovia) ---------- */
.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--size-3) var(--size-6);
  margin-top: var(--size-7); padding: var(--size-5);
  background: var(--surface-2); border: var(--rule-w) solid var(--rule);
}
.cta-band > div { display: grid; gap: var(--size-2); max-width: 62ch; }
.cta-band .small { color: var(--text-2); }

.menu-box { border: var(--rule-w) solid var(--rule); padding: var(--size-4); display: grid; gap: var(--size-2); background: var(--surface-1); }
.cat-tiles.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat-tiles.is-three li > div { display: grid; gap: var(--size-2); padding: var(--size-4); background: var(--surface-1); border: var(--rule-w) solid var(--rule); height: 100%; align-content: start; }
.cat-tiles.is-three ul { list-style: none; padding: 0; display: grid; gap: 4px; font-size: var(--type-small); color: var(--text-2); }
.cat-tiles.is-three ul li::before { content: "· "; color: var(--c); font-weight: 800; }
@media (max-width: 860px) { .cat-tiles.is-three { grid-template-columns: minmax(0, 1fr); } }
.filters-full { grid-column: 1 / -1; }
.list-ruled li[data-cat] a, .list-ruled li a[data-cat] { text-decoration: none; }
.list-ruled li[data-cat] a:hover b, .list-ruled li a[data-cat]:hover span { text-decoration: underline; }

/* ---------- sponsor e patrocini (home) ---------- */
.partners { background: var(--surface-2); border-block: var(--rule-w) solid var(--rule); }
.partners .wrap { padding-block: var(--size-9); }
.sponsor-tiers { display: grid; gap: var(--size-6); }
.sponsor-tier { display: grid; gap: var(--size-3); }
.sponsor-tier .label { border-bottom: 2px solid var(--text-1); padding-bottom: var(--size-2); }
.logo-grid { list-style: none; padding: 0; display: grid; gap: var(--size-3); }
.sponsor-tier[data-tier="principale"] .logo-grid { grid-template-columns: minmax(0, 1fr); }
.sponsor-tier[data-tier="sponsor"] .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sponsor-tier[data-tier="sostenitori"] .logo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.logo-slot {
  display: grid; place-items: center; align-content: center; gap: var(--size-2);
  aspect-ratio: 3 / 2; max-width: 100%; padding: var(--size-3);
  background: var(--surface-1); border: var(--rule-w) solid var(--rule);
  color: var(--text-3); font-size: var(--type-label); font-weight: var(--font-weight-6);
  letter-spacing: var(--font-letterspacing-2); text-transform: uppercase; text-align: center;
}
.logo-slot .slot-mark svg { width: 40px; height: 40px; }
.sponsor-tier[data-tier="principale"] .logo-slot { aspect-ratio: auto; min-height: 150px; }
.sponsor-tier[data-tier="principale"] .slot-mark svg { width: 56px; height: 56px; }
.sponsor-tier[data-tier="sostenitori"] .logo-slot .slot-mark svg { width: 30px; height: 30px; }
.logo-slot.is-filled img { max-height: 64px; width: auto; filter: grayscale(1); opacity: .85; transition: filter .2s, opacity .2s; }
.logo-slot.is-filled a:hover img { filter: none; opacity: 1; }
.patrocini .wrap { padding-block: var(--size-7) var(--size-8); display: grid; gap: var(--size-4); }
.patrocini-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--size-2) var(--size-5); border-bottom: var(--rule-w) solid var(--rule); padding-bottom: var(--size-3); }
.logo-row { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--size-3); }
.logo-row .logo-slot { aspect-ratio: 1 / 1; background: transparent; border-style: dashed; border-color: var(--rule-strong); }
@media (max-width: 860px) {
  .sponsor-tier[data-tier="sponsor"] .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sponsor-tier[data-tier="sostenitori"] .logo-grid, .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
main:has(.patrocini) + .site-footer { margin-top: 0; }
/* telefono: degli spazi vuoti si vede il primo, poi «e altri N spazi liberi» */
.logo-more { display: none; }
@media (max-width: 560px) {
  .logo-slot.is-extra { display: none; }
  .logo-more { display: flex; align-items: center; padding: var(--size-2) var(--size-3); font-size: var(--type-small); color: var(--text-2); }
  .partners .sponsor-tier[data-tier] .logo-grid, .patrocini .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partners .sponsor-tier[data-tier] .logo-slot, .patrocini .logo-row .logo-slot { aspect-ratio: 3 / 2; }
  .partners .sponsor-tier[data-tier="principale"] .logo-grid { grid-template-columns: minmax(0, 1fr); }
  .partners .sponsor-tier[data-tier="principale"] .logo-slot { aspect-ratio: 5 / 2; min-height: 0; }
  .partners .wrap { padding-block: var(--size-7); }
}
.sponsor-tier[data-tier="sponsor"] .logo-slot { aspect-ratio: 5 / 2; }
.sponsor-tier[data-tier="sostenitori"] .logo-slot { aspect-ratio: 2 / 1; }
.logo-row .logo-slot { aspect-ratio: 3 / 2; }
@media (max-width: 860px) { .sponsor-tier[data-tier="sponsor"] .logo-slot { aspect-ratio: 2 / 1; } .sponsor-tier[data-tier="sostenitori"] .logo-slot, .logo-row .logo-slot { aspect-ratio: 1 / 1; } }

/* =========================================================================
   Pagina mappa (Leaflet): elenco a sinistra, mappa a destra
   ========================================================================= */
.mapapp { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); height: calc(100dvh - var(--header-h)); min-height: 520px; border-bottom: var(--rule-w) solid var(--rule); }
.mapapp-side { display: grid; grid-template-rows: auto minmax(0, 1fr); border-right: var(--rule-w) solid var(--rule); background: var(--surface-1); min-height: 0; }
.mapapp-head { display: grid; gap: var(--size-2); padding: var(--size-5) var(--size-5) var(--size-4); border-bottom: var(--rule-w) solid var(--rule); }
.mapapp-head .h2 { font-size: var(--font-size-6); }
.mapapp-layers { display: flex; flex-wrap: wrap; gap: var(--size-2); margin-top: var(--size-2); }
.layer-pill {
  display: inline-flex; align-items: center; gap: .45em; min-height: 34px; padding: 0 var(--size-3);
  border-radius: var(--radius-5); border: var(--rule-w) solid var(--rule-strong);
  background: var(--surface-1); color: var(--text-2);
  font-size: var(--type-small); font-weight: var(--font-weight-7); cursor: pointer;
}
.layer-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--text-2)); }
.layer-pill .sq { width: 9px; height: 9px; border: 2px solid currentColor; background: var(--surface-1); }
.layer-pill .ln { width: 14px; height: 3px; background: var(--diff-1); box-shadow: 0 0 0 1px var(--surface-1); }
.layer-pill[aria-pressed="true"] { background: var(--selected-bg); color: var(--selected-ink); border-color: var(--selected-bg); }
.layer-pill[aria-pressed="true"] .sq { background: var(--selected-bg); }
.mapapp-list { overflow-y: auto; overscroll-behavior: contain; padding: var(--size-2) var(--size-3) var(--size-5); }
.mapapp-sec { padding: var(--size-4) var(--size-2) var(--size-2); }
.mapapp-note { padding: var(--size-4) var(--size-2) 0; }
.tappe { list-style: none; padding: 0; display: grid; gap: 2px; }
.tappa {
  width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--size-3); align-items: center;
  padding: var(--size-3) var(--size-2); background: transparent; border: 0; border-radius: var(--radius-2);
  text-align: left; cursor: pointer; color: var(--text-1);
}
.tappa:hover, .tappa.is-hot { background: var(--surface-2); }
.tappa[aria-current="true"] { background: var(--surface-2); box-shadow: inset 4px 0 0 var(--brand); }
.tappa[aria-current="true"]:focus-visible { box-shadow: inset 4px 0 0 var(--brand), var(--focus-ring); }
.tappa-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--rule-strong); font-size: var(--type-small); font-weight: var(--font-weight-8); color: var(--text-2); }
.tappa[aria-current="true"] .tappa-n { background: var(--selected-bg); color: var(--selected-ink); border-color: var(--selected-bg); }
.tappa-t { display: grid; gap: 2px; min-width: 0; }
.tappa-t b { font-weight: var(--font-weight-7); font-size: var(--type-small); line-height: 1.3; }
.tappa-t span { font-size: var(--type-label); color: var(--text-2); }
.tappa-d .diff-shape { width: 11px; height: 11px; }
.tappa[data-d="1"] { --d: var(--diff-1); } .tappa[data-d="2"] { --d: var(--diff-2); } .tappa[data-d="3"] { --d: var(--diff-3); } .tappa[data-d="4"] { --d: var(--diff-4); }
.mapapp-map { position: relative; min-height: 0; background: var(--surface-2); }
#leaflet { position: absolute; inset: 0; background: var(--surface-2); font-family: var(--font-sans); }
main.mapapp + .site-footer { margin-top: 0; }

/* Leaflet con i colori del sito */
/* svg { max-width: 100% } in cima azzera gli svg dei livelli creati con createPane (larghi 0): leaflet.css lo toglie
   solo nell'overlay-pane, qui per tutti i livelli (es. «tratti-clic» della pagina mappa) */
.leaflet-container .leaflet-pane > svg { max-width: none; max-height: none; }
/* anello del fuoco sulla mappa solo da tastiera: dopo un clic o un tocco mappa-base.js mette data-puntatore */
.leaflet-container[data-puntatore]:focus-visible { box-shadow: none; }
:is(#leaflet, .locator-lf) .leaflet-control-zoom a { background: var(--surface-1); color: var(--text-1); border-color: var(--rule); width: 36px; height: 36px; line-height: 34px; }
:is(#leaflet, .locator-lf) .leaflet-control-zoom a:hover { background: var(--surface-2); }
:is(#leaflet, .locator-lf) .leaflet-bar { border: var(--rule-w) solid var(--rule-strong); border-radius: 0; box-shadow: none; }
:is(#leaflet, .locator-lf) .leaflet-control-attribution { background: color-mix(in srgb, var(--surface-1) 85%, transparent); color: var(--text-2); font-size: 10px; }
:is(#leaflet, .locator-lf) .leaflet-control-attribution a { color: var(--text-1); }
:is(#leaflet, .locator-lf) .leaflet-popup-content-wrapper { background: var(--surface-1); color: var(--text-1); border-radius: 0; border: var(--rule-w) solid var(--rule-strong); box-shadow: 0 10px 30px -12px rgb(var(--shadow-rgb) / .35); }
:is(#leaflet, .locator-lf) .leaflet-popup-content { margin: 14px 16px; font-size: var(--type-small); line-height: 1.45; display: grid; gap: 6px; }
:is(#leaflet, .locator-lf) .leaflet-popup-content p { margin: 0; }
:is(#leaflet, .locator-lf) .leaflet-popup-content .h3 { font-size: var(--type-h3); font-weight: var(--font-weight-8); font-stretch: var(--font-label-stretch); }
:is(#leaflet, .locator-lf) .leaflet-popup-tip { background: var(--surface-1); }
:is(#leaflet, .locator-lf) .leaflet-popup-close-button { color: var(--text-2); }
.lf-pin { background: none; border: 0; }
.lf-pin .map-pin { position: static; transform: none; }
/* pagina Soste: la scheda sotto il puntatore accende il suo segnaposto, gli altri si attenuano */
.lf-pin { transition: opacity .15s; }
.lf-pin.is-dim { opacity: .25; }
.lf-pin.is-hot .map-pin { box-shadow: 0 0 0 3px var(--text-1); }
.lf-pin.is-focus .map-pin { width: 36px; height: 36px; border-width: 3px; cursor: default; box-shadow: 0 0 0 3px var(--c), 0 4px 10px -2px rgb(var(--shadow-rgb) / .5); }
.lf-pin.is-focus .map-pin svg { width: 18px; height: 18px; }
/* scheda luogo: mappa stradale ravvicinata al posto del rilievo (luogo.js) */
.locator.is-street { background: var(--surface-2); }
.locator-lf { aspect-ratio: 4 / 3; width: 100%; background: var(--surface-2); font-family: var(--font-sans); isolation: isolate; z-index: 0; }
.lf-cluster { background: none; border: 0; display: grid; place-items: center; }
.lf-cluster .map-cluster { position: static; visibility: visible; cursor: zoom-in; }
.lf-cluster:focus-visible { box-shadow: none; }
.lf-cluster:focus-visible .map-cluster { box-shadow: var(--focus-ring); }

/* su touchscreen i comandi della mappa arrivano a 44 px */
@media (pointer: coarse) {
  .layer-pill { min-height: 44px; }
  .leaflet-control.lf-geo { min-height: 44px; }
  :is(#leaflet, .locator-lf) .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 42px; }
  .map-btn { width: 44px; height: 44px; }
  .layer-chip { min-height: 44px; }
}
.lf-station span { display: block; width: 12px; height: 12px; background: var(--surface-1); border: 2.5px solid var(--text-1); }
.lf-town span { position: absolute; transform: translate(-50%, -140%); white-space: nowrap; font-size: 11px; font-weight: var(--font-weight-8); letter-spacing: .06em; text-transform: uppercase; color: var(--text-1); text-shadow: 0 0 3px var(--surface-1), 0 0 3px var(--surface-1), 0 0 2px var(--surface-1); pointer-events: none; }

.mapapp-ctl { display: grid; gap: var(--size-1); margin-top: var(--size-2); }
.mapapp-ctl .mapapp-layers { margin-top: 0; }
.layer-pill[aria-busy="true"] { cursor: progress; animation: pill-wait 1s var(--ease-3) infinite alternate; }
@keyframes pill-wait { to { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .layer-pill[aria-busy="true"] { animation: none; } }

/* dove sono: pulsante, punto e scheda */
.lf-geo {
  display: inline-flex; align-items: center; gap: .45em; min-height: 38px; padding: 0 var(--size-3);
  background: var(--surface-1); color: var(--text-1); border: var(--rule-w) solid var(--rule-strong);
  font-size: var(--type-small); font-weight: var(--font-weight-7); cursor: pointer;
}
.lf-geo:hover { background: var(--surface-2); }
.lf-geo[aria-pressed="true"] { color: var(--geo); border-color: var(--geo); box-shadow: inset 0 0 0 1px var(--geo); }
.lf-geo[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--geo), var(--focus-ring); }
.lf-geo-dot { background: none; border: 0; }
.lf-geo-dot span {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--geo); border: 3px solid var(--surface-1);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--geo) 55%, transparent);
  animation: geo-pulse 2s var(--ease-out-3) infinite;
}
@keyframes geo-pulse { to { box-shadow: 0 0 0 16px color-mix(in srgb, var(--geo) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .lf-geo-dot span { animation: none; } }
.geo-card {
  position: absolute; z-index: 1; left: var(--size-3); bottom: var(--size-6);
  width: min(360px, calc(100% - 2 * var(--size-3)));
  display: grid; gap: var(--size-1); padding: var(--size-3) var(--size-8) var(--size-3) var(--size-4);
  background: var(--surface-1); color: var(--text-1);
  border: var(--rule-w) solid var(--rule-strong);
  box-shadow: 0 10px 30px -12px rgb(var(--shadow-rgb) / .35);
}
.geo-card:empty { display: none; }
/* il tipo di scheda si legge dal pallino accanto all'etichetta: blu posizione, giallo avviso */
.geo-card > p.label:first-of-type::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .5em; border-radius: 50%; background: var(--geo); vertical-align: .1em; }
.geo-card[data-kind="avviso"] > p.label:first-of-type::before { background: var(--status-warn); }
.geo-card p { margin: 0; }
.geo-card-t { font-weight: var(--font-weight-8); font-stretch: var(--font-label-stretch); font-size: var(--type-body); line-height: 1.3; }
.geo-card .geo-card-row { display: flex; flex-wrap: wrap; gap: var(--size-2) var(--size-3); align-items: center; margin-top: var(--size-1); }
.geo-card .linkish { justify-self: start; }
.geo-card-x { position: absolute; top: var(--size-1); right: var(--size-1); width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--text-2); cursor: pointer; }
.geo-card-x:hover { color: var(--text-1); }

@media (max-width: 900px) {
  .mapapp { grid-template-columns: minmax(0, 1fr); grid-template-rows: 58vh auto; height: auto; }
  .mapapp-side { border-right: 0; order: 2; grid-template-rows: auto auto; }
  .mapapp-map { order: 1; min-height: 360px; }
  .mapapp-list { overflow: visible; }
}

@media (min-width: 961px) and (max-width: 1180px) { .nav a { padding-inline: var(--size-2); } .site-header .wrap { gap: var(--size-3); } }

/* la mappa Leaflet tiene i suoi livelli (400–1000) al proprio interno:
   così menu, testata e pannelli del sito restano sempre sopra */
.mapapp-map, #leaflet { isolation: isolate; z-index: 0; }

/* riquadri di categoria: stessa altezza nella riga, conteggio allineato in fondo */
.cat-tiles > li { display: flex; }
.cat-tiles > li > a { flex: 1; grid-template-rows: auto 1fr auto; align-content: stretch; }
.cat-tiles.is-three > li > div { flex: 1; }

/* ---------- galleria della scheda luogo ---------- */
.gallery { display: grid; gap: var(--size-2); margin-bottom: var(--size-5); }
.g-grid { display: grid; gap: var(--size-2); grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 21 / 8; max-width: 100%; }
.g-grid.g-n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.g-grid.g-n2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.g-grid.g-n3 { grid-template-columns: 2fr 1fr; }
.g-grid.g-n4 .g-item:nth-child(4) { grid-column: span 2; }
.g-item { position: relative; overflow: hidden; padding: 0; border: 0; background: var(--surface-2); cursor: zoom-in; min-height: 0; color: var(--text-1); }
.g-item.is-main { grid-row: 1 / -1; }
.g-item img, .g-item .ph-svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease-3); }
.g-item:hover img, .g-item:hover .ph-svg { transform: scale(1.03); }
.g-cap { position: absolute; left: var(--size-2); bottom: var(--size-2); right: var(--size-2); width: fit-content; max-width: calc(100% - var(--size-4)); padding: 3px 8px; background: color-mix(in srgb, var(--surface-1) 90%, transparent); font-size: var(--type-label); font-weight: var(--font-weight-7); text-align: left; }
.g-count { position: absolute; top: var(--size-2); right: var(--size-2); display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--surface-ink); color: var(--text-on-ink); font-size: var(--type-label); font-weight: var(--font-weight-7); }
.g-note { max-width: 80ch; }
@media (max-width: 700px) {
  .g-grid, .g-grid.g-n3, .g-grid.g-n2 { grid-template-columns: repeat(var(--n, 5), 78%); grid-template-rows: none; grid-auto-flow: column; aspect-ratio: auto; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .g-item { aspect-ratio: 3 / 2; scroll-snap-align: start; grid-row: auto !important; grid-column: auto !important; }
}

.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(var(--scrim-rgb) / .94); color: var(--text-on-ink); }
.lightbox::backdrop { background: rgb(var(--scrim-rgb) / .6); }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lb-stage { display: grid; place-items: center; padding: max(var(--size-8), env(safe-area-inset-top, 0px)) max(var(--size-9), env(safe-area-inset-right, 0px)) var(--size-3) max(var(--size-9), env(safe-area-inset-left, 0px)); min-height: 0; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-ph { position: relative; width: min(100%, 1100px); aspect-ratio: 3 / 2; max-height: 100%; display: grid; place-items: center; }
.lb-ph .ph-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb-ph > span { position: relative; display: grid; justify-items: center; gap: 6px; padding: var(--size-4) var(--size-5); background: var(--surface-1); color: var(--text-1); }
.lb-ph b { font-size: var(--font-size-4); font-weight: var(--font-display-weight); font-stretch: var(--font-display-stretch); }
.lb-ph small { color: var(--text-2); }
.lb-ph .cat-ico { color: var(--c); }
.lb-cap { padding: var(--size-3) var(--size-5) max(var(--size-4), env(safe-area-inset-bottom, 0px)); text-align: center; font-size: var(--type-small); }
.lb-cap span { opacity: .75; margin-left: 6px; }
.lb-btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--text-on-ink) 35%, transparent); border-radius: 50%; background: rgb(var(--scrim-rgb) / .35); color: var(--text-on-ink); cursor: pointer; }
.lb-btn:hover { background: color-mix(in srgb, var(--text-on-ink) 15%, transparent); }
.lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: max(var(--size-3), env(safe-area-inset-top, 0px)); right: max(var(--size-3), env(safe-area-inset-right, 0px)); }
.lb-prev { left: max(var(--size-3), env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.lb-next { right: max(var(--size-3), env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
.lb-open, .lb-open body { overflow: hidden; }
@media (max-width: 700px) { .lb-stage { padding-inline: var(--size-3); } .lb-prev, .lb-next { top: auto; bottom: max(var(--size-3), env(safe-area-inset-bottom, 0px)); transform: none; } }
.keyfigs.keyfigs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .keyfigs.keyfigs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keyfigs.keyfigs-4 div { padding-left: var(--size-3) !important; border-left: var(--rule-w) solid var(--rule) !important; border-top: 0; }
  .keyfigs.keyfigs-4 div:nth-child(odd) { padding-left: 0 !important; border-left: 0 !important; }
  .keyfigs.keyfigs-4 div:nth-child(n+3) { border-top: var(--rule-w) solid var(--rule); }
}