/* ============================================================================
   PHOTOMETRICS SOFT — stile del widget fotometrie della famiglia SOFTLED
   ----------------------------------------------------------------------------
   Sess.68. File NUOVO. Non tocca photometrics.css: il widget dei Fresnel resta
   esattamente com'è.

   REGOLE DI PROGETTO RISPETTATE QUI
   · Solo token `--ds-c-*` / `--ds-brand-*`. Nessun colore scritto a mano.
   · `:hover` solo dentro `@media (hover:hover)` — su iOS un hover senza gate
     resta appiccicato dopo il tap (memoria `feedback_sticky_hover_ios`).
   · Le 4 fasce canoniche: app <1100 · compact-narrow 1100-1399 ·
     compact 1400-1849 · wide ≥1850. Il gate mobile è la larghezza, non il
     touch: la touch-detection produce il bug ibrido.

   ⚠️ COSA QUESTO FOGLIO NON COLORA, E PERCHÉ
   Dentro l'SVG del cono, il badge del preset, i testi BEAM/FIELD e i marker
   sono colorati da cone-renderer.js, che gestisce da sé il tema scuro. Se li
   ridipingessi qui vincerei sulla sua logica (il CSS batte gli attributi di
   presentazione) e romperei il dark mode del renderer condiviso — cioè
   proprio la parte che ho riusato per non riscriverla. Quindi lascio stare:
   qui si veste solo il guscio del widget.
   ========================================================================= */

/* ── V-03 · IL FONT COME NEL FRESNEL ─────────────────────────────────────────
   David: «il font in photometrics dei soft non è lo stesso dei Fresnel,
   devono essere uguali come stile».
   MISURATO: il tool Fresnel (`#photometrics` su F7) ha **zero** elementi in
   ConthraxSB — è tutto Oswald, e a distinguere le etichette dai valori ci
   pensa il PESO (600 per le etichette d'asse, 700 per le micro-etichette).
   Il tool soft ne aveva **10 su 29**. ⇒ qui si passa a Oswald con i pesi che
   usa il Fresnel; i CORPI restano quelli che c'erano.
   ⏸️ Che 9px e 10px siano sotto il minimo del design contract (11,2px) è vero
   ANCHE nel Fresnel (`pm-exp-label` è 9,5px): è una domanda che riguarda tutti
   e due i tool insieme, non solo questo. Non la decido con una regola locale. */

.pms {
  display: block;
  padding: clamp(16px, 2vw, 24px);
  border-radius: 16px;
  background: var(--ds-c-bg-elevated);
  color: var(--ds-c-text);
  /* Bordino container: colonna piena → accento su entrambi i lati
     (memoria `feedback_accent_borders_logical`). */
  box-shadow: inset 3px 0 0 rgba(244, 181, 50, .48),
              inset -3px 0 0 rgba(244, 181, 50, .48);
}

body.ds-dark .pms {
  box-shadow: inset 3px 0 0 rgba(244, 181, 50, .32),
              inset -3px 0 0 rgba(244, 181, 50, .32);
}

/* ⚠️ Serve davvero, e l'ho scoperto sul banco: la regola dell'user agent
   `[hidden] { display: none }` ha specificità 0-1-0, quindi qualunque mia
   `.pms__axes { display: grid }` la BATTE. Risultato: il widget impostava
   `hidden = true` sullo stato vuoto e non spariva niente — gli assi di un
   range senza fotometrie restavano a schermo, cliccabili, su dati che non
   esistono. Con `display:none` dichiarato sulle classi il problema si
   ripresenterebbe alla prima classe nuova: meglio una regola sola, qui. */
/* ⭐ V-85 (04/09/2026) — LA REGOLA C'ERA E NON COPRIVA PIU' NIENTE.
   Era scritta su `.pms`, cioe' lo scheletro di sess.68. Il 01/09 (V-06) il
   widget ha smesso di vestirsi da solo e ha adottato le classi dell'F7: la
   sua radice da allora e' `.pm.pm--soft`, e `.pms` non esiste piu' in pagina.
   Da quel giorno questa riga proteggeva una classe morta — senza dirlo, e
   senza che niente fallisse: il sintomo e' ricomparso identico a quello che
   il commento qui sopra racconta di aver curato, ma su un altro percorso
   (cambio range a caldo verso VW+C: cartello «dati non disponibili» e sotto
   i 455 lux del range precedente, ancora a schermo perche' `.pm-grid`
   dichiara `display:grid` e batte l'`[hidden]` dell'user agent).
   🔑 Una protezione che non ha mai dovuto proteggere niente non e'
   collaudata: e' una riga che sembra una risposta.
   ⛔ Le due selezioni restano entrambe — `.pms` per il banco di prova
   `_scratch/s68`, `.pm--soft` per la pagina — perche' toglierne una qui
   significherebbe rifare fra un mese esattamente questa indagine. */
.pms [hidden],
.pm--soft [hidden] { display: none !important; }

/* ── testata ─────────────────────────────────────────────────────────────── */
.pms__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pms__eyebrow {
  position: relative;
  padding-left: 14px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-c-text);
}

/* Barra titolo: 3px x 32px, gradiente verticale dei due gialli Pantone.
   È il primo dei due accenti del design system, quello del TITOLO. */
.pms__eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 32px;
  background: linear-gradient(180deg,
              var(--ds-brand-yellow-dark), var(--ds-brand-yellow-light));
}

.pms__meta {
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ds-c-text-tertiary);
}

/* ── cartellino "selezione discreta" ─────────────────────────────────────── */
.pms__discrete {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ds-c-accent-subtle);
  border: 1px solid var(--ds-c-accent-border);
}

.pms__discrete-tag {
  flex: none;
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ds-c-accent);
}

.pms__discrete-txt {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ds-c-text-secondary);
}

/* ── assi ────────────────────────────────────────────────────────────────── */
.pms__axes {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.pms__axis-label {
  margin-bottom: 6px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-c-text-tertiary);
}

.pms__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Famiglia 3 del design system: pill toggle outline ambra
   (memoria `feedback_button_family3_convergence`). */
.pms__pill {
  appearance: none;
  padding: 9px 16px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--ds-c-surface-border);
  background: var(--ds-c-surface);
  color: var(--ds-c-text-secondary);
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.pms__pill.is-active {
  border-color: var(--ds-c-accent);
  background: var(--ds-c-accent-subtle);
  color: var(--ds-c-text);
}

.pms__pill:focus-visible,
.pms__step:focus-visible {
  outline: 2px solid var(--ds-c-focus);
  outline-offset: 2px;
}

/* ── stepper della distanza ──────────────────────────────────────────────── */
.pms__stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--ds-c-surface-border);
  background: var(--ds-c-surface);
}

.pms__step {
  appearance: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ds-c-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.pms__step-val {
  min-width: 68px;
  text-align: center;
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ds-c-text);
}

/* ── cono ────────────────────────────────────────────────────────────────── */
.pms__cone-wrap {
  margin-bottom: 16px;
}

