/* MicroBeTech: area clienti (report, viste, stati) e pagina di accesso, nel linguaggio dello strumento
   di laboratorio: pannelli scuri, celle con filetti, etichette in monospazio. Solo token di style.css. */

/* Barra degli strumenti di prova: nel sito vero non c'è, ogni account vede solo la propria vista. */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: var(--bar-h, var(--nav-h)); padding: 14px var(--edge); font-size: var(--t-small); }
/* Con l'accesso fatto la barra di prova non c'è (area.js): il report parte sotto la barra in alto. */
.tools[hidden] { display: none; }
.tools[hidden] + .area__main { margin-top: var(--bar-h, var(--nav-h)); }
.tools__text { flex: 1 1 300px; color: var(--fg-2); }
html:has(.topbar) { scroll-padding-top: calc(var(--bar-h, var(--nav-h)) + 16px); }
.seg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.seg[hidden] { display: none; }
.seg__label { font-size: var(--t-label); font-weight: 500; color: var(--fg-2); }
/* Le celle si toccano: il margine negativo fa coincidere i bordi anche quando vanno a capo. */
.seg__cells { display: flex; flex-wrap: wrap; padding: 1px 0 0 1px; }
.seg button { min-height: 44px; margin: -1px 0 0 -1px; padding: 0 14px; border: 1px solid var(--edge-line); border-radius: 0; background: var(--bg-2); color: var(--fg); font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0; cursor: pointer; max-width: 100%; white-space: normal; overflow-wrap: anywhere; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.seg button:first-child { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.seg button:last-child { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
/* Sul telefono le celle vanno a capo: lì sono pulsanti staccati, ognuno con i suoi angoli. */
@media (max-width: 760px) { .seg__cells { gap: 6px; padding: 0; } .seg button, .seg button:first-child, .seg button:last-child { margin: 0; border-radius: var(--r-ctl); } }
.seg button:hover { background: var(--bg-3); }
.seg button[aria-pressed="true"] { position: relative; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.seg button:focus-visible { position: relative; z-index: 2; }

/* Con una vista corta il footer resta in fondo allo schermo. */
.area { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.area__main { flex: 1 0 auto; padding-top: clamp(20px, 2.4vw, 36px); }
@media (scripting: none) { .tools { display: none; } }

/* Pannelli scuri: intestazione del report, stati, viste. */
.rhead, .vpanel { position: relative; isolation: isolate; }
.vpanel { display: grid; gap: clamp(24px, 4vw, 64px); padding: clamp(28px, 4vw, 64px); border-radius: var(--r-panel); }
.vpanel--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.vpanel__text { display: grid; justify-items: start; gap: 18px; min-width: 0; }
.vpanel h1 { max-width: 16ch; font-size: clamp(2rem, 0.9rem + 5vw, 4.5rem); overflow-wrap: anywhere; }
.vpanel p:not(.rlabel) { max-width: 52ch; font-size: var(--t-lead); line-height: 1.4; color: var(--fg-2); }
.vpanel__text > * { min-width: 0; max-width: 100%; }
.vpanel a:not(.btn) { text-underline-offset: 3px; }
.vpanel .btn { margin-top: 10px; }
.vpanel__art { width: 100%; max-width: 420px; padding: 10px; aspect-ratio: 2 / 1; justify-self: end; }
.vpanel__art svg { width: 100%; height: 100%; overflow: visible; }
.vpanel--start h1 { max-width: 22ch; font-size: var(--t-h2); }
.skels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: var(--gap); border: 1px solid var(--rule); background: var(--rule); border-radius: var(--r-card); overflow: hidden; }
.skel { height: clamp(120px, 14vw, 200px); background: var(--bg); }
.skel::before { content: ""; display: block; width: 36%; height: 8px; margin: 22px; background: var(--bg-3); }
.skel::after { content: ""; display: block; width: 62%; height: 8px; margin: 0 22px; background: var(--bg-2); }

/* Il confine tratteggiato del campo: motivo d'identità del sito. */
.parcel { fill: color-mix(in srgb, var(--brand) 12%, transparent); stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 6 5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.parcel--empty { fill: none; }
.pins { transition: opacity 0.28s var(--ease); }
.pins.is-fading { opacity: 0; transition-duration: 0.16s; }
.pin__ring { fill: none; stroke: var(--brand); stroke-width: 1; opacity: 0.55; }
.pin__dot { fill: var(--bg); stroke: var(--brand); stroke-width: 2; }
/* Anelli, punti e sigle restano della stessa misura qualunque sia la scala del disegno: il gruppo si rimpicciolisce
   quanto il disegno si ingrandisce. La scala è la larghezza del disegno (--vw, in unità) su quella del riquadro. */
.pin__u { transform-box: view-box; transform-origin: 0 0; transform: scale(tan(atan2(var(--vw, 600px), 100cqw))); }
.pin__plate { fill: var(--bg); }
.pin__t { fill: var(--fg-2); font-family: var(--mono); font-size: 11px; letter-spacing: 0; }
.pin__ring, .pin__dot, .pin__plate, .pin__t { transform-box: fill-box; transform-origin: center; animation: r-pop 0.55s var(--ease) both; animation-delay: calc(var(--k, 0) * 90ms + 150ms); }
@keyframes r-pop { from { opacity: 0; transform: scale(0.3); } }
/* Riquadro del disegno: dal 15 ottobre 2026 senza tacche agli angoli. */
.plot { background: none; }

/* Intestazione del report: nome del campo, scheda del prelievo, selettore dei campi. */
.rhead { display: grid; gap: clamp(20px, 2.2vw, 32px); padding: clamp(22px, 3vw, 44px); border-radius: var(--r-panel); }
.rhead__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
/* Nome del prodotto e tipo di documento: due etichette, una accanto all'altra se c'è posto (le divide un filetto, niente punto mediano),
   altrimenti una sopra l'altra, allineate al testo della prima. Ognuna sta su una riga a tutte le larghezze, tranne con il testo molto ingrandito. */
.rhead__top { container-type: inline-size; }
.rhead__labels { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Nomi a margine (servizio, tipo di report, sezione): in tondo, nel carattere dei testi, come nelle pagine interne. */
.rlabel { font-size: var(--t-label); font-weight: 500; line-height: 1.35; color: var(--brand); }
.rlabel--plain { color: var(--fg-2); }
.rhead__kind { color: var(--fg-2); }
@container (min-width: 28em) {
  .rhead__labels { flex-direction: row; align-items: center; gap: 0 14px; }
  .rhead__kind { padding-left: 14px; border-left: 1px solid var(--rule); }
}
.rhead__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.rhead__tools .btn { text-wrap: balance; }
.rhead__logo { display: none; }
.rhead__main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 72px); align-items: stretch; }
.rhead__text { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-width: 0; }
.rhead__title { font-size: clamp(2.5rem, 1.2rem + 4vw, 4.75rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance; color: var(--head); }
.rhead__art { position: relative; align-self: center; box-sizing: content-box; aspect-ratio: var(--ar, 3 / 1); container-type: inline-size; padding: 10px; }
.rhead__svg { width: 100%; height: 100%; overflow: visible; }
.is-ghost { position: absolute; margin: 0; pointer-events: none; animation: r-ghost 0.28s var(--ease) both; }
.is-fresh { animation: r-rise 0.5s var(--ease) 0.1s both; }
@keyframes r-ghost { to { opacity: 0; transform: translateY(-8px); } }
@keyframes r-rise { from { opacity: 0; transform: translateY(12px); } }
/* Scheda del prelievo: quattro celle con etichetta e valore. */
.rmeta { display: grid; grid-template-columns: repeat(4, auto); gap: 4px; width: fit-content; max-width: 100%; margin: 0; }
.rmeta > div { display: grid; gap: 4px; min-width: 0; padding: 12px 18px 13px; background: var(--bg-2); }
.rmeta dt { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--brand); }
.rmeta dd { margin: 0; font-size: 1.0625rem; line-height: 1.25; color: var(--fg); }
/* Con il testo molto ingrandito su uno schermo stretto una parola lunga può andare a capo dentro la cella invece di farla uscire. */
.rmeta dt, .rmeta dd { min-width: 0; overflow-wrap: anywhere; }
.rhead__foot { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 16px 32px; }

/* Selettore dei campi: celle con un indicatore pieno che scorre da una all'altra. */
.rtabs { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); width: min(100%, 620px); border: 1px solid var(--rule); counter-reset: tab; border-radius: var(--r-ctl); overflow: hidden; }
.rtabs__ink { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% / var(--n, 3)); background: var(--g-200); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 0.55s var(--ease); }
.rtabs [role="tab"] { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 0; border-left: 1px solid var(--rule); border-radius: 0; background: none; color: var(--fg); font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0; line-height: 1.2; text-align: left; cursor: pointer; transition: color 0.3s var(--ease), background-color 0.3s var(--ease); }
.rtabs [role="tab"]:first-of-type { border-left: 0; }
.rtabs [role="tab"]::before { content: none; }
.rtabs [role="tab"]:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.rtabs [role="tab"][aria-selected="true"] { color: var(--night); background: none; }
.rtabs [role="tab"][aria-selected="true"]::before { color: var(--night); }
.rtabs [role="tab"]:focus-visible { z-index: 2; outline: 2px solid var(--focus); outline-offset: 3px; }
/* Indice delle sezioni: celle di testo che portano ai blocchi del report. */
.rindex { display: flex; flex-wrap: wrap; column-gap: 4px; margin: 0; padding: 0; list-style: none; }
.rindex a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; color: var(--fg-2); font-size: var(--t-label); font-weight: 500; text-decoration: none; transition: color 0.25s var(--ease), background-color 0.25s var(--ease); }
.rindex a:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
.rindex span { color: var(--brand); }

/* Corpo del report: azioni, gruppi, batteri, storico, previsioni. */
.rbody { display: grid; gap: clamp(56px, 6vw, 96px); margin-top: clamp(40px, 4vw, 64px); }
.rbody:focus-visible { outline-offset: 10px; }
.rsec__head { display: grid; gap: 14px; margin-bottom: clamp(20px, 2.2vw, 32px); }
.rsec__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rsec h2 { max-width: 20ch; font-size: clamp(1.875rem, 1rem + 2.4vw, 3.25rem); }
.rsub { max-width: 60ch; font-size: var(--t-lead); line-height: 1.4; color: var(--fg-2); }
.rgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(56px, 6vw, 96px) var(--gap); align-items: start; }
.rsec--groups { grid-column: 1 / span 7; }
.rsec--bacteria { grid-column: 8 / span 5; }
.rsec--bacteria .kpis { margin-top: var(--gap); }
.swap { transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); }
.swap.is-fading { opacity: 0; transform: translateY(6px); transition-duration: 0.16s; }

