/* Teslers Prezzi. Colori dal tema (--pls-*). Serie: palette categoriale validata (chiaro e scuro, 22/10/2026). */
.tsl-prz {
  --z-surface: var(--pls-surface, #fff);
  --z-surface-2: color-mix(in srgb, var(--z-ink) 3.5%, var(--z-surface));
  --z-ink: var(--pls-ink, #1a1a1e);
  --z-ink2: var(--pls-ink2, #565c6a);
  --z-mute: var(--pls-mute, #848a96);
  --z-line: var(--pls-border-soft, var(--pls-border, #e4e9f2));
  --z-grid: color-mix(in srgb, var(--z-line) 70%, transparent);
  --z-brand: var(--pls-brand, #e51837);
  --z-up: #b4361c; --z-up-soft: color-mix(in srgb, #d24a2a 13%, transparent);
  --z-down: var(--pls-success-ink, #0f7a4d); --z-down-soft: color-mix(in srgb, var(--z-down) 14%, transparent);
  --tsl-prz-s1: #2a78d6; --tsl-prz-s2: #eb6834; --tsl-prz-s3: #1baf7a; --tsl-prz-s4: #eda100; --tsl-prz-s5: #e87ba4;
  --z-shadow: none;
  --z-font-h: var(--pls-font-h, "Poppins", system-ui, sans-serif);
  --z-mono: var(--pls-font-mono, "SF Mono", ui-monospace, Consolas, monospace);
  color: var(--z-ink);
}
/* Tema scuro di Pulsar: classe su <html>, o il sistema se non c'e' JavaScript. */
html.pls-dark .tsl-prz {
  --z-up: #f08a6e;
  --tsl-prz-s1: #3987e5; --tsl-prz-s2: #d95926; --tsl-prz-s3: #199e70; --tsl-prz-s4: #c98500; --tsl-prz-s5: #d55181;
  --z-shadow: none;
}
@media (prefers-color-scheme: dark) {
  html:not(.pls-light):not(.pls-dark) .tsl-prz {
    --z-up: #f08a6e;
    --tsl-prz-s1: #3987e5; --tsl-prz-s2: #d95926; --tsl-prz-s3: #199e70; --tsl-prz-s4: #c98500; --tsl-prz-s5: #d55181;
  }
}
.tsl-prz-wrap { max-width: 1192px; margin-inline: auto; padding-inline: 16px; padding-bottom: 48px; }
.tsl-prz a { color: inherit; }
.tsl-prz :focus-visible { outline: 2px solid var(--z-brand); outline-offset: 3px; border-radius: calc(6px * var(--pls-r, 1)); }
.tsl-prz-crumbs { margin: 0 0 14px; font-size: 14px; color: var(--z-mute); display: flex; gap: 8px; }
.tsl-prz-crumbs a { color: var(--z-ink2); text-decoration: none; }
.tsl-prz-hero { padding: 40px 0 24px; }
/* Titolo e sottotitolo con le misure del tema (le stesse degli articoli). */
.tsl-prz-hero h1 { margin: 0; font: 700 var(--pls-single-title-size, 32px)/1.15 var(--z-font-h); letter-spacing: var(--pls-single-title-ls, -.03em); text-wrap: balance; }
.tsl-prz-hero__lead { margin: 14px 0 0; max-width: 680px; font-size: var(--pls-single-subtitle-size, 17px); line-height: 1.6; color: var(--z-ink2); }

.tsl-prz-sw { display: inline-block; width: 10px; height: 10px; border-radius: calc(3px * var(--pls-r, 1)); flex: 0 0 auto; }
.tsl-prz-sw.is-s1 { background: var(--tsl-prz-s1); } .tsl-prz-sw.is-s2 { background: var(--tsl-prz-s2); } .tsl-prz-sw.is-s3 { background: var(--tsl-prz-s3); }
.tsl-prz-sw.is-s4 { background: var(--tsl-prz-s4); } .tsl-prz-sw.is-s5 { background: var(--tsl-prz-s5); }

.tsl-prz-today { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 8px 0 28px; }
.tsl-prz-mcard { background: var(--z-surface); border: 1px solid var(--z-line); border-radius: calc(20px * var(--pls-r, 1)); box-shadow: var(--z-shadow); padding: 18px 20px 8px; }
.tsl-prz-mcard h2 { margin: 0 0 6px; font: 600 20px var(--z-font-h); letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tsl-prz-mcard h2 small { font: 400 13px system-ui, sans-serif; color: var(--z-mute); }
.tsl-prz-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--z-line); }
.tsl-prz-mcard h2 + .tsl-prz-prow { border-top: 0; }
.tsl-prz-prow__name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; }
.tsl-prz-prow__price { font: 600 19px var(--z-font-h); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tsl-prz-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: calc(999px * var(--pls-r, 1)); white-space: nowrap; background: var(--z-surface-2); color: var(--z-ink2); }
.tsl-prz-delta.is-up { background: var(--z-up-soft); color: var(--z-up); }
.tsl-prz-delta.is-down { background: var(--z-down-soft); color: var(--z-down); }
.tsl-prz-delta svg { width: 11px; height: 11px; }

.tsl-prz-panel { background: var(--z-surface); border: 1px solid var(--z-line); border-radius: calc(20px * var(--pls-r, 1)); box-shadow: var(--z-shadow); padding: 18px 20px 14px; }
.tsl-prz-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.tsl-prz-panel__head h2, .tsl-prz-changes h2 { margin: 0; font: 600 21px var(--z-font-h); letter-spacing: -.02em; }
.tsl-prz-seg { display: inline-flex; padding: 3px; background: var(--z-surface-2); border: 1px solid var(--z-line); border-radius: calc(999px * var(--pls-r, 1)); }
.tsl-prz-seg button { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--z-ink2); padding: 0 16px; height: 34px; border-radius: calc(999px * var(--pls-r, 1)); cursor: pointer; }
.tsl-prz-seg button.is-on { background: var(--z-surface); color: var(--z-ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .14); }
.tsl-prz-legend { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 14px 0 4px; padding: 0; list-style: none; }
.tsl-prz-legend li { margin: 0; }
.tsl-prz-legend button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13.5px; color: var(--z-ink2); background: var(--z-surface); border: 1px solid var(--z-line); border-radius: calc(999px * var(--pls-r, 1)); padding: 4px 12px 4px 10px; cursor: pointer; }
.tsl-prz-legend button[aria-pressed="false"] { opacity: .45; }
.tsl-prz-legend button[aria-pressed="false"] .tsl-prz-sw { background: transparent; box-shadow: inset 0 0 0 2px var(--z-mute); }
.tsl-prz-chart { position: relative; margin-top: 6px; touch-action: pan-y; }
.tsl-prz-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.tsl-prz-grid text { fill: var(--z-mute); font: 12px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.tsl-prz-grid line { stroke: var(--z-grid); stroke-width: 1; }
.tsl-prz-series path { fill: none; stroke-width: 2.25; stroke-linejoin: round; }
.tsl-prz-series circle { stroke: var(--z-surface); stroke-width: 2; }
.tsl-prz-dl text { font: 600 12px system-ui, sans-serif; fill: var(--z-ink2); }
.tsl-prz-dl .v { fill: var(--z-ink); font-variant-numeric: tabular-nums; }
.tsl-prz-xh { stroke: var(--z-mute); stroke-width: 1; stroke-dasharray: 3 3; }
.tsl-prz-tip { position: absolute; top: 8px; pointer-events: none; background: var(--z-surface); border: 1px solid var(--z-line); border-radius: calc(12px * var(--pls-r, 1)); box-shadow: var(--z-shadow); padding: 10px 12px; font-size: 13px; min-width: 220px; z-index: 2; }
.tsl-prz-tip b { display: block; margin-bottom: 4px; }
.tsl-prz-tip .r { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 2px 0; color: var(--z-ink2); }
.tsl-prz-tip .r span:last-child { color: var(--z-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.tsl-prz-tip .ev { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--z-line); color: var(--z-ink2); }
.tsl-prz-note { margin: 10px 0 0; font-size: 13px; color: var(--z-mute); }

.tsl-prz-changes { margin-top: 28px; }
.tsl-prz-changes > p { margin: 4px 0 14px; color: var(--z-ink2); font-size: 15px; }
.tsl-prz-year { margin-top: 18px; }
.tsl-prz-year h3 { margin: 0 0 8px; font: 600 15px var(--z-mono); color: var(--z-mute); }
.tsl-prz-clist { list-style: none; margin: 0; padding: 0; background: var(--z-surface); border: 1px solid var(--z-line); border-radius: calc(16px * var(--pls-r, 1)); overflow: hidden; }
.tsl-prz-citem { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--z-line); font-size: 14.5px; margin: 0; }
.tsl-prz-citem:first-child { border-top: 0; }
.tsl-prz-citem__date { color: var(--z-ink2); font-variant-numeric: tabular-nums; }
.tsl-prz-citem__date em { display: block; font-style: normal; font-size: 12px; color: var(--z-mute); }
.tsl-prz-citem__what { min-width: 0; display: flex; align-items: center; gap: 10px; }
.tsl-prz-citem__what small { display: block; color: var(--z-mute); font-size: 12.5px; }
.tsl-prz-citem__price { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tsl-prz-citem__price s { color: var(--z-mute); margin-right: 6px; }
.tsl-prz-citem__price strong { font-weight: 600; }
.tsl-prz-citem__src { font-size: 13px; color: var(--z-ink2); white-space: nowrap; }
.tsl-prz-citem__src a { text-decoration: none; border-bottom: 1px solid var(--z-line); }
.tsl-prz-citem__src a:hover { color: var(--z-brand); border-color: var(--z-brand); }
.tsl-prz-foot { margin-top: 24px; font-size: 13.5px; color: var(--z-mute); }

@media (max-width: 860px) { .tsl-prz-today { grid-template-columns: minmax(0, 1fr); } }
/* Telefono: il nome della versione su una riga intera, prezzo e ultimo cambio sotto (non si spezza parola per parola). */
@media (max-width: 560px) {
  .tsl-prz-prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "p d"; gap: 4px 12px; }
  .tsl-prz-prow__name { grid-area: n; }
  .tsl-prz-prow__price { grid-area: p; }
  .tsl-prz-prow .tsl-prz-delta { grid-area: d; justify-self: end; }
}
@media (max-width: 640px) {
  .tsl-prz-citem { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "w p" "d s"; gap: 4px 12px; }
  .tsl-prz-citem__what { grid-area: w; } .tsl-prz-citem__price { grid-area: p; }
  .tsl-prz-citem__date { grid-area: d; font-size: 13px; } .tsl-prz-citem__date em { display: inline; margin-left: 6px; }
  .tsl-prz-citem__src { grid-area: s; text-align: right; }
  .tsl-prz-seg { width: 100%; } .tsl-prz-seg button { flex: 1; }
  .tsl-prz-tip { min-width: 0; width: calc(100% - 8px); left: 4px !important; }
}