.pms__cone {
  width: 100%;
  height: 300px;
  /* ⚠️ 02/09/2026 — il simbolo del proiettore va ancorato all'SVG, non al
     riquadro che lo contiene.
     Il renderer piazza l'icona con `left: <LEFT/W>%`, la stessa percentuale
     a cui mette il vertice del fascio DENTRO il viewBox. Ma una percentuale
     si misura sul primo antenato POSIZIONATO, e questo qui non lo era: la
     percentuale finiva sul riquadro esterno, che ha 10 px di padding e un
     bordo. Stessa formula, due righelli diversi ⇒ icona e apice sfalsati di
     ~9 px, e il fascio partiva staccato dal pannello.
     🔑 Non l'ho corretto spostando `ax` finche' tornava: quello avrebbe
     nascosto il disallineamento dentro un numero che dovrebbe descrivere la
     GEOMETRIA DELL'IMMAGINE, e si sarebbe rotto al primo cambio di padding.
     Questa scatola coincide con l'SVG al pixel (verificato: dx 0, dw 0). */
  position: relative;
}

/* ⚠️ 03/09/2026 — I SEI PIXEL CHE SPOSTAVANO L'APICE (dentro V-76).
   L'icona del proiettore viene ancorata dal renderer a `top: 50%` del
   CONTENITORE, mentre il vertice del fascio sta a metà del VIEWBOX. Finché i
   due riquadri coincidono è la stessa quota; qui non coincidevano:
     contenitore 340 px · SVG 345,5 px  ⇒  apice 3 px più in basso dell'icona.
   È esattamente ciò che David ha visto («l'apice sta sulla mezzeria del
   grafico mentre l'ICONA sta più in alto»), e non era un `ay` da ritoccare:
   era il righello.
   🔑 LA CAUSA, misurata sul CSSOM e non dedotta: in `product.css` esiste
   `#photometrics svg { height: auto }`. È un selettore d'ID (1,0,1) e batte
   `.pms__cone .pms-cone` (0,2,0), quindi l'SVG si dimensionava sul proprio
   rapporto d'aspetto invece che sul contenitore.
   ⛔ E c'è il secondo tempo, che è il motivo dell'`!important`: quella regola
   è appesa a `#photometrics`, cioè al widget IN PAGINA. Nel tool esteso il
   widget si rimonta sotto un altro id, la regola non si applica, e l'SVG
   prende un'altra altezza — due geometrie diverse per lo stesso disegno.
   Correggerla con un ID più specifico avrebbe rimesso in piedi la stessa
   trappola: una regola ancorata a un POSTO per un componente che si monta in
   due posti. Qui è ancorata alla classe di componente, e vale ovunque. */
.pm--soft .pms__cone .pms-cone,
.pms__cone .pms-cone {
  width: 100%;
  height: 100% !important;
  display: block;
}

/* La mediana è l'unico tratto del disegno che cone-renderer.js non ridipinge,
   quindi è l'unico che posso legare a un token senza litigarci. */
.pms__cone .pms-mid {
  stroke: var(--ds-c-surface-border);
  stroke-width: 1;
}

/* ── GLI ASSI INCROCIATI — variante V1 del mock, approvata da David ─────────
   03/09/2026. Il renderer condiviso disegna due cunei dallo stesso vertice e
   non sa cosa rappresentino: glielo dice il vestito.
     · H — la sezione ORIZZONTALE — è il cuneo pieno, con il contorno continuo.
       È la misura che si legge per prima perché è quella che riempie la scena.
     · V — la sezione VERTICALE — è solo un contorno TRATTEGGIATO, senza
       riempimento. Il tratteggio non è un vezzo grafico: è ciò che dice che i
       due cunei NON sono due soglie di intensità (beam e field, come sul
       Fresnel) ma due tagli ortogonali dello stesso volume, visti sovrapposti.
       Riempirlo anche lui darebbe due aree e farebbe leggere «fascio interno»
       ed «esterno», che su un softlight è la cosa sbagliata da far credere.
   ⚠️ `stroke-width` in unità di viewBox: l'SVG è 1000×300 stirato senza
   `preserveAspectRatio`, quindi un tratto verticale e uno orizzontale non
   hanno lo stesso spessore apparente. 2.2 è il compromesso misurato a 1920 e
   a 390 — visibile senza diventare una fascia.
   `vector-effect` NON si usa: con lo stiramento darebbe un tratto costante in
   pixel che a 390 diventa sproporzionato rispetto al disegno. */