/* Celle: riquadri squadrati separati da un filetto. Il contenitore fa da filetto, le celle sono piene. */
/* Angoli arrotondati: il contenitore ritaglia le celle e un bordo disegnato sopra chiude gli angoli. */
/* Celle (dal 15 ottobre 2026): niente bordi; ogni cella è un gradino di tono sul fondo, separata dalle altre dallo spazio. */
.cells, .fgrid { position: relative; }
.cells { display: grid; gap: 4px; }
.cells > *, .fgrid > * { background: var(--bg-2); }
.cell { padding: clamp(20px, 2vw, 30px); }

/* Azioni consigliate: celle numerate, la prima cosa da leggere. */
.actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); list-style: none; counter-reset: action; margin: 0; padding: 0; transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); }
.actions.is-fading { opacity: 0; transform: translateY(6px); transition-duration: 0.16s; }
.action { display: flex; flex-direction: column; min-height: 180px; }
/* Il quadratino verde dell'identità sopra ogni azione, al posto del numero. */
.action::before { content: ""; width: 10px; height: 10px; margin-bottom: clamp(28px, 3vw, 48px); background: var(--brand); }
.action .card__title { max-width: 22ch; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; }
.action .card__text { margin-top: 12px; color: var(--fg-2); }
.action.is-entering { animation: r-rise 0.55s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }

/* Numeri che scorrono: le cifre hanno tutte la stessa larghezza. */
.num { position: relative; font-variant-numeric: tabular-nums; }

/* Stato: icona, parola e colore. Il colore da solo non basta. Sullo scuro l'etichetta è un riquadro bianco. */
[data-s="ok"] { --state: var(--g-700); }
[data-s="low"] { --state: var(--low); }
[data-s="high"] { --state: var(--high); }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border: 1px solid currentColor; border-radius: var(--r-tag); color: var(--state, var(--g-700)); font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; white-space: nowrap; transition: color 0.4s var(--ease), opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s; }
.status svg { width: 10px; height: 10px; flex: none; }
.status--solid { background: var(--paper); }
.status.is-off { visibility: hidden; opacity: 0; transform: translateY(4px); transition: color 0.4s var(--ease), opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s linear 0.16s; }

/* Gruppi funzionali: il quadrato è il tuo suolo, su un indice da 0 a 100. */
.rlist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.range { display: grid; grid-template-columns: minmax(15em, 1fr) minmax(110px, 1.6fr); align-items: center; gap: 8px 24px; padding: 20px clamp(18px, 2vw, 28px); border-top: 1px solid var(--rule); }
.range:first-child { border-top: 0; }
.rcard { container-type: inline-size; }
/* Nelle card strette il grafico va a capo, sotto il nome. */
@container (max-width: 40em) {
  .range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .range__text { flex: 1 1 8em; min-width: min-content; }
  .range__chart { order: 3; flex: 1 1 100%; }
}
/* Con il testo molto ingrandito la parola più lunga può andare a capo, invece di uscire dalla card. */
@container (max-width: 14em) {
  .range__text { min-width: 0; }
}
.range__name { display: block; font-size: 1.0625rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.range__values { display: block; margin-top: 3px; font-size: var(--t-small); color: var(--fg-2); }
.range__values .num { font-family: var(--mono); font-weight: 500; color: var(--fg); }
.range__chart { padding-inline: 7px; }
.range__scale { position: relative; height: 24px; container-type: inline-size; background: linear-gradient(var(--edge-line), var(--edge-line)) center / 100% 1px no-repeat; }
.range__scale::before, .range__scale::after { content: ""; position: absolute; top: 6px; bottom: 6px; width: 1px; background: var(--edge-line); }
.range__scale::before { left: 0; }
.range__scale::after { right: 0; }
.range__band { position: absolute; top: 3px; bottom: 3px; left: calc(var(--lo) * 1%); width: calc((var(--hi) - var(--lo)) * 1%); border: 1px solid var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.range__dot { position: absolute; top: 50%; left: calc(var(--v) * 1%); width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--state, var(--ink)); outline: 2px solid var(--bg); transition: transform 0.9s var(--ease), background-color 0.4s var(--ease); }
@supports (width: 1cqw) {
  .range__dot { left: 0; transform: translateX(calc(var(--v) * 1cqw)); }
}
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0; color: var(--fg-2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { display: inline-block; flex: none; }
.legend__dot { width: 10px; height: 10px; background: var(--ink); }
.legend__band { width: 22px; height: 10px; border: 1px solid var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.legend__tri { width: 0; height: 0; border-inline: 5px solid transparent; }
.legend__tri--up { border-bottom: 9px solid var(--high); }
.legend__tri--down { border-top: 9px solid var(--low); }
.legend__sq--ok { background: var(--g-700); }
.legend__line { width: 24px; height: 0; border-top: 2px solid var(--brand); }
.legend__line--dash { border-top-style: dashed; border-top-color: var(--fg-2); }

/* Batteri presenti: una barra sottile per phylum, il valore scritto accanto. */
.bars { list-style: none; margin: 0; padding: 0; }
.bar { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 3.4em; align-items: center; gap: 14px; padding: 12px clamp(14px, 1.6vw, 22px); border-top: 1px solid var(--rule); font-size: var(--t-small); }
.bar:first-child { border-top: 0; }
.bar__track { height: 8px; container-type: inline-size; overflow: hidden; background: var(--bg-2); }
.bar__fill { display: block; width: calc(var(--v) * 1%); height: 100%; background: var(--g-700); transition: transform 0.9s var(--ease); }
@supports (width: 1cqw) {
  .bar__fill { width: 100%; transform: translateX(calc((var(--v) - 100) * 1cqw)); }
}
.bar--other .bar__fill { background: var(--fg-3); }
.bar__value { text-align: right; font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Due celle numeriche: etichetta in monospazio, numero grande, dato accanto. */
.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.kpi { display: flex; flex-direction: column; min-height: 230px; }
.kpi__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 30px; }
.kpi__label { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--brand); }
.kpi__note { margin-top: 10px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0; color: var(--fg-2); text-wrap: balance; }
.kpi__num { margin-top: auto; padding-top: 18px; font-size: clamp(3.25rem, 2rem + 3.4vw, 5.25rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; }

/* Storico: un grafico a linee per indicatore, sullo stesso asse dei prelievi, e la tabella dei valori. */
.hist { grid-template-columns: repeat(3, minmax(0, 1fr)); transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); }
.hist.is-fading, .hist-table.is-fading { opacity: 0; transform: translateY(6px); transition-duration: 0.16s; }
.hcell { display: flex; flex-direction: column; gap: 10px; }
.hcell__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hcell__name { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--brand); }
.hcell__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.hcell__val { font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3.25rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
.hcell__ref { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0; color: var(--fg-2); }
.hchart { width: 100%; height: auto; overflow: visible; }
.hband { fill: color-mix(in srgb, var(--brand) 12%, transparent); }
.hband__edge { stroke: var(--brand); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.hgrid { stroke: var(--rule); stroke-width: 1; }
.hline { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); }
.hpt { stroke: var(--bg); stroke-width: 1.5; opacity: 0; transition: opacity 0.4s var(--ease); transition-delay: calc(var(--k, 0) * 190ms + 260ms); }
.hpt { fill: var(--g-700); }
.hcell { container-type: inline-size; }
/* Il testo dei grafici ha una misura fissa a schermo: 12 px i valori, 11 px assi e date, qualunque sia la larghezza del grafico.
   Il disegno si scala con la sua larghezza (320 unità): il corpo in unità è la misura a schermo per 320 diviso la larghezza del riquadro. */
.hv, .hx, .hy { font-family: var(--mono); font-size: 11px; letter-spacing: 0; fill: var(--fg-2); }
.hx, .hy { font-size: calc(11px * tan(atan2(320px, 100cqw))); }
.hv { font-size: 12px; font-size: calc(12px * tan(atan2(320px, 100cqw))); fill: var(--fg); font-weight: 500; paint-order: stroke; stroke: var(--bg); stroke-width: 0.3em; stroke-linejoin: round; opacity: 0; transition: opacity 0.4s var(--ease); transition-delay: calc(var(--k, 0) * 190ms + 260ms); }
.hx { text-anchor: middle; fill: var(--fg-3); }
.hy { text-anchor: end; fill: var(--fg-3); }
.is-drawn .hline { stroke-dashoffset: 0; }
.is-drawn .hpt, .is-drawn .hv { opacity: 1; }
.hist-table { container-type: inline-size; margin-top: clamp(24px, 3vw, 40px); transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.dtable caption { padding: 0 0 12px; text-align: left; font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0; color: var(--fg-3); }
.dtable th { padding: 12px 14px; text-align: right; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--fg-3); border-bottom: 1px solid var(--rule); }
.dtable th:first-child, .dtable--ref thead th:nth-child(2) { text-align: left; }
.dtable tbody th { border-bottom: 0; text-align: left; font-family: var(--font); font-size: var(--t-small); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg); }
.dtable td { padding: 12px 14px; border-top: 1px solid var(--rule); text-align: right; font-family: var(--mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.dtable tbody tr > * { border-top: 1px solid var(--rule); }
.dtable--ref td:nth-child(2) { text-align: left; color: var(--fg-2); }
.dtable .dv { white-space: nowrap; }
.dtable .mark { display: inline-block; margin-left: 6px; color: var(--state); }
.dtable .mark svg { display: inline-block; width: 9px; height: 9px; vertical-align: -1px; }

/* Previsioni: pannello scuro con la stima del modello. Il selettore sceglie l'intervento. */
.fpanel { display: grid; gap: clamp(24px, 3vw, 40px); padding: clamp(22px, 3vw, 44px); }
.fpanel .rsec__head { margin-bottom: 0; }
.fpanel .tag { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.fsel { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); width: min(100%, 900px); border: 1px solid var(--rule); border-radius: var(--r-ctl); overflow: hidden; }
.fsel__ink { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% / var(--n, 3)); background: var(--g-200); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 0.55s var(--ease); }
.fsel__opt { position: relative; z-index: 1; display: block; border-left: 1px solid var(--rule); cursor: pointer; transition: color 0.3s var(--ease), background-color 0.3s var(--ease); }
.fsel__opt:first-of-type { border-left: 0; }
.fsel__opt span { display: flex; align-items: center; min-height: 56px; padding: 8px 16px; font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0; line-height: 1.25; }
.fsel__opt:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.fsel__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fsel__opt.is-on { color: var(--night); background: none; }
.fsel__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 4px; }
.frows { list-style: none; padding: 0; }
.frow { display: grid; grid-template-columns: minmax(10em, 1fr) minmax(200px, 1.7fr) minmax(11.5rem, 1fr); align-items: center; gap: 10px 24px; padding: 18px clamp(16px, 1.8vw, 26px); border-top: 1px solid var(--rule); }
.frow:first-child { border-top: 0; }
.frow__name { display: block; font-size: 1.0625rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.frow__today { display: block; margin-top: 3px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0; color: var(--fg-2); }
.frow__est { display: grid; gap: 6px; justify-items: start; }
.frow__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.frow__num { font-size: 1.75rem; font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
.frow__delta { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--brand); }
.frow__range { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0; color: var(--fg-2); }
.fchart { position: relative; height: 40px; container-type: inline-size; }
.fchart::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 1px; background: var(--fg-3); }
.fchart::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--rule); }
.fbar { position: absolute; top: 14px; width: 50%; height: 12px; background: var(--g-300); transition: transform 0.9s var(--ease); }
.fbar--pos { left: 50%; transform-origin: 0 50%; transform: scaleX(calc(max(var(--d), 0) / var(--s))); }
.fbar--neg { left: 0; transform-origin: 100% 50%; transform: scaleX(calc(max(var(--d) * -1, 0) / var(--s))); }
.fwhisk { position: absolute; top: 19px; left: 0; width: 100%; height: 2px; background: var(--fg); transform-origin: 0 50%; transform: translateX(calc((var(--lo) + var(--s)) / (2 * var(--s)) * 100cqw)) scaleX(calc((var(--hi) - var(--lo)) / (2 * var(--s)))); transition: transform 0.9s var(--ease); }
.fcap { position: absolute; top: 12px; left: 0; width: 2px; height: 16px; margin-left: -1px; background: var(--fg); transform: translateX(calc((var(--c) + var(--s)) / (2 * var(--s)) * 100cqw)); transition: transform 0.9s var(--ease); }
.fcap--lo { --c: var(--lo); }
.fcap--hi { --c: var(--hi); }
.fest { position: absolute; top: 12px; left: 0; width: 16px; height: 16px; margin-left: -8px; border: 2px solid var(--fg); background: var(--bg); transform: translateX(calc((var(--d) + var(--s)) / (2 * var(--s)) * 100cqw)); transition: transform 0.9s var(--ease); }
@supports not (width: 1cqw) {
  .fchart { display: none; }
}
.fsum { display: flex; flex-direction: column; gap: 22px; padding: clamp(18px, 2vw, 28px); }
.fsum__item { display: grid; justify-items: start; gap: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.fsum__item:last-child { padding-bottom: 0; border-bottom: 0; }
.fsum__label { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--brand); }
.fsum__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: clamp(2.5rem, 1.8rem + 1.6vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; }
.fsum__big small { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0; color: var(--fg-2); }
.fsum__txt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0; color: var(--fg-2); }
.fnote { max-width: 70ch; margin: 0; font-size: var(--t-small); color: var(--fg-2); }
.fpanel .legend { margin-top: 0; }
.legend__est { width: 12px; height: 12px; border: 2px solid var(--fg); background: var(--bg); }
.legend__bar { width: 22px; height: 10px; background: var(--g-300); }
.legend__whisk { width: 24px; height: 2px; background: var(--fg); }

