/* Atlante delle specie — stessa carta topografica del sito, solo token di tema.css.
   Il colore resta semantico (verde = aperto/accento, acqua = pioggia, ambra = attesa,
   ruggine = limite): ogni gruppo si riconosce dal GLIFO e dal nome, mai dal colore. */

.atlante-intro { margin-bottom: 26px; }
.sp-invito-riscontro { border-color: var(--bosco); background: var(--bosco-velo); }
.sp-invito-riscontro h2 { margin: 0 0 8px; }
.sp-invito-riscontro p { margin: 0 0 14px; }
.sp-invito-riscontro .btn { max-width: 100%; white-space: normal; text-align: center; }
.atlante-griglia { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .atlante-griglia { grid-template-columns: 1fr 1fr; } }

.tavola-card {
  display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
}
.tavola-card:hover, .tavola-card:focus-visible { border-color: var(--bosco); }
.tavola-card .glifo { width: 76px; height: 76px; color: var(--bosco); }
.tavola-card h2 { margin: 2px 0 2px; font-size: 22px; }
.tavola-card .sp-sotto { font-family: var(--tipo-prosa), serif; color: var(--ink-soft); font-size: 15px; }
.tavola-card .taxon { font-style: italic; color: var(--ink-soft); font-size: 14px; margin: 4px 0 10px; }
.num-tavola { font-family: var(--tipo-dato), monospace; font-size: 12px; letter-spacing: .08em; color: var(--ink-faint); }

.stato-badge {
  display: inline-block; font-family: var(--tipo-dato), monospace; font-size: 12.5px; letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--ink-soft); background: var(--bg);
}
.stato-badge.sperimentale { border-color: var(--ambra); color: var(--ambra); background: var(--ambra-velo); }
.stato-badge.validato { border-color: var(--bosco); color: var(--bosco); background: var(--bosco-velo); }

/* nastro dei dodici mesi: osservazioni pubbliche italiane (istogramma) */
.nastro { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; align-items: end; margin: 10px 0 4px; }
.nastro .sp-barra { background: var(--bosco); border-radius: 3px 3px 0 0; min-height: 2px; }
.nastro.piccolo { height: 34px; }
.nastro.grande { height: 90px; }
.nastro-mesi { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; font-family: var(--tipo-dato), monospace; font-size: 11.5px; color: var(--ink-faint); text-align: center; }
.nastro-legenda { font-size: 13.5px; color: var(--ink-soft); margin: 6px 0 0; }
.strato-nastro { border-top: 1px solid var(--line-soft); padding: 12px 0; }
.strato-nastro h3 { margin: 0 0 4px; font-size: 15px; }
.nastro-vuoto { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 30px; }
.nastro-vuoto span { border: 1px dashed var(--line); border-radius: 4px; background: repeating-linear-gradient(45deg, transparent 0 4px, var(--line-soft) 4px 5px); }

/* testata della tavola */
.tavola-testa { display: grid; grid-template-columns: 1fr 110px; gap: 16px; align-items: center; margin-bottom: 14px; }
.tavola-testa .glifo { width: 110px; height: 110px; color: var(--bosco); justify-self: end; }
.tavola-testa h1 { margin-bottom: 2px; }
.tavola-testa .sp-sotto { font-family: var(--tipo-prosa), serif; font-size: 20px; color: var(--ink-soft); }
@media (max-width: 460px) { .tavola-testa { grid-template-columns: 1fr 76px; } .tavola-testa .glifo { width: 76px; height: 76px; } }

.riquadro { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); margin: 14px 0; }
.riquadro.sp-avviso { border-color: var(--ambra); background: var(--ambra-velo); box-shadow: none; }
.riquadro.sicurezza { border-color: var(--ruggine); background: var(--ruggine-velo); box-shadow: none; }