.pms__cone .pms-poly-h {
  stroke: var(--ds-brand-yellow-dark, #F4B532);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.pms__cone .pms-poly-v {
  fill: none;
  stroke: var(--ds-c-text-secondary, #4A4540);
  stroke-width: 1.8;
  stroke-dasharray: 9 6;
  stroke-linejoin: round;
  opacity: .78;
}
body.ds-dark .pms__cone .pms-poly-v,
.dspmx .pms__cone .pms-poly-v {
  /* Sul fondo scuro il grigio del testo secondario sparisce dentro il giallo
     del cuneo H: serve un tratto chiaro, non un grigio più scuro. */
  stroke: rgba(255, 255, 255, .72);
  opacity: .9;
}

/* ── I FASCI A CONFRONTO — i coni sovrapposti del tool esteso ──────────────
   David, 03/09: «nel fresnel vedi il confronto dei fasci... nei soft manca
   quello». Il disegno lo costruisce `photometrics-soft-maximize.js`; qui c'e'
   soltanto come si veste.
   ⭐ Stesso linguaggio del cono di casa, in un altro colore: H con il tratto
   PIENO (stessi 2.2 di `pms-poly-h`), V TRATTEGGIATO (stessi 1.8 e lo stesso
   passo 9 6 di `pms-poly-v`). Un cono confrontato deve leggersi come il cono
   base — se cambiasse anche il modo di disegnare, la differenza di colore
   direbbe una differenza di grandezza.
   Il riempimento e' molto piu' leggero di quello della base (.16 contro il
   gradiente pieno): tre o quattro cunei sovrapposti a piena opacita' non si
   attraversano piu' con l'occhio, e il confronto e' proprio guardarli uno
   attraverso l'altro.
   ⚠️ Il colore arriva dalla variabile `--pms-cmp-color`, che il JS mette sul
   gruppo di ciascun modello: cosi' la tinta cambia per apparecchio senza che
   una sola riga di colore stia scritta nel JavaScript. */

/* Le quattro tinte categoriali dei modelli in confronto. Sono le STESSE
   dell'F7 (`photometrics-modal.js`, palette del multi-cono), perche' i due
   tool devono riconoscersi come lo stesso strumento — ma li' sono quattro
   esadecimali dentro il JS, e qui sono token.
   📌 Stanno nel foglio della famiglia e non in `ds-tokens.css` per tenere il
   raggio del danno sulle sole pagine soft: il giorno che anche l'F7 smette di
   scriverseli in casa, questi quattro salgono nel foglio dei token ed e' un
   trasloco, non una riscrittura. */
.pms,
.dspmx--soft {
  --ds-c-cmp-1: #4A90E2;
  --ds-c-cmp-2: #50C878;
  --ds-c-cmp-3: #B476E5;
  --ds-c-cmp-4: #FF7E5F;
}

.pms__cone svg g.cones-compare .pms-cmp-h {
  fill: var(--pms-cmp-color);
  fill-opacity: .16;
  stroke: var(--pms-cmp-color);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.pms__cone svg g.cones-compare .pms-cmp-v {
  fill: none;
  stroke: var(--pms-cmp-color);
  stroke-width: 1.8;
  stroke-dasharray: 9 6;
  stroke-linejoin: round;
  opacity: .9;
}

/* ── la legenda nel riquadro di destra ─────────────────────────────────────
   Il gruppo porta anche la classe `panel`: sotto i 1100 px il pannello dentro
   l'SVG e' gia' nascosto (regola qui sotto + `_mobile-touch.css`) e la
   legenda sparisce con lui, senza una seconda regola da tenere allineata. */
.pms__cone svg .pms-cmp-dot { fill: var(--pms-cmp-color); }

.pms__cone svg line.pms-cmp-sep {
  stroke: var(--ds-c-surface-border);
  stroke-width: 1;
}
body:is(.ds-dark, [data-dspmx-open]) .pms__cone svg line.pms-cmp-sep {
  stroke: rgba(255, 255, 255, .16);
}

/* ⚠️ `photometrics.css` forza il fill di OGNI testo dentro `.pm-cone-host`
   quando il modale e' aperto (`body:is(.ds-dark,[data-dspmx-open]) ... text`,
   con !important): senza questa riga il nome del modello perderebbe il suo
   colore ed e' proprio il colore a legarlo al suo cono. Stessa forma del
   selettore piu' la classe, cosi' vince per specificita' e non per fortuna
   dell'ordine di caricamento. */
.pms__cone svg text.pms-cmp-name,
body:is(.ds-dark, [data-dspmx-open]) .pm-cone-host svg text.pms-cmp-name {
  fill: var(--pms-cmp-color) !important;
}
.pms__cone svg text.pms-cmp-val {
  fill: var(--ds-c-text-secondary);
}
/* «non dichiarato» si vede che e' un'assenza, non un numero. */
.pms__cone svg text.pms-cmp-val--assente {
  font-style: italic;
  opacity: .78;
}

/* ── letture ─────────────────────────────────────────────────────────────── */
.pms__readouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pms__read {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ds-c-surface);
  /* Colonna singola dentro una griglia → accento SOLO sul proprio lato
     sinistro, non su entrambi (memoria `feedback_accent_borders_logical`). */
  box-shadow: inset 3px 0 0 rgba(244, 181, 50, .48);
}

body.ds-dark .pms__read {
  box-shadow: inset 3px 0 0 rgba(244, 181, 50, .32);
}

.pms__read-label {
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-c-text-tertiary);
}

.pms__read-val {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ds-c-text);
  font-variant-numeric: tabular-nums;
}

.pms__empty {
  padding: 18px;
  border-radius: 12px;
  background: var(--ds-c-surface);
  color: var(--ds-c-text-secondary);
  font-size: 14px;
}

/* ── hover: solo dove un puntatore esiste davvero ────────────────────────── */
@media (hover: hover) {
  .pms__pill:hover { border-color: var(--ds-c-accent-border); color: var(--ds-c-text); }
  .pms__step:hover { background: var(--ds-c-surface-hover); }
}

/* ══ FASCE ═══════════════════════════════════════════════════════════════ */

/* app — sotto 1100. Le letture vanno in colonna: tre riquadri affiancati a
   390 px darebbero numeri da 22px dentro 100px di larghezza. */
@media (max-width: 1099.98px) {
  .pms { padding: 14px; border-radius: 12px; }
  .pms__readouts { grid-template-columns: 1fr; }
  .pms__cone { height: 220px; }
  .pms__pill { padding: 10px 14px; min-height: 44px; }  /* bersaglio touch */
  .pms__read-val { font-size: 20px; }

  /* Il pannello dentro l'SVG (badge del preset + Beam/Field) va nascosto.
     L'SVG ha viewBox 1000x300 con preserveAspectRatio:none: sotto i 1100 px
     viene schiacciato in orizzontale e quelle scritte diventano illeggibili —
     visto sul banco a 390 px. Stessa cosa che _mobile-touch.css fa da tempo
     per il widget Fresnel (`body.ds-vp-app #photometrics ... g.panel`); qui
     il gate è la LARGHEZZA e non la classe di regime, così la regola vale
     anche sul banco, dove site-chrome.js non gira e `ds-vp-app` non esiste.
     Nessuna informazione va persa: nome della configurazione, beam e field
     stanno già nella testata e nelle tre letture qui sotto. */
  .pms__cone svg g.panel { display: none; }
}

/* compact-narrow — 1100-1399: due letture per riga, respiro intermedio. */
@media (min-width: 1100px) and (max-width: 1399.98px) {
  .pms__readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pms__cone { height: 260px; }
}

/* wide — da 1850 in su: il widget può respirare, gli assi vanno in riga. */
@media (min-width: 1850px) {
  .pms__axes {
    grid-template-columns: repeat(4, minmax(0, auto));
    align-items: start;
    justify-content: start;
    gap: 28px;
  }
  .pms__cone { height: 340px; }
}