/* Prova di prodotto (vista per le imprese biotech): terreno trattato e terreno di controllo, prima e dopo. */
.trial__row { display: grid; grid-template-columns: minmax(10em, 1fr) minmax(220px, 2fr) minmax(10.5rem, 1fr); align-items: center; gap: 10px 28px; padding: 18px clamp(16px, 1.8vw, 26px); border-top: 1px solid var(--rule); }
.trial__row:first-child { border-top: 0; }
.trial__chart { position: relative; display: grid; gap: 6px; margin-inline: 7px; padding-block: 2px; background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 25%) left / 100% 100% no-repeat; border-right: 1px solid var(--rule); }
.tband { position: absolute; top: 0; bottom: 0; left: calc(var(--lo) * 1%); width: calc((var(--hi) - var(--lo)) * 1%); border-inline: 1px solid var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.tline { position: relative; height: 22px; }
.tline::before { content: ""; position: absolute; top: 50%; left: calc(var(--l) * 1%); width: calc(var(--w) * 1%); border-top: 2px solid var(--brand); }
.tline--control::before { border-top-style: dashed; border-top-color: var(--fg-2); }
.tmark { position: absolute; top: 50%; left: calc(var(--p) * 1%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid var(--brand); background: var(--bg); }
.tmark--after { background: var(--brand); }
.tline--control .tmark { border-color: var(--fg-2); }
.tline--control .tmark--after { background: var(--fg-2); }
.trial__axis { position: relative; height: 18px; margin: 0 7px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0; color: var(--fg-3); }
.trial__axis span { position: absolute; top: 0; left: calc(var(--p) * 1%); transform: translateX(-50%); }
.trial__axisrow { display: grid; grid-template-columns: minmax(10em, 1fr) minmax(220px, 2fr) minmax(10.5rem, 1fr); gap: 10px 28px; padding: 6px clamp(16px, 1.8vw, 26px) 10px; border-top: 1px solid var(--rule); }
.trial__net { display: grid; gap: 4px; }
.trial__netnum { font-size: 1.75rem; line-height: 1; letter-spacing: -0.02em; }
.trial__netnote { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0; color: var(--fg-2); }
.trial__reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease); }
.is-drawn .trial__reveal { clip-path: inset(0); }

