/* === SKIN v5.1: Photometrics — START === */
.pm{ --card:#fff; }

/* ── HEADER ROW: solo titolo ────────────────────────────── */
.pm-header-row{
  margin-bottom: 10px;
}
.pm-header-row .h3{
  margin: 0;
  /* Proprietà separate invece di font shorthand: Chrome non parsava clamp() nella shorthand */
  font-family: "Oswald", system-ui;
  font-weight: 600;
  font-size: clamp(.88rem, 1vw + .5rem, 1.05rem);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(0,0,0,.75);
  padding-left: 14px;
  position: relative;
}
.pm-header-row .h3::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: 32px; /* uguale a DMX/ACC span bar */
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #F4B532, #F3E955);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-header-row .h3{
  color: rgba(255,255,255,.78);
}

/* ── CONTEXT BAR ────────────────────────────────────────── */
.pm-context{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pm-ctx-product{
  font: 800 .78rem/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(0,0,0,.80);
  background: rgba(0,0,0,.08);
  padding: 2px 7px;
  border-radius: 4px;
}
.pm-ctx-sep{
  font: 400 .72rem/1 "Oswald", system-ui;
  color: rgba(0,0,0,.28);
  user-select: none;
}
.pm-ctx-range{
  font: 600 .82rem/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(0,0,0,.60);
}
.pm-ctx-power{
  font: 500 .80rem/1 "Oswald", system-ui;
  color: rgba(0,0,0,.58);
  letter-spacing: .02em;
}

/* dark mode context */
body:is(.ds-dark, [data-dspmx-open]) .pm-ctx-product{
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-ctx-sep   { color: rgba(255,255,255,.22); }
body:is(.ds-dark, [data-dspmx-open]) .pm-ctx-range { color: rgba(255,255,255,.65); }
body:is(.ds-dark, [data-dspmx-open]) .pm-ctx-power { color: rgba(255,255,255,.42); }

.pm-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ── CONTEXT GROUP (sx) — title pill + range + power ── */
.pm-context{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

/* ── TITLE PILL: stessa altezza dei pulsanti (32px) ── */
.pm-ctx-product{
  display: inline-flex;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 8px;
  font: 800 .78rem/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(0,0,0,.85);
  background: rgba(0,0,0,.09);
  flex-shrink: 0;
}

/* ── SEPARATORE · ── */
.pm-ctx-sep{
  font: 400 .78rem/1 "Oswald", system-ui;
  color: rgba(0,0,0,.28);
  user-select: none;
  flex-shrink: 0;
}

/* ── RANGE e POWER — stessa dimensione pills ── */
.pm-ctx-range{
  font: 600 .78rem/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(0,0,0,.68);
}
.pm-ctx-power{
  font: 500 .78rem/1 "Oswald", system-ui;
  color: rgba(0,0,0,.55);
  letter-spacing: .02em;
}

/* ── GRUPPO DX: solo unit buttons ── */
.pm-head-right{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* CCT pills inline dentro .pm-context, separato dal testo con un piccolo gap */
.pm-context .pm-cct{
  margin-left: 4px;
}

.pm-cct, .pm-units{ display:flex; gap:8px; align-items:center; }

/* Pills Photometrics — identiche a .ds-btn .ds-btn--toggle del sistema */
.pm .pill{
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; white-space: nowrap;
  /* sess.24 chiusura v2 slim-down aggressivo (utente: "sempre ciccioni"):
     dimensioni ulteriormente ridotte, shadow rimossa totalmente,
     background semi-trasparente per integrazione superficie page.
     Pattern pre-25 verso flat Linear/Vercel. Sess.25 P0 surface tier
     farà il flat-ten ufficiale + glow on active. */
  height: 26px;
  padding: 0 .65rem;
  box-sizing: border-box;
  border-radius: 999px;
  font-family: "Oswald", system-ui;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ds-c-text, rgba(0,0,0,.82));
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease,
              color .18s ease, transform .12s ease;
}
.pm .pill:hover:not(:disabled):not(.active):not([aria-pressed="true"]):not(.pm-reset-btn){
  background: rgba(255,213,0,.18);
  border-color: rgba(200,168,0,.40);
}
.pm .pill.active,
.pm .pill[aria-pressed="true"]{
  background: #F4B532;   /* brand yellow — non ambra */
  color: #111;
  border-color: #C9A800;
  /* sess.24 chiusura v2 slim-down aggressivo: zero shadow, solo yellow
     fill + border. Glow on active arriverà in sess.25 surface tier. */
  box-shadow: none;
}
.pm .pill:focus-visible{
  outline: 2px solid #F4B532;
  outline-offset: 2px;
}

/* ── SINGLE CONTROL ROW ──────────────────────────────────────────────────── */
.pm-ctrl-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin: 10px 0;
  min-width: 0;
}

/* Distance compact control — stessa altezza delle pills (32px) */
.pm-dist-ctrl{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  box-sizing: border-box;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 999px;
  padding: 0 10px 0 9px;
  cursor: ew-resize;
  user-select: none;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.07), inset 0 1px rgba(255,255,255,.95);
  transition: border-color .12s, box-shadow .12s;
}
.pm-dist-ctrl:hover{
  border-color: rgba(244,181,50,.45);
  box-shadow: 0 0 0 2px rgba(244,181,50,.14);
}
.pm-dist-label-sm{
  font: 600 10px/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(0,0,0,.52);
  padding-right: 3px;
}
.pm-dist{ display:flex; align-items:center; gap:7px; }

/* legacy .pm-row kept for any other uses */
.pm-row{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 12px;
  margin: 10px 0;
}
.pm-row label,
.pm-dist-label{
  font: 700 10px/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(0,0,0,.44);
  white-space: nowrap;
}

/* custom ▲▼ spinner stack — left of the value */
.pm-dist-spin{
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.pm-spin-btn{
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 14px;
  height: 10px;
  font-size: 5.5px;
  line-height: 1;
  color: rgba(0,0,0,.38);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: color .10s, background .10s;
}
.pm-spin-btn:hover{
  color: #C88A00;
  background: rgba(244,181,50,.14);
}
.pm-spin-btn:active{ background: rgba(244,181,50,.28); }

/* number input — hide native spinners, clean appearance */
.pm-dist-val{
  width: 52px;
  padding: 4px 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  font: 700 13px/1 "Oswald", system-ui;
  color: rgba(0,0,0,.82);
  text-align: right;
  -moz-appearance: textfield;
}
.pm-dist-val::-webkit-inner-spin-button,
.pm-dist-val::-webkit-outer-spin-button{
  -webkit-appearance: none;
  display: none;
}
.pm-dist-val:focus{
  outline: none;
  color: rgba(0,0,0,.95);
}

/* unit label (m / ft) */
.pm-dist-unit{
  font: 700 9.5px/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(0,0,0,.52);
  flex-shrink: 0;
}

/* range slider — clean amber thumb */
.pm-dist-range{
  flex: 1;
  min-width: 60px;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  cursor: pointer;
  outline: none;
}
.pm-dist-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #F4B532;
  border: 2px solid rgba(255,255,255,.90);
  box-shadow: 0 1px 5px rgba(0,0,0,.22);
  cursor: pointer;
  transition: transform .12s ease;
}
.pm-dist-range::-webkit-slider-thumb:hover{ transform: scale(1.15); }
.pm-dist-range::-moz-range-thumb{
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #F4B532;
  border: 2px solid rgba(255,255,255,.90);
  box-shadow: 0 1px 5px rgba(0,0,0,.22);
  cursor: pointer;
}
.pm-dist-range:focus{ outline: none; }
.pm-dist-range:focus::-webkit-slider-thumb{
  box-shadow: 0 0 0 3px rgba(244,181,50,.28), 0 1px 5px rgba(0,0,0,.22);
}

/* angle slider — same amber brand style as distance slider */
.pm-ang-range{
  flex: 1;
  min-width: 60px;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  cursor: pointer;
  outline: none;
}
.pm-ang-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #F4B532;
  border: 2px solid rgba(255,255,255,.90);
  box-shadow: 0 1px 5px rgba(0,0,0,.22);
  cursor: pointer;
  transition: transform .12s ease;
}
.pm-ang-range::-webkit-slider-thumb:hover{ transform: scale(1.15); }
.pm-ang-range::-moz-range-thumb{
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #F4B532;
  border: 2px solid rgba(255,255,255,.90);
  box-shadow: 0 1px 5px rgba(0,0,0,.22);
  cursor: pointer;
}
.pm-ang-range:focus{ outline: none; }
.pm-ang-range:focus::-webkit-slider-thumb{
  box-shadow: 0 0 0 3px rgba(244,181,50,.28), 0 1px 5px rgba(0,0,0,.22);
}