/* Chi ha chiesto meno movimento lo ottiene. */
@media (prefers-reduced-motion: reduce) {
  .pms__pill { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — il vestito dell'F7 porta con se' un LAYOUT MOBILE INTERO (V-62)
   ⚠️ REGRESSIONE MIA, 01/09, e la lezione vale piu' del fix.
   Con la V-06 ho vestito il widget dei soft con le classi `pm-*` per averne
   lo stile approvato. Su desktop e' esatto. Ma `_mobile-touch.css` sotto i
   1100 px non «stila» quelle classi: ci costruisce sopra un ALTRO widget —
   `.pm-ctrl-row` diventa una griglia a tre aree («distance zoom angle»),
   `.pm-presets` va in `display:none !important` perche' il Fresnel li'
   sostituisce le pill con `pm-zoom-mobile-select`, e i pulsanti dello
   stepper hanno `font-size:0` con i glifi messi da `::before`.
   Il widget dei soft quei pezzi non ce li ha ⇒ su iPhone restavano le sole
   etichette e uno stepper con un quadrato vuoto al posto del meno.
   🔑 Riusare una classe non eredita solo un aspetto: eredita tutto cio' che
      quella classe SIGNIFICA altrove, comprese le fasce che non hai guardato.
      L'avevo verificata a 1440 e mai sotto i 1100.
   ⇒ Si riaccende solo sotto `.pm--soft`. Il Fresnel non viene toccato, e il
     file condiviso nemmeno: la deroga vive nel CSS del widget che la chiede.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1099.98px) {
  /* La riga controlli torna una fila che va a capo: la griglia a tre aree
     del Fresnel qui lascerebbe fuori CCT, accessorio e piano. */
  body.ds-vp-app #photometrics.pm--soft .pm-ctrl-row{
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-start;
  }
  body.ds-vp-app #photometrics.pm--soft .pm-presets,
  body.ds-vp-app #photometrics.pm--soft .pm-head-right{
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* I glifi − e + sono TESTO in questo widget, non `::before` disegnati:
     si rimette il corpo e si spegne il contenuto iniettato, altrimenti si
     sommano (o restano quadrati vuoti, che e' cio' che si vedeva). */
  body.ds-vp-app #photometrics.pm--soft .pm-spin-btn{
    font-size: 20px !important;
    line-height: 1;
  }
  body.ds-vp-app #photometrics.pm--soft .pm-spin-btn::before{
    content: none !important;
  }
  /* Il cartellino discreto prende una riga sua invece di strizzare le pill. */
  body.ds-vp-app #photometrics.pm--soft .pm-mode-chip{
    flex-basis: 100%;
  }
  /* ⚠️ La scatola del cono era alta 220 px FISSI (regola mobile di questo
     stesso file, scritta quando il widget era largo quanto la pagina). A
     390 px l'SVG tiene le sue proporzioni e ne occupa 99: restavano 143 px
     di nero vuoto sotto il fascio — il «contenitore enorme vuoto» che ha
     segnalato David.
     ⇒ L'altezza la detta il disegno, non un numero.

     ⭐ V-95 (04/09/2026) — E QUESTA REGOLA ERA APPESA AL POSTO SBAGLIATO.
     David da iPhone: «su mobile il cono sborda in extended». Misurato a 390
     nel tool esteso: `.pms__cone` alto 220 px dentro una scatola alta 144,8 —
     37 px tagliati sopra e 78 sotto, `overflow:hidden`, il fascio mozzato.
     La causa non e' una dimensione: e' il selettore. `#photometrics` e' il
     widget IN PAGINA; nel tool esteso lo stesso widget si rimonta sotto
     `#ds-photometrics-modal-host`, la regola non lo raggiunge, e resta il
     `height:220px` mobile di sopra. Il difetto era gia' stato riparato — solo
     in uno dei due posti in cui il componente vive.
     🔑 E' LA STESSA TRAPPOLA descritta trenta righe fa a proposito di
     `#photometrics svg { height:auto }` («una regola ancorata a un POSTO per
     un componente che si monta in due posti»). Scritta li' e non applicata
     qui: una lezione registrata non e' una lezione in vigore.
     ⇒ Ancorata alla CLASSE DI COMPONENTE, e vale ovunque il widget si monti.
     ⛔ Il gate resta la LARGHEZZA e non `ds-vp-app`, cosi' vale anche sul
     banco dove site-chrome.js non gira. */
  .pm--soft .pms__cone{
    height: auto !important;
    min-height: 96px;
  }
  /* ⭐ V-95, secondo tempo — LA SCATOLA CHE SI MISURAVA SUL VIEWPORT.
     `_mobile-touch.css` da' al riquadro del cono nel tool esteso
     `aspect-ratio:1000/400` + `height:calc((100vw - 28px)/2.5)`: una LARGHEZZA
     dedotta dal viewport (390-28 = 362) invece che dallo spazio che il
     riquadro ha davvero (352, perche' la colonna scorre). Dieci pixel fuori a
     destra, misurati. E il rapporto 1000/400 non e' quello del disegno, che e'
     1000/300: quei 25% in piu' erano il vuoto da riempire quando il cono era
     alto 220 fissi — un compenso a un difetto che la regola sopra ha appena
     tolto.
     ⇒ Qui la scatola torna a fasciare il disegno: nessuna larghezza dedotta,
     nessun vuoto da compensare. Stessa regola del widget di pagina.
     ⛔ Gate `.dspmx--soft`: il tool esteso dell'F7 usa lo stesso guscio
     `.dspmx` e li' il difetto NON c'e' (il suo SVG sta diretto dentro
     `.pm-cone-host`, senza il div `.pms__cone` di mezzo, e si dimensiona sulla
     scatola — verificato a 390: 340x122,8 dentro 362x144,8). Non si tocca. */
  body.ds-vp-app .dspmx.dspmx--soft .pm-cone-host{
    aspect-ratio: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* ── 02/09/2026 — LA DEROGA E' TOLTA, ed era scritto qui che sarebbe
     successo. C'era una regola che RIACCENDEVA la griglia a 4 card sul solo
     soft: `_mobile-touch.css` nasconde `#photometrics .pm-grid` su mobile per
     far posto alle due celle a tap, e il soft quelle celle non le costruiva —
     senza la deroga, su un telefono restavano assi e cono e NESSUN numero.
     Ora le costruisce (`photometrics-soft.js`, `elMerge`), quindi la deroga
     non ha piu' un caso da coprire. La nota diceva: «il giorno che anche il
     soft avra' le celle a tap, questa si toglie — non e' un ripiego, e' il
     caso non ancora coperto». E' quel giorno.
     🔑 Vale la pena notare cosa ERA: non un bug, una toppa onesta con dentro
     la sua data di scadenza. Senza quella riga di commento oggi avrei trovato
     una regola strana, e non avrei saputo se toglierla o cosa avrei rotto. */

  /* La tile F/STOP ha una colonna di comandi a sinistra: su schermo stretto
     i tre bottoni starebbero larghi quanto il valore. Colonna piu' magra. */
  body.ds-vp-app #photometrics.pm--soft .pm-fstop-toggles{
    width: 38px;
  }
  body.ds-vp-app #photometrics.pm--soft .pm-card.pm-fstop::after{
    width: 0;
  }
}

/* ── V-95, terzo tempo: il telefono girato ────────────────────────────────
   In landscape phone `_mobile-touch.css` cappa il riquadro del cono a 220 px
   (l'altezza utile e' poca). Li' l'altezza NON puo' dettarla il disegno: a
   844 px di larghezza il rapporto 1000/300 ne chiederebbe 250, e sarebbero
   30 px tagliati — cioe' lo stesso difetto, sull'altro lato del telefono.
   ⇒ In questo solo sotto-livello la scatola del disegno torna a un numero, ed
   e' LO STESSO numero del cappello: 220 = 220, nessun taglio. Il disegno non
   ne soffre perche' l'SVG ha `preserveAspectRatio="none"` e si stira sulla
   scatola che gli si da'.
   📌 E' il comportamento che c'era prima di oggi in landscape: qui non si
   cambia, si conserva. */