/* Vista MicroBeTech: registro dei campioni. */
.atable { container-type: inline-size; margin-top: var(--gap); padding: clamp(8px, 1.4vw, 16px) clamp(20px, 2.4vw, 36px) clamp(18px, 2.4vw, 28px); border: 1px solid var(--rule); border-radius: var(--r-card); }
.table { width: 100%; border-collapse: collapse; }
.table th { padding: 14px 16px 12px 0; text-align: left; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--fg-3); }
.table td { padding: 18px 16px 18px 0; border-top: 1px solid var(--rule); vertical-align: middle; }
.table .status { padding-inline: 0; border-color: transparent; white-space: normal; }
.upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload input:focus-visible + .btn { outline: 2px solid var(--focus); outline-offset: 3px; }
.upload__msg { flex: 1 1 100%; font-size: var(--t-small); font-weight: 500; color: var(--g-700); }
.upload__msg:empty { display: none; }
.admin__todo { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: var(--t-small); }

/* Accesso (rifatto il 15 ottobre 2026 sull'asse al 42% delle pagine interne). A sinistra, a tutta altezza, una colonna scura
   divisa in tre: il logo intero con il motto, la ripresa del laboratorio senza veli, la frase. Il testo non sta mai sopra la
   ripresa. A destra, dall'asse, il modulo. */