/* risultato della valutazione */
.indice-riga { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.indice-numero { font-family: var(--tipo-display), sans-serif; font-weight: 700; font-size: 52px; letter-spacing: -.03em; line-height: 1; }
.indice-fascia { font-family: var(--tipo-dato), monospace; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); }
.indice-fascia.alto { color: var(--bosco); border-color: var(--bosco); background: var(--bosco-velo); }
.indice-fascia.medio { color: var(--ambra); border-color: var(--ambra); background: var(--ambra-velo); }
.indice-fascia.basso, .indice-fascia.fuori_stagione, .indice-fascia.fuori_quota, .indice-fascia.dati_insufficienti { color: var(--ink-soft); }
.giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 6px; list-style: none; padding: 0; }
.sp-lettori { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.giorno { text-align: center; font-family: var(--tipo-dato), monospace; font-size: 12px; color: var(--ink-soft); }
.giorno .sp-colonna { height: 64px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.giorno .sp-colonna span { width: 70%; background: var(--bosco); border-radius: 3px 3px 0 0; min-height: 2px; }
.giorno.previsione .sp-colonna span { background: repeating-linear-gradient(135deg, var(--bosco) 0 3px, transparent 3px 6px); border: 1px solid var(--bosco); border-bottom: 0; }
.giorno .val { color: var(--ink); font-size: 13px; }
.fattori { list-style: none; padding: 0; margin: 10px 0 0; }
.fattori li { padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.nota-dati { font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; }

.scelta-zona { display: grid; gap: 10px; }
.scelta-zona select, .scelta-zona button { min-height: 44px; font-size: 16px; }
#mappa-specie { height: 280px; border-radius: var(--r); border: 1px solid var(--line); margin-top: 10px; }

.prove { list-style: none; padding: 0; margin: 0; }
.prove li { display: grid; gap: 3px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.prove .tipo { font-family: var(--tipo-dato), monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.prove a { word-break: break-word; }
.numeri-validazione { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-min); overflow: hidden; margin: 12px 0; }
.numeri-validazione > div { background: var(--bg); padding: 12px; }
.numeri-validazione .v { font-family: var(--tipo-display), sans-serif; font-weight: 700; font-size: 24px; }
.numeri-validazione .k { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }

/* domanda facoltativa dopo il riscontro porcini */
.altre-specie { margin-top: 18px; text-align: left; }
.altre-specie fieldset { border: 1px solid var(--line); border-radius: var(--r-min); padding: 10px 12px; margin: 0 0 10px; }
.altre-specie legend { font-weight: 600; padding: 0 4px; }
.altre-specie .opzioni { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 560px) { .altre-specie .opzioni { grid-template-columns: 1fr 1fr; } }
.altre-specie input { accent-color: var(--bosco); }
.altre-specie label { display: flex; gap: 8px; align-items: center; min-height: 40px; font-size: 15px; }
.altre-specie .sp-azioni { display: flex; gap: 10px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { .tavola-card { transition: none; } }

/* v1.2: modulo delle uscite, contesto della zona */
.sp-campi { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 8px 0 10px; }
@media (min-width: 560px) { .sp-campi { grid-template-columns: 1fr 1fr; } }
.sp-campi label, .sp-note { display: grid; gap: 4px; font-size: 14.5px; color: var(--ink-soft); }
.sp-campi input, .sp-campi select, .sp-note input { min-height: 44px; font-size: 16px; }
.sp-note { margin-top: 6px; }
.altre-specie .sp-campi label { display: grid; min-height: 0; }
#u-mappa { height: 280px; border-radius: var(--r); border: 1px solid var(--line); margin-top: 10px; }
.sp-contesto { border-top: 1px solid var(--line-soft); margin-top: 12px; padding-top: 10px; }
.sp-contesto summary { cursor: pointer; min-height: 32px; }
#costo p { margin: 0 0 8px; }
.sp-campi > label { min-width: 0; }
.sp-campi input, .sp-campi select, .sp-note input { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }
.altre-specie .sp-note { display: grid; align-items: stretch; min-height: 0; }