@media (max-width: 1099.98px) and (orientation: landscape) and (max-height: 500px) {
  .dspmx--soft .pms__cone{
    height: 220px !important;
    min-height: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOOL ESTESO DEI SOFT — l'overlay (V-06-bis, 01/09/2026)
   Guscio minimo: dentro ci va lo STESSO widget della pagina, montato a
   tutto schermo. Niente stile proprio per i controlli — sarebbe un secondo
   vestito da tenere allineato al primo, che e' il difetto da cui nasce
   questa voce.
   ═══════════════════════════════════════════════════════════════════════ */
.pmsx {
  position: fixed;
  inset: 0;
  z-index: 9000;              /* come .ds-hl: sopra i rail e la titlebar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2.4vw, 40px);
  opacity: 0;
  transition: opacity .2s ease;
}
.pmsx.is-open { opacity: 1; }
.pmsx[hidden] { display: none; }

.pmsx__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, .82);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.pmsx__frame {
  position: relative;
  width: min(1400px, 100%);
  max-height: 100%;
  overflow: auto;
  border-radius: 18px;
  /* ⚠️ Era `var(--ds-c-surface, #121212)`: il fallback non e' mai entrato in
     gioco perche' la variabile ESISTE — vale rgba(255,255,255,0.05), cioe' un
     velo, e il modale lasciava vedere la pagina sotto. Ho scelto un token dal
     NOME senza guardare il VALORE. Ora e' lo stesso telaio del tool esteso
     Fresnel, dalla stessa fonte. */
  background:
    var(--ds-c-modal-sheen),
    var(--ds-c-modal-frame);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  transform: scale(.98);
  transition: transform .2s ease;
}
.pmsx.is-open .pmsx__frame { transform: scale(1); }

.pmsx__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;               /* bersaglio touch pieno, non un'iconcina */
  border-radius: 999px;
  border: 1px solid rgba(244, 181, 50, .32);
  background: rgba(0, 0, 0, .35);
  color: rgba(232, 228, 220, .95);
  font: 400 24px/1 "Oswald", system-ui, sans-serif;
  cursor: pointer;
}
.pmsx__close:hover { border-color: rgba(244, 181, 50, .6); }

.pmsx__body { padding: 8px; }
/* ⚠️ La × sta in alto a destra, dove il widget mette METRICO/IMPERIALE: senza
   questo spazio il pulsante di chiusura cade SOPRA le due pill e ne copre una.
   Visto a schermo, non calcolato. */
.pmsx .pm-head-right { padding-right: 52px; }

/* Su telefono il guscio prende tutto: i margini rubano larghezza al cono,
   che e' l'unica cosa per cui vale la pena aprire una vista estesa. */
@media (max-width: 1099.98px) {
  .pmsx { padding: 0; }
  .pmsx__frame { border-radius: 0; height: 100%; width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PARITA' CON LA RIGA CONTROLLI DELL'F7 (V-06-bis, fette 2 e 3)
   Misurato a 1440, non a occhio:
     F7    riga alta 32 px, gap 10, ogni figlio centrato a 16
     soft  riga alta 76 px — perche' ogni gruppo impila ETICHETTA sopra PILL
   L'allineamento verticale era gia' giusto (tutti centrati); a divergere era
   l'ALTEZZA, e con essa il ritmo della fascia.
   ⚠️ L'etichetta non si toglie: su F7 «SPOT / MID / FLOOD» si spiega da sola,
   qui «Tungsten / Daylight» accanto a «Senza accessori / Favo medio» senza
   dire CCT e ACCESSORIO diventa un elenco di parole. Si sposta IN LINEA,
   come fa gia' `pm-dist-ctrl` con «DISTANZA»: stessa grammatica, nessuna
   informazione persa, e i gruppi tornano tutti alti 32.
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠️ 03/09/2026 — questi quattro selettori erano ancorati a `#photometrics`,
   cioe' al widget IN PAGINA: nel tool esteso, dove il widget si rimonta sotto
   un altro id, la riga comandi tornava a impilarsi in verticale. E' la stessa
   trappola del gate delle celle a tap — una regola di COMPONENTE appesa al
   POSTO del primo montaggio. L'id resta accanto alla classe solo per non
   perdere specificita' contro le regole condivise di photometrics.css. */
#photometrics .pm-ctrl-row .pms__axis,
.pm--soft .pm-ctrl-row .pms__axis{
  display: flex;
  align-items: center;
  gap: 8px;
}
/* L'etichetta prende la stessa misura di quella della distanza: e' l'unica
   che c'era gia' e che David ha approvato sull'F7. */
#photometrics .pm-ctrl-row .pms__axis > .pm-dist-label-sm,
.pm--soft .pm-ctrl-row .pms__axis > .pm-dist-label-sm{
  flex: 0 0 auto;
  white-space: nowrap;
}
/* ⚠️ Le pill di un gruppo NON vanno a capo fra loro: se lo fanno, il gruppo
   diventa alto 53 invece di 32 e la fascia torna a respirare in modo diverso
   dall'F7. A mancare lo spazio, deve andare a capo la RIGA — cioe' un gruppo
   intero scende sotto, restando leggibile — non le pill dentro il gruppo. */
#photometrics .pm-ctrl-row .pms__axis > .pm-presets,
.pm--soft .pm-ctrl-row .pms__axis > .pm-presets{
  flex-wrap: nowrap;
}
#photometrics .pm-ctrl-row,
.pm--soft .pm-ctrl-row{
  flex-wrap: wrap;
  row-gap: 10px;
}

/* ── IL CARTELLINO «SELEZIONE DISCRETA» VA IN FONDO ALLA RIGA ──────────────
   03/09/2026 (V-80, David: «"DISCRETE SELECTION" che galleggia spaiato»).
   Sull'F7 il modo («FULL SPOT») chiude la riga comandi: è l'ultima cosa che
   si legge, e dice in che stato è tutto il resto. Qui il cartellino faceva
   lo stesso mestiere ma, non entrandoci per larghezza, andava a capo e si
   incolonnava a SINISTRA — dove l'occhio cerca un'etichetta di gruppo, non
   una dichiarazione di stato. Sembrava una cosa rimasta indietro.
   ⇒ `margin-left: auto` lo spinge a destra della propria riga: se ci sta,
   chiude la riga come sull'F7; se non ci sta, scende ma resta allineato alla
   fine, che è il posto in cui l'F7 lo ha insegnato a cercare.
   ⛔ Non si è ristretta la riga né accorciato il testo: «SELEZIONE DISCRETA»
   è la frase che dice al lighting director che quelli sono gli unici stati
   esistenti e che il widget non sta interpolando. Farla stare a forza
   avrebbe risolto l'allineamento togliendo l'informazione. */
#photometrics .pm-ctrl-row > .pm-mode-chip,
.pm--soft .pm-ctrl-row > .pm-mode-chip{
  margin-left: auto;
}

/* ── I parametri sotto il valore della tile F/STOP ────────────────────────
   Un diaframma senza ISO non e' un dato: i parametri vanno DETTI. Ma dentro
   il valore facevano andare il numero a capo, e un numero spezzato si legge
   peggio di un numero senza contesto. Riga propria, corpo minore. */
#photometrics.pm--soft .pm-fstop-main .pms__premessa,
.pmsx .pm-fstop-main .pms__premessa{
  margin-top: 2px;
  font: 600 10px/1.2 "Oswald", system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-c-text-secondary, rgba(255,255,255,.55));
  white-space: nowrap;
}

/* ── distanza: trascinabile anche col dito ──────────────────────────────────
   02/09/2026. Il gruppo distanza si regola trascinando in ORIZZONTALE. Senza
   questa riga, su un telefono il browser interpreta il gesto come uno scroll
   e se lo prende lui: il trascinamento «non funziona» pur essendoci.
   ⚠️ `pan-y` e non `none`: `none` avrebbe tolto anche lo scorrimento
   VERTICALE della pagina partendo da qui — chi scorre la scheda prodotto col
   pollice appoggiato per caso sul controllo si sarebbe trovato la pagina
   bloccata. Cosi' il verticale resta al browser e l'orizzontale a noi. */
#photometrics.pm--soft .pm-dist-ctrl{
  touch-action: pan-y;
}


/* ── < 1400: quello che le due celle rendono superfluo ──────────────────────
   02/09/2026. Nessuno di questi comandi e' stato TOLTO: e' stato ASSORBITO
   dal tap sulle celle. Lasciarne uno acceso accanto alla cella che fa la
   stessa cosa non e' ridondanza innocua — sono due comandi per un solo stato,
   e chi guarda non sa quale dei due sia quello buono. */
@media (max-width: 1399.98px) {
  /* Il piano ORIZZONTALE/VERTICALE lo comanda la cella 2.
     ⚠️ E' la variante che David giudica dal telefono («decidiamo vedendolo»):
     se non lo convince, questa regola torna indietro ed e' la cella a smettere
     di comandare, non il comando a sparire. */
  /* ⭐ V-96 (04/09/2026) — LA STESSA TRAPPOLA DI V-95, TERZA VOLTA.
     Questa regola era ancorata a `#photometrics`, cioe' al POSTO del primo
     montaggio, non al COMPONENTE. Nel tool esteso il widget si rimonta sotto
     `#ds-photometrics-modal-host` e la regola non lo raggiungeva: la fila di
     pill spariva lo stesso (la spegne `body.ds-vp-app .dspmx .pm-presets` di
     `_mobile-touch.css`, che vale per tutto cio' che sta nel tool esteso) ma
     l'etichetta «PIANO» restava, orfana, larga 31,6 px.
     🔑 Verificato prima di scegliere: nel tool esteso la cella 2 C'E' ed e'
     lo STESSO stato — tap su di essa cicla beamH → beamV → impronta e le pill
     del piano seguono (aria-pressed). Quindi qui non manca un comando: manca
     la meta' della regola che toglie il comando DOPPIO. Dare a PIANO un
     dropdown avrebbe rimesso due strade per un solo stato — esattamente cio'
     che questo blocco esiste per impedire.
     ⛔ `#photometrics` resta accanto solo per non perdere specificita' contro
     le regole condivise di photometrics.css. */
  body.ds-vp-app #photometrics.pm--soft [data-pms-group="plane"],
  body.ds-vp-app .pm--soft [data-pms-group="plane"]{
    display: none !important;
  }
}

/* Indicatore del ciclo, cella 2 del soft: TRE modi, non quattro.
   I pallini della cella 1 arrivano gia' da `_mobile-touch.css`, perche' ho
   riusato le sue stesse chiavi (illuminamento/fstop/ev/candela) — quelli non
   li riscrivo. Qui servono solo perche' un soft non ha «field»: ha due piani
   piu' l'impronta, e tre pallini devono essere tre. */
@media (max-width: 1399.98px) {
  body.ds-vp-app #photometrics.pm--soft .pm-merge-cell-2::after{ content: "● ○ ○"; }
  body.ds-vp-app #photometrics.pm--soft .pm-merge-cell-2[data-mode="beamV"]::after{ content: "○ ● ○"; }
  body.ds-vp-app #photometrics.pm--soft .pm-merge-cell-2[data-mode="impronta"]::after{ content: "○ ○ ●"; }
}

/* ── < 1400: le file di pill diventano dropdown, come sull'F7 ───────────────
   02/09/2026. Sopra, nel blocco < 1100, c'e' una deroga che RIACCENDEVA
   `.pm-presets` sul soft: era giusta finche' il soft non aveva il sostituto —
   il Fresnel le pill le nasconde perche' al loro posto mette un trigger, e
   noi quel trigger non lo costruivamo. Ora lo costruiamo.
   ⚠️ Ma la deroga NON si toglie in blocco: `.pm-presets` la usa anche la riga
   delle UNITA' (METRICO/IMPERIALE), che un dropdown non ce l'ha. Si spegne
   solo dove esiste il sostituto, e lo dice una classe messa dal JS
   (`pms__axis--dropdown`) — non una deduzione del CSS. */
@media (max-width: 1399.98px) {
  body.ds-vp-app #photometrics.pm--soft .pms__axis--dropdown > .pm-presets{
    display: none !important;
  }
  body.ds-vp-app #photometrics.pm--soft .pms__mobile-select{
    display: inline-flex !important;
    align-items: center;
  }
  /* Bersagli touch: 44 px e' la soglia, e le pill del soft stavano a 26.
     Non e' una preferenza estetica — sotto quella misura il dito prende il
     vicino, e su una riga di tre voci il vicino e' sempre a 6 px. */
  body.ds-vp-app #photometrics.pm--soft .pm-head-right .pill,
  body.ds-vp-app #photometrics.pm--soft .pms__tools .pill,
  body.ds-vp-app #photometrics.pm--soft .pm-presets .pill{
    min-height: 44px;
    padding: 0 14px;
    font-size: 13px;
  }
}
/* Desktop: il guscio del dropdown non si vede mai — li' comandano le pill. */
#photometrics.pm--soft .pms__mobile-select{ display: none; }