.auth { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); min-height: 100vh; min-height: 100svh; padding-right: var(--edge); }
.auth__art { grid-column: 1 / span 5; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(24px, 3vw, 40px); padding: clamp(24px, 3vw, 44px); overflow: hidden; background: var(--bg); color: var(--fg); }
.auth__media { position: relative; grid-row: 2; min-height: 200px; overflow: hidden; background: var(--bg-2); }
/* Sotto c'è il fotogramma fisso, sopra il video: chi non ha script o ha chiesto meno movimento vede il fotogramma. */
.auth__media img, .auth__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (scripting: none) { .auth__media video { display: none; } }
.auth__top { grid-row: 1; }
.auth__statement { grid-row: 3; }
/* In alto il logo intero con il motto (regola del logo: da 240 px di larghezza in su). Il pannello è un contenitore:
   se dentro i suoi margini non ci stanno 240 px resta il logo compatto, senza motto. I colori vengono dal tema scuro. */
.auth__art { container: authart / inline-size; }
.auth__top { display: flex; align-items: flex-start; }
.auth__top .brand { align-items: flex-start; margin-right: 0; }
.auth__top .logo__full { display: block; flex: none; width: clamp(280px, 24vw, 340px); height: auto; aspect-ratio: 457 / 106.8; }
.auth__top .logo__mark, .auth__top .logo__word { display: none; }
@container authart (max-width: 239.5px) {
  .auth__top .logo__full { display: none; }
  .auth__top .logo__mark, .auth__top .logo__word { display: block; }
}
.auth__statement { max-width: 16em; font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); font-weight: 400; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.auth__form { grid-column: 7 / span 5; display: grid; align-items: center; padding-block: 40px; }
.auth__box { width: min(480px, 100%); }
.auth__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(32px, 6vh, 64px); font-size: var(--t-small); }
.auth__back { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-2); font-size: var(--t-body); text-underline-offset: 4px; }
.auth__back:hover { color: var(--fg); }
.auth__box h1 { margin-bottom: 16px; font-size: clamp(2.75rem, 1.2rem + 3.6vw, 4.5rem); line-height: 0.98; letter-spacing: -0.035em; }
.auth__lead { margin-bottom: 28px; font-size: var(--t-lead); line-height: 1.4; color: var(--fg-2); }
.auth .field > span:not(.field__error) { font-size: var(--t-body); color: var(--fg-2); }
.auth__box .btn { width: 100%; margin-top: 6px; }
.auth__box .notice { margin: 28px 0 0; }
.auth form[hidden] { display: none; }
.auth__help { margin-top: 8px; font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); }
.auth__help a { color: var(--fg); text-underline-offset: 3px; }
.auth__who { padding: 12px 14px; background: var(--mist); color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; border-radius: var(--r-ctl); }
.auth__who strong { color: var(--ink); font-weight: 600; }
.auth .field__hint { font-size: var(--t-small); font-weight: 400; color: var(--fg-2); }
.auth__legal { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 20px; font-size: var(--t-body); color: var(--fg-2); }
.auth__legal a, .auth__legal .linkbtn { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.auth__legal a:hover, .auth__legal .linkbtn:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* Sui desktop stretti le due colonne si dividono a metà: le celle dei numeri hanno più spazio. */
@media (min-width: 981px) and (max-width: 1279px) {
  .rsec--groups { grid-column: 1 / span 6; }
  .rsec--bacteria { grid-column: 7 / span 6; }
}
@media (max-width: 1100px) {
  .hist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .rhead__main { grid-template-columns: minmax(0, 1fr); }
  .rhead__art { order: -1; max-width: 640px; }
  .rmeta { grid-template-columns: repeat(2, auto); }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .fsum { flex-direction: row; flex-wrap: wrap; }
  .fsum__item { flex: 1 1 220px; border-bottom: 0; padding-bottom: 0; }
}
/* Sotto gli 860 px il pannello con il disegno diventa una colonna sola. */
@media (max-width: 860px) {
  .vpanel--split { grid-template-columns: minmax(0, 1fr); }
  .vpanel__art { justify-self: start; max-width: 360px; }
}
/* Sotto i 900 px il grafico di una riga va a capo, sotto il nome e la stima. */
@media (max-width: 900px) {
  .frow, .trial__row { grid-template-columns: minmax(0, 1fr) auto; }
  .frow .fchart, .trial__row .trial__chart { grid-column: 1 / -1; grid-row: 2; }
  .frow__est { justify-items: end; text-align: right; }
  .trial__net { justify-items: end; text-align: right; }
  .trial__axisrow { grid-template-columns: minmax(0, 1fr); }
  .trial__axisrow > :first-child, .trial__axisrow > :last-child { display: none; }
}
@media (max-width: 980px) {
  .rsec--groups, .rsec--bacteria { grid-column: 1 / -1; }
  .actions { grid-template-columns: minmax(0, 1fr); }
  .action { min-height: 0; }
  .action::before { margin-bottom: 14px; }
  .auth { display: block; padding: 0; }
  .auth__art { grid-template-rows: auto auto auto; padding: 24px var(--edge) 28px; }
  .auth__media { aspect-ratio: 3 / 2; min-height: 0; }
  .auth__statement { font-size: var(--t-h3-l); }
  .auth__form { padding: 40px var(--edge) 48px; }
}
@media (max-width: 760px) {
  .rindex { display: none; }
  .rmeta { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hist { grid-template-columns: minmax(0, 1fr); }
  .rhead__art { max-width: none; }
  .rtabs [role="tab"] { padding-inline: 8px; font-size: 0.75rem; }
  .rtabs [role="tab"]::before { display: none; }
  .fsel { grid-template-columns: minmax(0, 1fr); }
  .fsel__ink { display: none; }
  .fsel__opt { border-left: 0; border-top: 1px solid var(--rule); }
  .fsel__opt:first-of-type { border-top: 0; }
  .fsel__opt.is-on { background: var(--g-200); }
  .skels { grid-template-columns: minmax(0, 1fr); }
  .bar { grid-template-columns: minmax(0, 7.6em) minmax(0, 1fr) 3em; gap: 10px; }
  .frow, .trial__row { grid-template-columns: minmax(0, 1fr); }
  .frow .fchart, .trial__row .trial__chart { grid-row: auto; }
  .frow__est, .trial__net { justify-items: start; text-align: left; }
  .kpi { min-height: 190px; }
  /* La tabella dei campioni diventa un elenco di schede: l'etichetta di ogni cella viene da data-th (site.js). */
  .atable { padding: 0; border: 0; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table tr { display: block; margin-bottom: 12px; padding: 12px 18px; border: 1px solid var(--rule); border-radius: var(--r-card); }
  .table td { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 6px 0; border: 0; text-align: left; }
  .table td::before { content: attr(data-th); font-family: var(--font); font-size: var(--t-small); color: var(--fg-3); letter-spacing: 0; text-transform: none; }
  .admin__todo { padding-top: 0; border: 0; }
}
/* Le tabelle dei valori (storico e prova di prodotto) diventano schede quando il riquadro è stretto, qualunque sia
   lo schermo: così anche con il testo ingrandito al 200% non escono dalla pagina. */
@container (max-width: 40em) {
  .dtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .dtable tr { display: block; margin-bottom: 12px; padding: 12px 18px; border: 1px solid var(--rule); border-radius: var(--r-card); }
  .dtable tbody tr > * { border-top: 0; }
  .dtable td, .dtable tbody th { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; padding: 6px 0; border: 0; text-align: left; }
  .dtable td { font-size: 0.8125rem; }
  .dtable td::before { content: attr(data-th); font-family: var(--font); font-size: var(--t-small); color: var(--fg-3); letter-spacing: 0; text-transform: none; }
  .dtable tbody th { display: block; padding-bottom: 8px; font-size: 1rem; }
}
/* Con il testo molto ingrandito l'etichetta sta sopra il valore, non accanto. */
@container (max-width: 18em) {
  .table td { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@container (max-width: 15em) {
  .dtable td { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Barra in alto sui telefoni. Il logo ha la misura di quello della home (simbolo 30 px, nome 17 px) finché la barra, fissa e alta 64 px,
   resta su una riga anche in inglese («Sign out» è il pulsante più largo); più stretti si rimpicciolisce di quanto serve, fino al nome alto 13 px.
   Il conto: simbolo e nome (nome alto h) occupano 9,15 h + 8 px; poi lingua 88 px, pulsante 81 px (in inglese), spazi 12 px, margini. */
@media (max-width: 470px) {
  .topbar { --wh: clamp(13px, calc((100vw - 252px) / 9.15), 17px); }
  .topbar .nav__in { gap: 8px; }
  .topbar .nav__side { gap: 4px; }
  .topbar .brand { gap: 8px; }
  .topbar .logo__word { height: var(--wh); }
  .topbar .logo__mark { height: calc(var(--wh) * 1.7647); }
  .topbar .lang i { display: none; }
  .topbar .btn { padding-inline: 8px; font-size: 0.75rem; }
}
/* Sotto i 380 px la barra si avvicina ai bordi dello schermo, per lasciare posto al logo. */
@media (max-width: 379px) {
  .topbar { padding-inline: 8px; --wh: clamp(13px, calc((100vw - 221px) / 9.15), 17px); }
  .topbar .nav__in { padding-inline: 6px; }
}
/* In inglese, sotto i 338 px, «Sign out» e le due lingue non lasciano posto al nome: resta il simbolo, con un bersaglio da 44 px. */
@media (max-width: 337px) {
  html:lang(en) .topbar .logo__word { display: none; }
  html:lang(en) .topbar .brand { min-width: 44px; }
}
/* Sotto i 420 px le due celle dei numeri vanno una sotto l'altra: l'etichetta di stato ha bisogno di spazio. */
@media (max-width: 420px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .kpi { min-height: 168px; }
}
/* Colori forzati dal sistema (contrasto alto): sparisce lo sfondo, restano bordi e testo. */
@media (forced-colors: active) {
  .rtabs [role="tab"][aria-selected="true"], .fsel__opt.is-on { border: 2px solid CanvasText; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .bar__fill, .range__dot, .legend__dot, .fbar, .fest, .fcap, .fwhisk, .tmark, .hpt { forced-color-adjust: none; background: CanvasText; fill: CanvasText; }
  .bar--other .bar__fill { background: GrayText; }
  .range__scale, .tline::before { forced-color-adjust: none; }
  .range__scale { background: linear-gradient(CanvasText, CanvasText) center / 100% 1px no-repeat; }
  .range__scale::before, .range__scale::after { forced-color-adjust: none; background: CanvasText; }
  .bar__track { forced-color-adjust: none; background: linear-gradient(GrayText, GrayText) left center / 100% 1px no-repeat; }
  .range__band, .legend__band, .tband { border-color: CanvasText; }
  .parcel, .hline { stroke: CanvasText; }
  .pin__dot { fill: Canvas; stroke: CanvasText; }
  .pin__ring { stroke: CanvasText; }
  .hv { forced-color-adjust: none; fill: CanvasText; stroke: Canvas; }
}
@media print {
  /* Sulla carta tutto è chiaro: i pannelli scuri tornano ai token del tema chiaro. */
  [data-theme="dark"] { --bg: var(--paper); --bg-2: var(--mist); --bg-3: var(--mist-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --rule: color-mix(in srgb, var(--ink) 30%, transparent); --grid: transparent; --brand: var(--g-700); --head: var(--ink); background: none; color: var(--ink); }
  :root { --space-m: 22px; --gap: 12px; }
  html { font-size: 13.5px; }
  .tools, [data-print], .rhead__tools .btn, .rtabs, .rindex, .skels, .area .footer { display: none !important; }
  .area__main { width: 100%; margin: 0; padding: 0; }
  .rhead { display: block; padding: 0 0 14px; border-bottom: 1px solid var(--ink); }
  .rhead__logo { display: block; width: 62mm; height: auto; aspect-ratio: 457 / 106.8; margin-bottom: 14px; }
  .rhead__top { margin-bottom: 8px; }
  /* In testa: il nome a sinistra, il confine del campo a destra, sotto la scheda del prelievo a tutta larghezza. */
  .rhead__main { display: grid; grid-template-columns: minmax(0, 1fr) 36%; align-items: center; gap: 0 18px; }
  .rhead__text { display: contents; }
  .rhead__title { grid-column: 1; grid-row: 1; font-size: 2.5rem; }
  .rhead__art { position: static; grid-column: 2; grid-row: 1; width: auto; padding: 0; }
  .plot { background: none; }
  .parcel { stroke: var(--ink); }
  .pin__dot { fill: var(--white); stroke: var(--ink); }
  .pin__ring { stroke: var(--ink); }
  .pin__plate, .pin__t--pin { display: none; } /* sulla carta le sigle P1, P2, P3 si affollano: restano gli anelli */
  .pin__u { transform: scale(calc(tan(atan2(var(--vw, 600px), 100cqw)) * 0.8)); }
  .rlabel, .action::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rmeta { grid-column: 1 / -1; grid-row: 2; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); width: 100%; margin-top: 10px; }
  .rmeta > div { border-top: 0 !important; border-left: 1px solid var(--rule) !important; }
  .rmeta > div:first-child { border-left: 0 !important; }
  .rbody { gap: 22px; margin-top: 18px; }
  .rsec h2 { font-size: 1.5rem; }
  .rsec__head { margin-bottom: 10px; gap: 6px; }
  .rgrid { display: block; }
  .rsec--bacteria { margin-top: 22px; }
  .actions { grid-template-columns: minmax(0, 1fr); }
  .action { min-height: 0; flex-direction: row; align-items: flex-start; gap: 14px; }
  .cells, .rlist, .fgrid { break-inside: auto; }
  .action, .range, .bar, .hcell, .frow, .trial__row, .kpi, .fsum__item { break-inside: avoid; }
  .rsec h2, .rsub { break-after: avoid; }
  .cell { padding: 12px 16px; }
  .range { padding: 10px 14px; }
  .hist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fpanel { padding: 14px 16px; gap: 14px; border: 1px solid var(--ink); break-before: page; break-inside: avoid; }
  .rsec__head { break-after: avoid; break-inside: avoid; }
  #s-actions, .rsec--groups, .rsec--bacteria { break-inside: avoid; }
  /* Sulla carta si vede solo l'intervento scelto. */
  .fsel { display: block; width: auto; border: 0; }
  .fsel__ink, .fsel__opt:not(.is-on) { display: none; }
  .fsel__opt.is-on { display: inline-block; border: 1px solid var(--ink); }
  .fsel__opt input { display: none; }
  .frow, .trial__row, .trial__axisrow { grid-template-columns: minmax(8em, 1fr) minmax(150px, 2fr) minmax(9em, 1fr); gap: 8px 18px; padding: 10px 14px; }
  .frow .fchart, .trial__row .trial__chart { grid-column: auto; grid-row: auto; }
  .frow__est, .trial__net { justify-items: start; text-align: left; }
  .trial__axisrow { padding-block: 4px; }
  .trial__axisrow > :first-child, .trial__axisrow > :last-child { display: block; }
  .fchart, .hchart, .trial__chart { break-inside: avoid; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
  .kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi { min-height: 0; }
  .kpi__num { font-size: 2.25rem; padding-top: 10px; }
  .cells, .cells > *, .bar__fill, .bar__track, .range__dot, .range__band, .range__scale, .range__scale::before, .range__scale::after, .legend i, .tag, .status, .parcel, .pin__dot, .hband, .hpt, .hline, .fbar, .fest, .fcap, .fwhisk, .tband, .tmark, .tline::before, .fchart::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hline { stroke-dashoffset: 0; }
  .hpt, .hv { opacity: 1; }
  .trial__reveal { clip-path: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Area clienti con l'accesso fatto: la scelta del report, quando il cliente ne ha più di uno. */
.rpick { margin-bottom: 24px; }
.rpick__date { font-weight: 400; }
/* Sezioni dell'area del cliente (dal 6 novembre 2026): microbioma e analisi fisico-chimiche in PDF. */
.asec { margin-bottom: 24px; }
.chem { max-width: 960px; }
.chem__h { font-size: var(--t-h2); line-height: 1.1; }
.chem__lead { margin-top: 12px; max-width: 60ch; font-size: var(--t-lead); color: var(--fg-2); }
.chem__list { margin: 32px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.chem__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 0; border-top: 1px solid var(--rule); }
.chem__t { font-size: var(--t-h3); font-weight: 500; overflow-wrap: anywhere; }
.chem__date { margin-top: 4px; font-size: var(--t-small); color: var(--fg-2); }
.chem__acts { display: flex; flex-wrap: wrap; gap: 10px; }