/* Oggi e Settimana: i pannelli si adattano alla PROPRIA larghezza (container query sul pannello), non a quella della pagina.
   Il pannello e' un contenitore (crm-pannelli.css); chi e' lui stesso la griglia (Numeri grandi, Meteo) usa data-pn-w, misurato dal motore. */
/* Numeri grandi: 6 in fila se c'e' spazio, a mezza riga 3 per riga su 2 righe, stretto 2 per riga */
.pn-flow>.kpis[data-pn-w=m],.pn-flow>.kpis[data-pn-w=s]{grid-template-columns:repeat(3,minmax(0,1fr))}
.pn-flow>.kpis[data-pn-w=xs]{grid-template-columns:repeat(2,minmax(0,1fr))}
.pn-flow>.kpis[data-pn-w=m] .kpi .n,.pn-flow>.kpis[data-pn-w=s] .kpi .n,.pn-flow>.kpis[data-pn-w=xs] .kpi .n{font-size:26px}
/* Meteo: a due colonne quando e' stretto */
.pn-flow>.alarm[data-pn-w=xs],.pn-flow>.alarm[data-pn-w=s]{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
/* La giornata (Plancia): sotto i 820 px la linea del tempo diventa un elenco verticale compatto */
@container pnp (max-width:820px){
  .tlg .track{height:auto;margin:0;display:flex;flex-direction:column;gap:8px}
  .tlg .hours,.tlg .axis,.tlg .past,.tlg .rain,.tlg .nw{display:none}
  .tlg .evt{position:static;width:auto;transform:none;left:auto!important;top:auto!important;padding-left:12px}
  .tlg .evt:before{left:-6px;top:3px}
  .tlg .evt small{white-space:normal}
}
/* Cantieri attivi: una colonna quando e' stretto */
@container pnp (max-width:720px){
  .cr{grid-template-columns:minmax(0,1fr);gap:6px}
  .cr .av-p{text-align:left}
}
/* La settimana (griglia dei giorni): colonne piu' strette, poi scorre di lato */
.pn-flow>.wk{overflow-x:auto}
@container pnp (max-width:1000px){
  .wgrid{grid-template-columns:96px repeat(7,minmax(0,1fr))}
  .wgrid .cell{padding:6px 5px;font-size:11.5px;min-height:40px}
  .wgrid .dhd{padding:8px 4px}.wgrid .dhd b{font-size:13px}
}
@container pnp (max-width:720px){.wgrid{min-width:640px}}
/* Soldi, Materiale, Da fare, Avvisi: a un quarto di riga le azioni vanno a capo */
@container pnp (max-width:360px){
  .rw{grid-template-columns:minmax(0,1fr)}.rw .imp{text-align:left}.rw .acts{justify-content:flex-start}
  .mh{flex-wrap:wrap}
}