/* ── < 1400: quello che l'F7 NON mostra in pagina sul telefono ──────────────
   02/09/2026. Contati i comandi dei due widget a 390: l'F7 ne mostra 11 e fra
   quelli NON ci sono unita' (METRICO/IMPERIALE), MARKER e RESET — vivono nel
   tool esteso. Il soft li mostrava tutti, ed e' meta' del motivo per cui la
   sua riga comandi era alta 140 px contro 44.
   ⚠️ Non li tolgo perche' «stanno stretti»: li tolgo perche' la regola di
   David e' che i due tool si comportino allo stesso modo, e questa e' una
   scelta gia' presa sull'F7. Se un giorno si decide che su mobile le unita'
   servono, si cambia LI' e poi qui — non solo qui, o tornano a divergere.
   📌 Restano tutti su desktop e nel tool esteso: nessuna funzione persa. */
@media (max-width: 1399.98px) {
  body.ds-vp-app #photometrics.pm--soft .pms__markers,
  body.ds-vp-app #photometrics.pm--soft .pms__reset,
  body.ds-vp-app #photometrics.pm--soft .pm-head-right > .pm-presets{
    display: none !important;
  }
}

/* ── LE CELLE A TAP ESISTONO SOLO SOTTO I 1400 ─────────────────────────────
   02/09/2026, David da desktop: «tool soft ancora sfora e porta numeri doppi
   dove non servono». Erano le due celle mobile, montate sempre e stilizzate
   solo sotto il gate: sopra i 1400 restavano due righe di testo crudo che
   ripetevano i valori dei riquadri.

   ⚠️ E la rete di sicurezza c'era gia' — non ha retto per un motivo che vale
   la pena scrivere. In `_mobile-touch.css` esiste una regola commentata
   «Desktop: merge cells non si vedono mai» che fa
   «#photometrics .pm-mobile-merge : display none»,

   ...scritta DENTRO `@media (max-width: 1399.98px)`. 🔑 Una regola che dice
   «desktop» e vive nel blocco del mobile: sopra i 1400 non e' mai esistita.
   Verificato interrogando il CSSOM a 1920 — tutte e tre le regole che
   nascondono `.pm-mobile-merge` risultano `attiva: false`.
   ⛔ E non se n'era accorto nessuno perche' sull'F7 il markup delle celle il
   JS non lo crea, su desktop: la protezione non ha mai dovuto proteggere
   niente. Il soft, che le monta sempre, ha solo reso visibile un buco che
   c'era gia'.

   ⇒ Qui la regola sta FUORI da ogni `@media`, cosi' vale in tutte le fasce,
   compresa la 1100-1399. Sotto i 1400 `_mobile-touch.css` le riaccende con
   `display:grid !important`, che vince su questa: il gate resta uno solo e
   sta li', non duplicato qui.

   ── 03/09/2026 — LA STESSA CAUSA, UN GRADINO PIU' IN LA' ───────────────────
   David: nella VISTA ESTESA ricompaiono i testi nudi duplicati
   («ILLUMINANCE 455lux…» sotto i riquadri). Erano di nuovo le celle a tap, e
   di nuovo il gate non le copriva — ma stavolta non per il `@media`: per l'ID.
   La regola era `#photometrics.pm--soft`, e `#photometrics` e' l'id del widget
   IN PAGINA. Nel tool esteso il widget si RIMONTA dentro un altro host
   (`#ds-photometrics-modal-host`), che quell'id non ce l'ha: fuori dal gate,
   celle visibili, testo crudo sotto le tile.
   🔑 E' la stessa lezione dell'8f4c3c3 spostata di un livello: li' la regola
   era scritta e non in vigore per via del media query, qui e' in vigore ma
   ancorata a un PUNTO del documento invece che al COMPONENTE. Un widget che
   si puo' montare due volte non puo' avere le sue protezioni appese all'id
   del primo montaggio.
   ⇒ Il gate si aggancia a `.pm--soft`, che e' la classe che il widget si
   mette addosso da solo a ogni build, ovunque venga montato. Copre in pagina,
   nel tool esteso e in qualunque terzo posto che verra'. Sotto i 1400
   `_mobile-touch.css` le riaccende con `!important`, che vince: il
   comportamento mobile non cambia di una riga.

   ── E IL TERZO TEMPO, che e' quello che davvero teneva accese le celle ──────
   ⚠️⚠️ IL COMMENTO QUI SOPRA SI CHIUDEVA DA SOLO A META'. Conteneva, citata
   per spiegarla, la regola di `_mobile-touch.css` scritta fra i suoi
   delimitatori: e i commenti CSS NON SI ANNIDANO. Il primo delimitatore di
   chiusura interno chiudeva il commento, e da li' in poi il browser leggeva
   CSS: la riga citata diventava una REGOLA VERA, la prosa che seguiva veniva
   scartata come spazzatura, e nel recupero il parser si mangiava il selettore
   della regola vera che stava sotto.
   🔑 Il risultato, misurato sul CSSOM: nel foglio non esisteva nessuna regola
   `.pm--soft .pm-mobile-merge` — esisteva `#photometrics .pm-mobile-merge`,
   che nessuno aveva scritto. In pagina funzionava (l'id c'e'), nel tool
   esteso no. Il fix del 02/09 sembrava a posto perche' il commento aveva
   fabbricato per sbaglio esattamente la regola che serviva li' — e solo li'.
   ⛔ Da cui la regola di mestiere: MAI citare CSS dentro un commento CSS coi
   suoi delimitatori. Si cita a parole, come tre righe piu' su. Un commento
   che si chiude da solo non da' nessun errore: cambia il foglio in silenzio,
   e quello che leggi non e' quello che gira. */