.pm-ang-val{
  font: 700 13px/1 "Oswald", system-ui;
  letter-spacing: .02em;
  color: rgba(0,0,0,.70);
  margin-left: 4px;
  flex-shrink: 0;
  min-width: 38px;
  text-align: right;
}
.pm-angle{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
}

/* canvas cono */
.pm-cone-host{
  background: color-mix(in oklab, #fff 82%, transparent);
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px; padding:10px; margin:12px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.pm-cone .mk-info{ fill:#222; opacity:.95; }

/* griglia KPI */
.pm-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.pm-card{
  background: color-mix(in oklab, #fff 82%, transparent);
  border:1px solid rgba(0,0,0,.08); border-radius:14px;
  padding: 10px 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
  align-items: center;       /* horizontal center */
  justify-content: center;   /* vertical center */
  text-align: center;
  min-height: 72px;
}
.pm-card .pm-h{
  font: 700 9.5px/1 "Oswald", system-ui;
  text-transform: uppercase; letter-spacing: .09em;
  color: rgba(0,0,0,.52);
  margin-bottom: 5px;
}
/* big value */
.pm-card .pm-value{
  font: 900 30px/1 "Oswald", system-ui;
  letter-spacing: -.01em;
  color: rgba(0,0,0,.88);
  display: flex;
  align-items: baseline;
  gap: 3px;
}
/* inline unit (injected via JS innerHTML) */
.pm-val-unit{
  font: 700 13px/1 "Oswald", system-ui;
  letter-spacing: 0;
  color: rgba(0,0,0,.52);
}
.pm-card .pm-sub{
  font: 400 10.5px/1 system-ui, sans-serif;
  color: rgba(0,0,0,.42);
  margin-top: 4px;
}

/* ── COMPARE MODE — multi-prodotto rows in card bottom ──────────────────
   In compare attivo (grid.pm-grid--compare) le card si espandono in
   altezza per mostrare base + N competitor. Ogni competitor è una row
   con label + valore (ed eventuale delta vs base). */
.pm-grid--compare{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pm-grid--compare .pm-card{
  align-items: stretch;
  min-height: 96px;
  padding-top: 8px;
  padding-bottom: 10px;
}
.pm-grid--compare .pm-card .pm-value{
  align-self: center;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(0,0,0,.10);
  font-size: 22px;
}

/* F-stop card in compare mode: MANTIENE il layout row originale (toggles
   in colonna sx, valore al centro come widget pagina). L'unica modifica
   è nel main column: aggiunge align-items: stretch per consentire alle
   compare-rows iniettate full-width, e dashed-border separator sotto
   il valore base per uniformare con le altre card.
   Spacer ::after dx rimosso per dare più spazio orizzontale al main
   (toggles + valore + compare-rows). */
.pm-grid--compare .pm-card.pm-fstop{
  /* Layout row originale conservato (NO flex-direction: column) */
  align-items: stretch !important;
  padding: 8px 10px 10px !important;
}
.pm-grid--compare .pm-card.pm-fstop::after{
  display: none !important;
}
.pm-grid--compare .pm-card.pm-fstop .pm-fstop-toggles{
  align-self: center;  /* toggles centrati verticalmente nel row */
  flex-shrink: 0;
}
.pm-grid--compare .pm-card.pm-fstop .pm-fstop-main{
  align-items: stretch !important;  /* compare-rows full-width */
  justify-content: flex-start !important;
  /* text-align CENTER per il valore base + mode-label (le compare-rows
     hanno text-align dedicato sul .pm-card-compare-row). Bug fix: avevo
     messo text-align: left che spostava il valore F-stop a sinistra. */
  text-align: center;
}
.pm-grid--compare .pm-card.pm-fstop .pm-fstop-mode-label{
  text-align: center;
  align-self: center;
}
.pm-grid--compare .pm-card.pm-fstop .pm-fstop-val{
  text-align: center !important;
  font-size: 22px;
  width: 100%;
  align-self: center !important;
  display: block !important;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(0,0,0,.10);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-grid--compare .pm-card.pm-fstop .pm-fstop-val{
  border-bottom-color: rgba(255,255,255,.10);
}
/* Compare rows: GRID 50/50 RIGIDO. Iter v3 dopo che il flex centered
   cluster gap-fisso (v2) lasciava ancora micro-disallineamenti quando
   contenuti per riga avevano lunghezze diverse (label corte vs lunghe,
   OOR vs valore numerico). Soluzione: grid 1fr 1fr fisso → la colonna
   sx è SEMPRE la metà della card (label right-aligned al gap centrale),
   la colonna dx è SEMPRE l'altra metà (valore left-aligned al gap).
   Il "gap centrale" è ora la mezzeria della card, costante per tutte
   le righe e tutte le card. Cross-card pixel-aligned. */
.pm-card-compare-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  column-gap: 8px;
  padding: 4px 8px;
  font: 400 11px/1.2 system-ui;
}
.pm-card-compare-row + .pm-card-compare-row{
  border-top: 1px solid rgba(0,0,0,.04);
}
.pm-card-compare-label{
  font: 600 9.5px/1.2 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;          /* permette ellipsis dentro grid 1fr */
}
.pm-card-compare-val{
  font: 700 13px/1.2 "Oswald", system-ui;
  color: rgba(0,0,0,.85);
  font-variant-numeric: tabular-nums;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: nowrap;
  min-width: 0;
}
.pm-card-compare-unit{
  font: 600 10px/1 "Oswald", system-ui;
  color: rgba(0,0,0,.50);
}
.pm-card-compare-oor{
  font: 500 10px/1 "Oswald", system-ui;
  letter-spacing: .04em;
  color: rgba(0,0,0,.40);
  font-style: italic;
  text-transform: lowercase;
}
.pm-card-compare-row.is-oor .pm-card-compare-val{
  font-weight: 500;
}
.pm-card-compare-delta{
  font: 700 9px/1 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
}
.pm-card-compare-delta.is-win{
  background: rgba(80,200,120,.18);
  color: #2d8d50;
}
.pm-card-compare-delta.is-loss{
  background: rgba(220,90,80,.18);
  color: #c33b30;
}
.pm-card-compare-delta.is-equal{
  background: rgba(180,175,160,.15);
  color: rgba(0,0,0,.50);
}

/* Dark mode variants */
body:is(.ds-dark, [data-dspmx-open]) .pm-grid--compare .pm-card .pm-value{
  border-bottom-color: rgba(255,255,255,.10);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-card-compare-row + .pm-card-compare-row{
  border-top-color: rgba(255,255,255,.05);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-card-compare-label{ color: rgba(255,255,255,.55); }
body:is(.ds-dark, [data-dspmx-open]) .pm-card-compare-val{ color: rgba(255,255,255,.92); }
body:is(.ds-dark, [data-dspmx-open]) .pm-card-compare-unit{ color: rgba(255,255,255,.50); }
body:is(.ds-dark, [data-dspmx-open]) .pm-card-compare-oor{ color: rgba(255,255,255,.40); }
body:is(.ds-dark, [data-dspmx-open]) .pm-card-compare-delta.is-win{ color: #6FD08A; }
body:is(.ds-dark, [data-dspmx-open]) .pm-card-compare-delta.is-loss{ color: #ff8a82; }
body:is(.ds-dark, [data-dspmx-open]) .pm-card-compare-delta.is-equal{ color: rgba(255,255,255,.50); }

/* ════════════════════════════════════════════════════════════════════════
   COMPARE TABLE UNIFICATA (sessione 19 — TIER0-B fix allineamento)
   ────────────────────────────────────────────────────────────────────────
   Sostituisce i compare-rows iniettati DENTRO le 4 cards. Strategia:
   - Compare attivo (cols > 1): nasconde .pm-grid (le 4 cards), mostra
     tabella sotto con grid 5 colonne pixel-perfect (label + 4 metriche).
   - Compare disattivo: cards visibili, tabella nascosta.
   - Allineamento garantito da CSS grid colonne 1fr (uguali per costruzione).
   - Toggle direzione delta in alto-dx (vs base / vs comp / abs).
   - Pill qualità ottica su Ø Field (ratio FA/BA vs base, neutra).
   ──────────────────────────────────────────────────────────────────────── */

/* Hide cards in compare mode — display:none totale: il valore base è
   replicato nella prima riga della tabella, quindi nessuna info perduta. */
.pm-grid.pm-grid--compare{
  display: none !important;
}

.pm-compare-table-wrap{
  margin-top: 12px;
  padding: 12px 14px 14px;
  background: rgba(255,255,255,.55);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
}

.pm-cmp-table-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.pm-cmp-table-title{
  font: 600 11px/1 "Oswald", system-ui;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0,0,0,.65);
}

/* Toggle 3-stati direzione delta */
.pm-cmp-deltadir-toggle{
  display: inline-flex;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,.02);
}
.pm-cmp-deltadir-btn{
  background: transparent;
  border: 0;
  padding: 5px 11px;
  font: 600 10px/1 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  cursor: pointer;
  transition: background-color .15s, color .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pm-cmp-deltadir-btn:hover{ color: rgba(0,0,0,.85); }
/* TIER 2 B3+D5 (sessione 20): !important proattivi sull'active state per
   garantire che il giallo brand vinca anche se in futuro si introducono
   override per stato hover combinato o se selettori di terze parti hanno
   specificity alta. Pattern documentato in feedback_dark_mode_specificity.md. */
.pm-cmp-deltadir-btn.is-active{
  background: #F4B532 !important;
  color: #1A1A1A !important;
}
.pm-cmp-deltadir-btn + .pm-cmp-deltadir-btn{
  border-left: 1px solid rgba(0,0,0,.08);
}
/* Dot/glyph cluster dentro il toggle direzione delta — ancora visiva
   tra label semantica ("riferimento" / "altri") e i colori usati nelle
   righe della tabella (giallo brand per il riferimento, palette comp). */
.pm-cmp-deltadir-dots{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.pm-cmp-deltadir-dot{
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset;
}
.pm-cmp-deltadir-eq{
  display: inline-block;
  font: 700 11px/1 "Oswald", system-ui;
  color: rgba(0,0,0,.50);
  letter-spacing: 0;
}
.pm-cmp-deltadir-btn.is-active .pm-cmp-deltadir-eq{
  color: rgba(0,0,0,.78);
}

/* Tabella grid 5 colonne pixel-perfect (label fissa 200px, 4 metriche 1fr) */
.pm-cmp-table{
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, 1fr);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.40);
}
/* display:contents permette al .pm-cmp-row logico di non interferire col grid:
   le celle figlie partecipano direttamente alla grid del .pm-cmp-table. */
.pm-cmp-row{ display: contents; }

.pm-cmp-cell{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  font: 700 14px/1.2 "Oswald", system-ui;
  font-variant-numeric: tabular-nums;
  color: rgba(0,0,0,.85);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
}
/* Header row */
.pm-cmp-row--head .pm-cmp-cell{
  font: 600 9.5px/1 "Oswald", system-ui;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  background: rgba(0,0,0,.025);
  border-bottom: 1px solid rgba(0,0,0,.10);
  padding-top: 8px;
  padding-bottom: 8px;
}
/* Cella header F-stop con mini-toggle inline (modalità esposizione).
   Sessione 19 fix b: toggle ANCORATO al titolo (justify-content flex-start
   + gap stretto), prima era space-between che spingeva il toggle al margine
   destro vicino alla colonna Ø Beam → ambiguità lettura. */
.pm-cmp-row--head .pm-cmp-cell--fstop-head{
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 5px;
  padding-bottom: 5px;
  flex-wrap: wrap;
}
.pm-cmp-fstop-headline{
  flex: 0 0 auto;
}
.pm-cmp-fstop-toggle{
  display: inline-flex;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.55);
}
.pm-cmp-fstop-btn{
  background: transparent;
  border: 0;
  padding: 3px 7px;
  font: 700 9px/1 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.pm-cmp-fstop-btn + .pm-cmp-fstop-btn{
  border-left: 1px solid rgba(0,0,0,.10);
}
.pm-cmp-fstop-btn:hover{ color: rgba(0,0,0,.85); }
/* TIER 2 B3+D5: !important proattivi anche su fstop active state */
.pm-cmp-fstop-btn.is-active{
  background: #F4B532 !important;
  color: #1A1A1A !important;
}
/* Base row evidenziata */
.pm-cmp-row--base .pm-cmp-cell{
  background: rgba(255,209,0,.06);
  border-bottom: 2px solid rgba(0,0,0,.10);
}

/* Cella label: layout row con dot + nome + tag base */
.pm-cmp-cell--label{
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.pm-cmp-dot{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pm-cmp-name{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 600 11px/1.2 "Oswald", system-ui;
  letter-spacing: .02em;
  color: rgba(0,0,0,.85);
}
.pm-cmp-tag{
  font: 700 8px/1 "Oswald", system-ui;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255,209,0,.25);
  color: rgba(0,0,0,.78);
  flex-shrink: 0;
}

.pm-cmp-val{ display: block; }
.pm-cmp-unit{
  font: 600 10px/1 "Oswald", system-ui;
  color: rgba(0,0,0,.50);
  margin-left: 1px;
}
.pm-cmp-oor{
  font: 500 10px/1 "Oswald", system-ui;
  font-style: italic;
  color: rgba(0,0,0,.40);
  text-transform: lowercase;
}
.pm-cmp-row.is-oor .pm-cmp-cell{ opacity: .65; }

/* Pill delta (lux + f-stop) — semantica win/loss/equal */
.pm-cmp-delta{
  display: inline-block;
  font: 700 9.5px/1 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.pm-cmp-delta em{
  font-style: normal;
  font-weight: 500;
  font-size: .85em;
  margin-left: 4px;
  opacity: .7;
}
.pm-cmp-delta.is-win{
  background: rgba(80,200,120,.18);
  color: #2d8d50;
}
.pm-cmp-delta.is-loss{
  background: rgba(220,90,80,.18);
  color: #c33b30;
}
.pm-cmp-delta.is-equal{
  background: rgba(180,175,160,.15);
  color: rgba(0,0,0,.50);
}

/* Pill qualità ottica (Ø Field) — neutra, informativa, con tooltip */
.pm-cmp-quality{
  display: inline-block;
  font: 600 9px/1 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(150,140,120,.14);
  color: rgba(0,0,0,.62);
  cursor: help;
  white-space: nowrap;
}

/* ── Dark mode ───────────────────────────────────────────────────────── */
body:is(.ds-dark, [data-dspmx-open]) .pm-compare-table-wrap{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-table-title{ color: rgba(255,255,255,.70); }

body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-deltadir-toggle{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-deltadir-btn{ color: rgba(255,255,255,.60); }
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-deltadir-btn:hover{ color: rgba(255,255,255,.92); }
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-deltadir-btn.is-active{
  background: #F4B532 !important;
  color: #1A1A1A !important;
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-deltadir-btn + .pm-cmp-deltadir-btn{
  border-left-color: rgba(255,255,255,.08);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-deltadir-dot{
  box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset;
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-deltadir-eq{ color: rgba(255,255,255,.55); }
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-deltadir-btn.is-active .pm-cmp-deltadir-eq{ color: rgba(0,0,0,.85); }

body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-table{
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-cell{
  border-bottom-color: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-row--head .pm-cmp-cell{
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.03);
  border-bottom-color: rgba(255,255,255,.10);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-row--base .pm-cmp-cell{
  background: rgba(255,209,0,.05);
  border-bottom-color: rgba(255,255,255,.12);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-name{ color: rgba(255,255,255,.92); }
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-tag{ color: rgba(0,0,0,.85); background: rgba(255,209,0,.30); }
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-unit{ color: rgba(255,255,255,.50); }
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-oor{ color: rgba(255,255,255,.40); }

body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-delta.is-win{
  color: #6FD08A;
  background: rgba(80,200,120,.15);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-delta.is-loss{
  color: #ff8a82;
  background: rgba(220,90,80,.15);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-delta.is-equal{
  color: rgba(255,255,255,.50);
  background: rgba(255,255,255,.05);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-quality{
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.06);
}

body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-fstop-toggle{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-fstop-btn{ color: rgba(255,255,255,.60); }
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-fstop-btn:hover{ color: rgba(255,255,255,.92); }
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-fstop-btn.is-active{
  background: #F4B532 !important;
  color: #1A1A1A !important;
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cmp-fstop-btn + .pm-cmp-fstop-btn{
  border-left-color: rgba(255,255,255,.10);
}

/* ── F-STOP CARD: layout colonna sinistra, valore centrato otticamente ─ */
.pm-card.pm-fstop{
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 10px 10px;
}
.pm-fstop-toggles{
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  width: 46px;          /* larghezza fissa colonna sx */
}
.pm-fstop-main{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
}
/* Spacer dx = stessa larghezza della colonna sx → valore centrato otticamente */
.pm-card.pm-fstop::after{
  content: '';
  display: block;
  flex-shrink: 0;
  width: 46px;
}
.pm-toggle-btn{
  appearance: none; cursor: pointer;
  font: 700 9px/1 "Oswald", system-ui;
  text-transform: uppercase; letter-spacing: .07em;
  padding: .22rem .54rem;
  border-radius: 999px;
  background: rgba(0,0,0,.045);
  border: 1px solid rgba(0,0,0,.07);
  color: rgba(0,0,0,.50);
  transition: background .12s, color .12s, border-color .12s;
}
.pm-toggle-btn:hover{
  background: rgba(0,0,0,.08);
  color: rgba(0,0,0,.72);
}
.pm-toggle-btn.is-active{
  background: var(--brand-yellow, #F4B532);
  border-color: #C9A800;
  color: #111;
  box-shadow: 0 0 0 2px rgba(255,208,0,.20);
}

/* ctrl-row divider */
.pm-ctrl-divider{
  width: 1px; height: 20px;
  background: rgba(0,0,0,.09);
  flex-shrink: 0;
}

/* ── MODE LABEL CHIP (beam slider label) — read-only text, no box ──────────── */
.pm-mode-chip{
  display: inline-flex;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  padding: 0 .25rem;
  font-family: "Oswald", system-ui;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(0,0,0,.52);
  background: none;
  border: none;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* markers (pill sul cono) */
.pm-cone rect{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); }
/* === SKIN v5.1: Photometrics — END === */

/* ── Reset pill: muted tertiary style ─────────────────────────────────── */
.pm .pill.pm-reset-btn{
  background: rgba(0,0,0,.038);
  border-color: rgba(0,0,0,.08);
  color: rgba(0,0,0,.52);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.pm .pill.pm-reset-btn:hover{
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.14);
  color: rgba(0,0,0,.72);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.07);
}
body:is(.ds-dark, [data-dspmx-open]) .pm .pill.pm-reset-btn{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.09);
  color: rgba(255,255,255,.35);
}
body:is(.ds-dark, [data-dspmx-open]) .pm .pill.pm-reset-btn:hover{
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.58);
}

/* === Pills stile “barre verticali” (no ellissi) === */
.style--bars .pill{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 10px 4px 22px;
  position: relative;
  font-weight: 700;
  transition: opacity .15s ease, transform .15s ease;
}
.style--bars .pill::before,
.style--bars .pill::after{
  content:"";
  position:absolute;
  left:6px; top:50%; transform:translateY(-50%);
  height:14px; border-radius:2px; transition:width .2s ease, opacity .2s ease;
}
.style--bars .pill::before{ width:2px; background:#FFE480; opacity:.9; }
.style--bars .pill::after { left:10px; width:3px; background:#F2B300; }

.style--bars .pill.active{ opacity:1; }
.style--bars .pill:not(.active){ opacity:.6; }
.style--bars .pill:not(.active)::before{ width:1px; opacity:.35; }
.style--bars .pill:not(.active)::after { width:2px; opacity:.5; }

/* === PHOTOMETRICS: container identico a Specs/Accessories ================= */
section#photometrics-card.photometrics-card,
section#photometrics-widget.photometrics-card,
section#photometrics.photometrics-card{
  --_x: var(--page-x, 32px);
  width: min(var(--content-w, 1204px), calc(100% - (var(--_x) * 2)));
  margin: 28px auto;
  border-radius: 22px;
  position: relative;
  background:
    radial-gradient(160% 120% at 50% -30%, rgba(255,255,255,.25), transparent 60%),
    rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 18px 36px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.06);
  z-index: 0;
}
section#photometrics-card.photometrics-card::before,
section#photometrics-widget.photometrics-card::before,
section#photometrics.photometrics-card::before,
section#photometrics-card.photometrics-card::after,
section#photometrics-widget.photometrics-card::after,
section#photometrics.photometrics-card::after{
  content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none;
}
section#photometrics-card.photometrics-card::before,
section#photometrics-widget.photometrics-card::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,0) 34%),
    radial-gradient(44% 20% at 50% 0%, rgba(255,255,255,.65), transparent);
  mix-blend-mode: screen;
  opacity:.55; mask: linear-gradient(#000, transparent); height: 28px;
}
section#photometrics-card.photometrics-card::after,
section#photometrics-widget.photometrics-card::after{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.52);
  opacity:.30;
}
/* contenuti sopra al riflesso */
#photometrics-card .pm-head, #photometrics-card .pm-body,
#photometrics-widget .pm-head, #photometrics-widget .pm-body{ position:relative; z-index:1; }
@media (max-width: 640px){
  section#photometrics-card.photometrics-card,
  section#photometrics-widget.photometrics-card{ --_x:12px; width:calc(100% - (var(--_x)*2)); }

  /* su mobile context wrappa, head-right va sotto */
  .pm-head{ gap: 8px; }
  .pm-context .pm-cct{ margin-left: 0; }

  /* silhouette: ridotta aggressivamente — il cono SVG 1000×300 su 350px è alto ~105px */
  .pm-cone-host .fixture-silhouette{
    width: clamp(26px, 6vw, 42px) !important;
  }

  /* KPI grid: sempre 2×2 su mobile (non 1 colonna) */
  .pm-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .pm-card .pm-value{ font-size: 18px; }

  /* cone host: altezza minima per non schiacciare troppo il cono */
  .pm-cone-host{ min-height: 120px; }
}

/* === sess.30 fix #2bis: DELETED legacy `.pm-cone-host .fixture-silhouette`
   con `left: 10px; bottom: 8px` (bottom-left positioning) — collideva con
   regola "percent alignment" sotto (line ~1198) che usa
   `transform: translate(var(--tX), var(--tY))` con top/left % settati da JS.
   La legacy `bottom: 8px` non veniva mai overridden → image absolute
   over-constrained (top+bottom entrambi set) → height stretched → translateY
   calcolato su altezza sbagliata → proiettore visualmente disallineato dal
   cono apex su tutti dispositivi (più visibile mobile per scale piccola).
   La regola percent sotto fa già tutto: width/opacity/filter/transition/
   pointer-events. Solo `overflow: hidden` migrato sulla regola percent
   `.pm-cone-host` per preservare clipping. ============================== */

/* === Hover "wow": leggero lift del cono e glow su marker attivo ======== */
.pm-cone{ transition: filter .25s ease, transform .25s ease; }
.pm-cone-host:hover .pm-cone{
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.10));
  transform: translateY(-1px);
}
.pm-cone-host:hover .fixture-silhouette{
  transform: translateY(-1px) scale(1.015);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.15)) saturate(1.08);
}

/* pill attiva sul cono con leggere pulsazioni */
.pm-cone .mk rect{ transition: transform .15s ease, filter .25s ease; transform-origin: center; }
.pm-cone .mk[data-kind="SEL"] rect{ filter: drop-shadow(0 4px 10px rgba(242,179,0,.24)); }
.pm-cone .mk:hover rect{ transform: scale(1.04); }

/* testo marker più leggibile su hover */
.pm-cone .mk text{ transition: opacity .15s ease; }
.pm-cone .mk:hover text{ opacity: .98; }

/* START: fixture silhouette (percent alignment) */
/* Silhouette: posizionamento parametrico + hover "lift".
   sess.30 fix #2bis: aggiunto `overflow: hidden` (migrato dalla regola
   legacy soppressa sopra) per preservare clipping cono out-of-viewbox. */
.pm-cone-host{ position: relative; overflow: hidden; }
.pm-cone-host .fixture-silhouette{
  position: absolute;
  /* top/left sono in % (settati da JS) */
  width: clamp(60px, 7vw, 96px);
  height: auto;
  z-index: 3;
  opacity: .95;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.18));
  /* trasformazioni tramite variabili, così l'hover non rompe l'ancoraggio */
  --tX: -62%;
  --tY: -50%;
  transform: translate(var(--tX), var(--tY));
  transition: transform .25s ease, filter .25s ease;
  pointer-events: none; user-select: none;
}
.pm-cone-host:hover .fixture-silhouette{
  transform: translate(var(--tX), var(--tY)) scale(1.02);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.18));
}
/* END: fixture silhouette (percent alignment) */

/* ── EXPOSURE PANEL ─────────────────────────────────────────────────────── */
.pm-exp-panel{
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 270px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 8px 30px rgba(0,0,0,.14),
    inset 0 1px rgba(255,255,255,.85);
  z-index: 30;
}
.pm-exp-panel.is-open{ display: block; }

.pm-exp-grid{ display: grid; gap: 10px; }

.pm-exp-row{
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pm-exp-label{
  font: 700 9.5px/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: rgba(0,0,0,.40);
}
.pm-exp-input{
  width: 86px;
  padding: 5px 8px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px;
  font: 600 13px/1 "Oswald", system-ui;
  color: rgba(0,0,0,.85);
  background: rgba(255,255,255,.85);
}
.pm-exp-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pm-exp-chip{
  appearance: none;
  cursor: pointer;
  font: 700 10.5px/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .28rem .60rem;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.65);
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.pm-exp-chip:hover{
  background: rgba(0,0,0,.09);
  border-color: rgba(0,0,0,.14);
}
.pm-exp-chip.is-active{
  background: var(--brand-yellow, #F4B532);
  border-color: #C9A800;
  color: #111;
}
/* "std / pal / +1¼ / +2" micro-labels inside shutter chips */
.pm-chip-sub{
  font: 500 8.5px/1 system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  opacity: .7;
  margin-left: 1px;
}
.pm-exp-sep{
  height: 1px;
  background: rgba(0,0,0,.07);
  margin: 2px 0;
}
/* advanced toggle button — replaces <details>/<summary> */
.pm-exp-adv-btn{
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 9px/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .10em;
  padding: .32rem .60rem .32rem .50rem;
  border-radius: 6px;
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.07);
  color: rgba(0,0,0,.40);
  transition: background .12s, color .12s, border-color .12s;
  width: 100%;
  text-align: left;
  box-shadow: none;
}
.pm-exp-adv-btn:hover{
  background: rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.12);
  color: rgba(0,0,0,.60);
}
.pm-exp-adv-btn[aria-expanded="true"]{
  background: rgba(244,181,50,.10);
  border-color: rgba(244,181,50,.32);
  color: rgba(0,0,0,.62);
}
/* caret rotates on open */
.pm-exp-adv-btn .pm-exp-caret{
  display: inline-block;
  transition: transform .20s ease;
  font-style: normal;
  font-size: .85em;
}
.pm-exp-adv-btn[aria-expanded="true"] .pm-exp-caret{
  transform: rotate(90deg);
}
.pm-exp-adv-content{ margin-top: 8px; }
.pm-exp-hint{
  font: 400 10px/1.3 system-ui, sans-serif;
  color: rgba(0,0,0,.40);
}
.pm-exp-reset-row{
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}
.pm-exp-caret{
  font-size: .8em;
  margin-left: 2px;
  opacity: .65;
}

/* ── F-STOP EXTRA: EV + candela chips ──────────────────────────────────── */
.pm-fstop-metrics{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.pm-metric-chip{
  font: 700 9.5px/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.055);
  border: 1px solid rgba(0,0,0,.07);
  color: rgba(0,0,0,.52);
}
.pm-fstop-nd{
  margin-top: 5px;
  font: 600 10px/1.4 system-ui, sans-serif;
  letter-spacing: .01em;
}
.pm-fstop-nd--warn{ color: #b45309; }
.pm-fstop-nd--info{ color: #1d4ed8; }

/* ── DARK MODE ──────────────────────────────────────────────────────────── */
body.ds-dark section#photometrics-card.photometrics-card,
body.ds-dark section#photometrics-widget.photometrics-card,
body.ds-dark section#photometrics.photometrics-card{
  background:
    radial-gradient(160% 120% at 50% -30%, rgba(255,255,255,.03), transparent 60%),
    rgba(255,255,255,.04);
  box-shadow: 0 18px 36px rgba(0,0,0,.50), inset 0 0 0 1px rgba(255,255,255,.08);
}
body.ds-dark section#photometrics-card.photometrics-card::after,
body.ds-dark section#photometrics-widget.photometrics-card::after{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  opacity: .40;
}
body:is(.ds-dark, [data-dspmx-open]) .pm .pill{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  /* Sessione 20: hardcoded color invece di var(--ds-c-text). La var è
     scoped al body — quando body è light ma modal aperto, var ritorna
     il NERO di light → pillole illeggibili. Hardcoded bianco caldo
     coerente col token dark del DS. */
  color: rgba(245,240,225,.92);
  box-shadow: none;
}
body:is(.ds-dark, [data-dspmx-open]) .pm .pill:hover:not(.active):not([aria-pressed="true"]){
  background: rgba(244,181,50,.12);
  border-color: rgba(244,181,50,.38);
}
body:is(.ds-dark, [data-dspmx-open]) .pm .pill.active,
body:is(.ds-dark, [data-dspmx-open]) .pm .pill[aria-pressed="true"]{
  background: #F4B532;
  border-color: #C9A800;
  color: #111;
  box-shadow: 0 2px 8px rgba(255,208,0,.22);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cone-host{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-cone .mk-info{
  fill: rgba(245,240,225,.92);
}
/* Dark mode: SVG text labels (Beam X°, Field Y°, distanze, valori) hanno
   fill="#111" hardcoded nel JS (photometrics.js mkText) → in dark mode
   restano neri sul fondo scuro e diventano illeggibili.
   Override fill via CSS — !important perché SVG attribute è inline
   e il CSS deve battere l'attribute. */
body:is(.ds-dark, [data-dspmx-open]) .pm-cone-host text,
body:is(.ds-dark, [data-dspmx-open]) .pm-cone-host svg text{
  fill: rgba(245,240,225,.92) !important;
}
/* Eccezione: testi dentro badge gialli (preset name "FULL SPOT") restano
   neri perché hanno background giallo brand (alto contrasto già garantito) */
body:is(.ds-dark, [data-dspmx-open]) .pm-cone-host .preset-badge text,
body:is(.ds-dark, [data-dspmx-open]) .pm-cone-host text[fill="#1a1a1a"]{
  fill: rgba(0,0,0,.92) !important;
}
/* Bug A: le pill cliccabili (distance markers) hanno bg bianco hardcoded
   ('rgba(255,255,255,.95)') con text '#333' in JS (photometrics.js makePill).
   In dark mode il blanket-override sopra forzerebbe il text a bianco → bianco
   su bianco invisibile. Esce dall'override mantenendo dark text sulle pill
   indipendentemente dal tema (la pill è SEMPRE white bg, quindi text deve
   essere SEMPRE dark per leggibilità). */
body:is(.ds-dark, [data-dspmx-open]) .pm-cone-host g.mk text,
body:is(.ds-dark, [data-dspmx-open]) .pm-cone-host text[fill="#333"],
body:is(.ds-dark, [data-dspmx-open]) .pm-cone-host text[fill="#111"]{
  fill: rgba(0,0,0,.92) !important;
}
/* Sessione 20: i marker info (.mk-info) hanno fill="#333" inline impostato
   da JS (photometrics-modal.js:377) quando isDark=false al mount del
   widget. Quando il modal aperto in light mode pagina forza dark via
   data-dspmx-open, la regola sopra (text[fill="#333"]) li renderebbe
   neri su sfondo dark = illeggibile. Specificity più alta forza bianco
   anche se l'attribute fill è "#333". */
body:is(.ds-dark, [data-dspmx-open]) .pm-cone-host text.mk-info,
body:is(.ds-dark, [data-dspmx-open]) .pm-cone-host text.mk-info tspan{
  fill: rgba(245,240,225,.92) !important;
}
/* Sessione 20: !important defensive sulle 4 cards bottom (Illuminance,
   F-stop, Ø Beam, Ø Field). L'utente segnalava bug intermittente "ogni
   tanto ritorna nero" — possibile race condition del data-dspmx-open
   (settato post-render iniziale). Con !important escludo
   completamente la regola light mode default dal vincere in qualunque
   scenario di timing. */
body:is(.ds-dark, [data-dspmx-open]) .pm-card{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.08) !important;
}
body:is(.ds-dark, [data-dspmx-open]) .pm-card .pm-h{ color: rgba(255,255,255,.50) !important; }
body:is(.ds-dark, [data-dspmx-open]) .pm-card .pm-value{ color: rgba(255,255,255,.90) !important; }
body:is(.ds-dark, [data-dspmx-open]) .pm-val-unit{ color: rgba(255,255,255,.46) !important; }
body:is(.ds-dark, [data-dspmx-open]) .pm-card .pm-sub{ color: rgba(255,255,255,.34) !important; }
body:is(.ds-dark, [data-dspmx-open]) .pm-cycle-hint{ color: rgba(255,255,255,.22) !important; }
/* dark mode: f-stop toggle buttons */
body:is(.ds-dark, [data-dspmx-open]) .pm-toggle-btn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.09);
  color: rgba(255,255,255,.42);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-toggle-btn:hover{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.65);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-toggle-btn.is-active{
  background: var(--brand-yellow, #F4B532);
  border-color: #C9A800;
  color: #111;
}
body:is(.ds-dark, [data-dspmx-open]) .pm-dist-ctrl{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-dist-ctrl:hover{
  border-color: rgba(244,181,50,.38);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-dist-label-sm{ color: rgba(255,255,255,.46); }
body:is(.ds-dark, [data-dspmx-open]) .pm-ctrl-divider{ background: rgba(255,255,255,.10); }
body:is(.ds-dark, [data-dspmx-open]) .pm-spin-btn{ color: rgba(255,255,255,.32); }
body:is(.ds-dark, [data-dspmx-open]) .pm-spin-btn:hover{ color: #F4B532; background: rgba(244,181,50,.10); }
body:is(.ds-dark, [data-dspmx-open]) .pm-dist-val{ color: rgba(255,255,255,.88); }
body:is(.ds-dark, [data-dspmx-open]) .pm-mode-chip{
  color: rgba(255,255,255,.48);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-ang-val{ color: rgba(255,255,255,.70); }
body:is(.ds-dark, [data-dspmx-open]) .pm-ang-range{ background: rgba(255,255,255,.14); }
body:is(.ds-dark, [data-dspmx-open]) .pm-ang-range::-webkit-slider-thumb{ border-color: rgba(30,28,20,.70); }
body:is(.ds-dark, [data-dspmx-open]) .pm-ang-range::-moz-range-thumb   { border-color: rgba(30,28,20,.70); }
body:is(.ds-dark, [data-dspmx-open]) .pm-dist .btn,
body:is(.ds-dark, [data-dspmx-open]) .pm-dist input[type="number"]{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(245,240,225,.92);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-row label,
body:is(.ds-dark, [data-dspmx-open]) .pm-dist-label{ color: rgba(255,255,255,.36); }
body:is(.ds-dark, [data-dspmx-open]) .pm-dist-val{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-dist-val:focus{
  outline-color: rgba(244,181,50,.45);
  border-color: rgba(244,181,50,.35);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-dist-unit{ color: rgba(255,255,255,.46); }
body:is(.ds-dark, [data-dspmx-open]) .pm-dist-range{
  background: rgba(255,255,255,.14);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-dist-range::-webkit-slider-thumb{
  border-color: rgba(30,28,20,.70);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-dist-range::-moz-range-thumb{
  border-color: rgba(30,28,20,.70);
}

/* dark mode: exposure panel */
body:is(.ds-dark, [data-dspmx-open]) .pm-exp-panel{
  background: rgba(20,18,12,.95);
  border-color: rgba(255,255,255,.10);
  box-shadow:
    0 8px 30px rgba(0,0,0,.55),
    inset 0 1px rgba(255,255,255,.04);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-exp-label{ color: rgba(255,255,255,.36); }
body:is(.ds-dark, [data-dspmx-open]) .pm-exp-input{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-exp-chip{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.60);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-exp-chip:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-exp-chip.is-active{
  background: var(--brand-yellow, #F4B532);
  border-color: #C9A800;
  color: #111;
}
body:is(.ds-dark, [data-dspmx-open]) .pm-exp-sep{ background: rgba(255,255,255,.07); }
body:is(.ds-dark, [data-dspmx-open]) .pm-exp-adv summary{ color: rgba(255,255,255,.30); }
body:is(.ds-dark, [data-dspmx-open]) .pm-exp-adv-btn{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.09);
  color: rgba(255,255,255,.32);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-exp-adv-btn:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.55);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-exp-adv-btn[aria-expanded="true"]{
  background: rgba(244,181,50,.08);
  border-color: rgba(244,181,50,.25);
  color: rgba(255,255,255,.60);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-exp-hint{ color: rgba(255,255,255,.32); }
body:is(.ds-dark, [data-dspmx-open]) .pm-metric-chip{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.46);
}
body:is(.ds-dark, [data-dspmx-open]) .pm-fstop-nd--warn{ color: #fbbf24; }
body:is(.ds-dark, [data-dspmx-open]) .pm-fstop-nd--info{ color: #93c5fd; }