.pm--soft .pm-mobile-merge{
  display: none;
}

/* ⚠️ E sotto i 1400, nel TOOL ESTESO, vale il simmetrico: le regole di
   `_mobile-touch.css` che riaccendono le celle sono anch'esse scritte su
   `#photometrics` (e su `.dspmx`, che qui c'e'). Dentro il modale soft il
   contenitore e' `.dspmx`, quindi la riaccensione arriva — ma la griglia a
   quattro card no, e resterebbero le DUE letture insieme. Si spegne qui,
   ancorata al componente e non al posto. */
@media (max-width: 1399.98px){
  .dspmx--soft .pm--soft .pm-mobile-merge{ display: grid; }
  .dspmx--soft .pm--soft .pm-grid{ display: none; }
}

/* ── Il cartello dell'assenza dichiarata ────────────────────────────────────
   02/09/2026. Sta DENTRO l'area del grafico e ne tiene l'altezza: se l'area
   sparisse, il resto della pagina salterebbe a ogni cambio di accessorio, e
   un layout che balla e' esso stesso un messaggio — dice «qualcosa non va».
   Deliberatamente sobrio: nessun rosso, nessuna icona d'allarme. Non e' un
   errore, e' un dato che non c'e'. Un cartello che grida trasforma una
   mancanza in un guasto. */
#photometrics.pm--soft .pms__cartello,
.pm--soft .pms__cartello{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 120px;
  padding: 18px 20px;
  text-align: center;
}
/* ⚠️⚠️ 03/09/2026 — I 120 PX DI NERO SOTTO IL CONO, e non era il cono.
   Misurato a 1920: `.pm-cone-host` alto 482 px con dentro un disegno da 340.
   I 142 mancanti erano QUESTO cartello: il JS lo spegne con l'attributo
   `hidden`, ma `hidden` è solo `display:none` nel foglio di stile del
   browser — e una qualunque regola d'autore che dichiari `display` lo
   riaccende. La riga qui sopra ne dichiara uno, quindi il cartello restava
   nel flusso, alto 120 px, invisibile e ingombrante.
   🔑 È la banda vuota che David chiamava «contenitore enorme vuoto»: non uno
   spazio scelto male, un elemento nascosto che occupava posto. Un nodo
   invisibile che pesa è peggio di un nodo visibile sbagliato — quello lo
   vedi e lo correggi, questo lo cerchi nei margini di qualcun altro.
   ⛔ Regola di mestiere: ogni volta che si dà un `display` a un elemento che
   il JS spegne con `hidden`, si scrive anche la sua clausola `[hidden]`.
   Sono due righe che vanno sempre insieme. */
#photometrics.pm--soft .pms__cartello[hidden],
.pm--soft .pms__cartello[hidden]{
  display: none !important;
}
#photometrics.pm--soft .pms__cartello-t{
  font: 600 12px/1.3 'Oswald', system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ds-c-text-secondary);
}
#photometrics.pm--soft .pms__cartello-c{
  font: 400 12px/1.5 'Oswald', system-ui, sans-serif;
  color: var(--ds-c-text-tertiary);
  max-width: 52ch;
  margin: 0 auto;
}
/* La riga che salva i numeri qui sotto: sottolineata dall'accento del
   sistema, perche' e' l'unica parte del cartello che porta una buona
   notizia. */
#photometrics.pm--soft .pms__cartello-ok{
  font: 600 11px/1.4 'Oswald', system-ui, sans-serif;
  letter-spacing: .06em;
  color: var(--ds-c-accent, #F4B532);
}

/* ═══════════════════════════════════════════════════════════════════════════
   IL CONFRONTO NELLA GAMMA (tool esteso soft) — sess.69, 02/09/2026
   Vive solo dentro l'overlay `.pmsx`: in pagina il widget resta quello che e'.
   ═══════════════════════════════════════════════════════════════════════════ */
.pmsc{
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--ds-c-surface-border);
}
.pmsc__titolo{
  position: relative;
  margin: 0 0 6px;
  padding-left: 14px;
  font: 600 15px/1.2 'Oswald', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ds-c-text);
}
/* Barra titolo: il primo dei due accenti del design system. */
.pmsc__titolo::before{
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  background: linear-gradient(180deg, var(--ds-brand-yellow-dark), var(--ds-brand-yellow-light));
}
.pmsc__sub{
  margin: 0 0 18px;
  font: 400 12px/1.5 'Oswald', system-ui, sans-serif;
  color: var(--ds-c-text-tertiary);
}
.pmsc__attesa{
  padding: 24px 0;
  font: 400 13px/1.4 'Oswald', system-ui, sans-serif;
  color: var(--ds-c-text-tertiary);
}
.pmsc__barra{
  display: flex; flex-wrap: wrap;
  gap: 14px 26px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.pmsc__gruppo{ display: flex; flex-direction: column; gap: 6px; }
.pmsc__etichetta{
  font: 500 10px/1 'Oswald', system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ds-c-text-tertiary);
}
.pmsc__pills{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pmsc__dist{
  width: 62px; padding: 4px 6px;
  border: 1px solid var(--ds-c-surface-border);
  border-radius: 8px;
  background: transparent;
  font: 700 13px/1 'Oswald', system-ui, sans-serif;
  color: var(--ds-c-text);
  text-align: right;
  -moz-appearance: textfield;
}
.pmsc__dist::-webkit-inner-spin-button,
.pmsc__dist::-webkit-outer-spin-button{ -webkit-appearance: none; display: none; }
.pmsc__unita{
  font: 700 10px/1 'Oswald', system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ds-c-text-tertiary);
}
.pmsc__modelli{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
/* La base non e' cliccabile e si vede: bordo pieno invece di outline. */
.pmsc__modello--base{
  border-color: var(--ds-c-accent) !important;
  opacity: 1 !important;
  cursor: default;
}

/* ── la tabella ────────────────────────────────────────────────────────────
   ⚠️ Scorre DENTRO il proprio contenitore, non fa scorrere la pagina: con
   dieci modelli selezionabili le colonne diventano tante, e una tabella che
   sfonda il bordo e' il difetto che abbiamo gia' pagato due volte oggi. */
.pmsc__tabella-wrap{ overflow-x: auto; }
.pmsc__tabella{
  width: 100%;
  border-collapse: collapse;
  font-family: 'Oswald', system-ui, sans-serif;
}
.pmsc__tabella th, .pmsc__tabella td{
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--ds-c-surface-border);
  white-space: nowrap;
}
.pmsc__ang{ border-bottom: 1px solid var(--ds-c-surface-border); }
.pmsc__th{ vertical-align: bottom; }
.pmsc__th--base .pmsc__code{ color: var(--ds-c-accent, #F4B532); }
.pmsc__code{
  display: block;
  font: 700 14px/1.2 'Oswald', system-ui, sans-serif;
  letter-spacing: .04em;
  color: var(--ds-c-text);
}
/* La provenienza del numero, sotto il nome del modello. Piccola di proposito:
   e' una nota a pie' di colonna, non un dato. */
.pmsc__fonte{
  display: block;
  margin-top: 2px;
  font: 400 9.5px/1.3 'Oswald', system-ui, sans-serif;
  letter-spacing: .02em;
  color: var(--ds-c-text-tertiary);
  white-space: normal;
  max-width: 15ch;
}
.pmsc__rh{
  text-align: left;
  font: 500 12px/1.3 'Oswald', system-ui, sans-serif;
  color: var(--ds-c-text-secondary);
}
.pmsc__u{
  margin-left: 6px;
  font-size: 10px;
  color: var(--ds-c-text-tertiary);
}
.pmsc__v{
  font: 700 15px/1.1 'Oswald', system-ui, sans-serif;
  color: var(--ds-c-text);
}
.pmsc__td--base .pmsc__v{ color: var(--ds-c-accent, #F4B532); }
/* Il trattino non e' un valore: e' piu' pallido di un valore, cosi' si vede
   che manca invece di sembrare uno zero scritto male. */
.pmsc__vuoto{
  font: 400 15px/1.1 'Oswald', system-ui, sans-serif;
  color: var(--ds-c-text-tertiary);
  opacity: .7;
}
.pmsc__d{
  display: block;
  margin-top: 2px;
  font: 500 10.5px/1 'Oswald', system-ui, sans-serif;
  letter-spacing: .03em;
  color: var(--ds-c-text-tertiary);
}
/* ⚠️ Verde e ambra solo dove «meglio» ha un senso — sull'illuminamento.
   Sugli angoli il delta resta grigio: un fascio piu' stretto non e' peggio,
   e' un'altra scelta. Colorarlo direbbe una cosa che non e' vera. */
.pmsc__d--su{ color: #5CB85C; }
.pmsc__d--giu{ color: var(--ds-c-accent, #F4B532); }
.pmsc__legenda{
  margin: 14px 0 0;
  font: 400 11px/1.5 'Oswald', system-ui, sans-serif;
  color: var(--ds-c-text-tertiary);
  max-width: 72ch;
}

@media (max-width: 1099.98px) {
  .pmsc__tabella th, .pmsc__tabella td{ padding: 8px 9px; }
  .pmsc__code{ font-size: 13px; }
  .pmsc__v{ font-size: 14px; }
  .pmsc__modelli .pill{ min-height: 44px; }
}

/* La riga che compare quando manca la BASE del confronto. Sta SOPRA la
   tabella, non sotto: se stesse in fondo, chi legge avrebbe gia' interpretato
   le colonne come un confronto prima di scoprire che non lo e'. */
.pmsc__senzabase{
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--ds-c-accent, #F4B532);
  background: rgba(244,181,50,.07);
  font: 400 11.5px/1.5 'Oswald', system-ui, sans-serif;
  color: var(--ds-c-text-secondary);
  max-width: 78ch;
}