/* Plannix 2027: product widgets. Every class is prefixed wg-; tokens live on .wg-sec (one per widget section).
   Theme: data-theme="light" | "dark" | "auto" on .wg-sec. The serif comes from the page (variable TimelessSerifVF). Report: TEAM/out/widgets.md. */
@font-face { font-family: "Timeless Grotesk"; src: url("fonts/TimelessSans-GroteskRegular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("fonts/TimelessSans-GroteskMedium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("fonts/TimelessSans-GroteskSemibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

.wg-sec {
  /* page */
  --wg-page: #ffffff;
  --wg-ink: #02376c;
  --wg-ink-2: #44546c;
  --wg-ink-3: #56647a;
  /* window (px2 grays + the Roadmap UI warm tones) */
  --wg-win: #ffffff;
  --wg-side: #faf8f5;
  --wg-sand: #f2ede5;
  --wg-line: #e4e4e7;
  --wg-line-warm: #e7e0d4;
  --wg-fg: #18181b;
  --wg-fg-2: #52525c;
  --wg-fg-3: #62626c;
  --wg-fg-4: #9f9fa9;
  --wg-off: #d4d4d8;
  --wg-accent: rgb(3 115 226);
  --wg-accent-press: rgb(2 98 194);
  --wg-accent-text: rgb(2 74 146);
  --wg-accent-soft: color-mix(in oklab, var(--wg-accent) 26%, var(--wg-win));
  --wg-track: var(--wg-sand);
  --wg-seg-on: #ffffff;
  --wg-seg-shadow: 0 1px 2px rgb(24 24 27 / 0.08), 0 0 0 1px rgb(24 24 27 / 0.04);
  --wg-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 12px 32px -16px rgb(56 44 24 / 0.18);
  --wg-warn-bg: rgb(255 251 235);
  --wg-warn-fg: rgb(146 64 14);
  --wg-warn-stroke: rgb(220 104 3);
  --wg-red-stroke: #d92d20;
  --wg-ok-bg: rgb(236 253 243);
  --wg-ok-fg: rgb(22 101 52);
  --wg-neutral-bg: #f4f4f5;
  --wg-neutral-fg: #52525c;
  --wg-thumb: #ffffff;

  --wg-serif: "Timeless Serif", Georgia, "Times New Roman", serif;
  --wg-sans: "Timeless Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wg-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --wg-gutter: clamp(16px, 4.5vw, 64px);

  color-scheme: light;
  background: var(--wg-page);
  color: var(--wg-ink);
  font-family: var(--wg-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-block: clamp(52px, 6vw, 88px);
}
@media (max-width: 860px) { .wg-sec { --wg-gutter: var(--gutter); padding-block: var(--m-sec); } }
.wg-sec[data-tint="warm"] { --wg-page: #f6f3ee; }
.wg-sec[data-bg="none"] { background: transparent; padding-block: 0; }

.wg-sec[data-theme="dark"] {
  --wg-page: #0a1633;
  --wg-ink: #ffffff;
  --wg-ink-2: rgb(226 235 250 / 0.8);
  --wg-ink-3: #8794ad;
  --wg-win: #0f1930;
  --wg-side: #0c1428;
  --wg-sand: #16223d;
  --wg-line: rgb(184 196 217 / 0.12);
  --wg-line-warm: rgb(214 204 186 / 0.12);
  --wg-fg: #eef1f6;
  --wg-fg-2: #b8c4d9;
  --wg-fg-3: #8794ad;
  --wg-fg-4: #5f6c86;
  --wg-off: rgb(184 196 217 / 0.2);
  --wg-accent: #4a95f2;
  --wg-accent-press: #3a84e0;
  --wg-accent-text: #8fbdf7;
  --wg-track: #0b1326;
  --wg-seg-on: rgb(184 196 217 / 0.14);
  --wg-seg-shadow: inset 0 0 0 1px rgb(184 196 217 / 0.1);
  --wg-shadow: 0 0 0 1px rgb(0 0 0 / 0.2), 0 24px 64px -24px rgb(0 0 0 / 0.7);
  --wg-warn-bg: rgb(247 144 9 / 0.13);
  --wg-warn-fg: #f6b25e;
  --wg-warn-stroke: #f39b33;
  --wg-red-stroke: #f97066;
  --wg-ok-bg: rgb(23 178 106 / 0.14);
  --wg-ok-fg: #6fd8a0;
  --wg-neutral-bg: rgb(184 196 217 / 0.1);
  --wg-neutral-fg: #b8c4d9;
  --wg-thumb: #eef1f6;
  --wg-accent-soft: color-mix(in oklab, var(--wg-accent) 42%, var(--wg-win));
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .wg-sec[data-theme="auto"] {
    --wg-page: #0a1633;
    --wg-ink: #ffffff;
    --wg-ink-2: rgb(226 235 250 / 0.8);
    --wg-ink-3: #8794ad;
    --wg-win: #0f1930;
    --wg-side: #0c1428;
    --wg-sand: #16223d;
    --wg-line: rgb(184 196 217 / 0.12);
    --wg-line-warm: rgb(214 204 186 / 0.12);
    --wg-fg: #eef1f6;
    --wg-fg-2: #b8c4d9;
    --wg-fg-3: #8794ad;
    --wg-fg-4: #5f6c86;
    --wg-off: rgb(184 196 217 / 0.2);
    --wg-accent: #4a95f2;
    --wg-accent-press: #3a84e0;
    --wg-accent-text: #8fbdf7;
    --wg-track: #0b1326;
    --wg-seg-on: rgb(184 196 217 / 0.14);
    --wg-seg-shadow: inset 0 0 0 1px rgb(184 196 217 / 0.1);
    --wg-shadow: 0 0 0 1px rgb(0 0 0 / 0.2), 0 24px 64px -24px rgb(0 0 0 / 0.7);
    --wg-warn-bg: rgb(247 144 9 / 0.13);
    --wg-warn-fg: #f6b25e;
    --wg-warn-stroke: #f39b33;
    --wg-red-stroke: #f97066;
    --wg-ok-bg: rgb(23 178 106 / 0.14);
    --wg-ok-fg: #6fd8a0;
    --wg-neutral-bg: rgb(184 196 217 / 0.1);
    --wg-neutral-fg: #b8c4d9;
    --wg-thumb: #eef1f6;
    --wg-accent-soft: color-mix(in oklab, var(--wg-accent) 42%, var(--wg-win));
    color-scheme: dark;
  }
}

/* theme="light" | "dark" | "auto" on the widget tag: the product UI keeps its own scheme whatever the section's theme (set by the page builder) */
plannix-costi, plannix-piramide, plannix-anteprima, plannix-vita { display: block; }
:is(plannix-costi, plannix-piramide, plannix-anteprima, plannix-vita)[theme="light"] {
  --wg-win: #ffffff;
  --wg-side: #faf8f5;
  --wg-sand: #f2ede5;
  --wg-line: #e4e4e7;
  --wg-line-warm: #e7e0d4;
  --wg-fg: #18181b;
  --wg-fg-2: #52525c;
  --wg-fg-3: #62626c;
  --wg-fg-4: #9f9fa9;
  --wg-off: #d4d4d8;
  --wg-accent: rgb(3 115 226);
  --wg-accent-press: rgb(2 98 194);
  --wg-accent-text: rgb(2 74 146);
  --wg-accent-soft: color-mix(in oklab, var(--wg-accent) 26%, var(--wg-win));
  --wg-track: var(--wg-sand);
  --wg-seg-on: #ffffff;
  --wg-seg-shadow: 0 1px 2px rgb(24 24 27 / 0.08), 0 0 0 1px rgb(24 24 27 / 0.04);
  --wg-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 12px 32px -16px rgb(56 44 24 / 0.18);
  --wg-warn-bg: rgb(255 251 235);
  --wg-warn-fg: rgb(146 64 14);
  --wg-warn-stroke: rgb(220 104 3);
  --wg-red-stroke: #d92d20;
  --wg-ok-bg: rgb(236 253 243);
  --wg-ok-fg: rgb(22 101 52);
  --wg-neutral-bg: #f4f4f5;
  --wg-neutral-fg: #52525c;
  --wg-thumb: #ffffff;
  color-scheme: light;
}
:is(plannix-costi, plannix-piramide, plannix-anteprima, plannix-vita)[theme="dark"] {
  --wg-win: #0f1930;
  --wg-side: #0c1428;
  --wg-sand: #16223d;
  --wg-line: rgb(184 196 217 / 0.12);
  --wg-line-warm: rgb(214 204 186 / 0.12);
  --wg-fg: #eef1f6;
  --wg-fg-2: #b8c4d9;
  --wg-fg-3: #8794ad;
  --wg-fg-4: #5f6c86;
  --wg-off: rgb(184 196 217 / 0.2);
  --wg-accent: #4a95f2;
  --wg-accent-press: #3a84e0;
  --wg-accent-text: #8fbdf7;
  --wg-track: #0b1326;
  --wg-seg-on: rgb(184 196 217 / 0.14);
  --wg-seg-shadow: inset 0 0 0 1px rgb(184 196 217 / 0.1);
  --wg-shadow: 0 0 0 1px rgb(0 0 0 / 0.2), 0 24px 64px -24px rgb(0 0 0 / 0.7);
  --wg-warn-bg: rgb(247 144 9 / 0.13);
  --wg-warn-fg: #f6b25e;
  --wg-warn-stroke: #f39b33;
  --wg-red-stroke: #f97066;
  --wg-ok-bg: rgb(23 178 106 / 0.14);
  --wg-ok-fg: #6fd8a0;
  --wg-neutral-bg: rgb(184 196 217 / 0.1);
  --wg-neutral-fg: #b8c4d9;
  --wg-thumb: #eef1f6;
  --wg-accent-soft: color-mix(in oklab, var(--wg-accent) 42%, var(--wg-win));
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :is(plannix-costi, plannix-piramide, plannix-anteprima, plannix-vita)[theme="auto"] {
    --wg-win: #ffffff;
    --wg-side: #faf8f5;
    --wg-sand: #f2ede5;
    --wg-line: #e4e4e7;
    --wg-line-warm: #e7e0d4;
    --wg-fg: #18181b;
    --wg-fg-2: #52525c;
    --wg-fg-3: #62626c;
    --wg-fg-4: #9f9fa9;
    --wg-off: #d4d4d8;
    --wg-accent: rgb(3 115 226);
    --wg-accent-press: rgb(2 98 194);
    --wg-accent-text: rgb(2 74 146);
    --wg-accent-soft: color-mix(in oklab, var(--wg-accent) 26%, var(--wg-win));
    --wg-track: var(--wg-sand);
    --wg-seg-on: #ffffff;
    --wg-seg-shadow: 0 1px 2px rgb(24 24 27 / 0.08), 0 0 0 1px rgb(24 24 27 / 0.04);
    --wg-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 12px 32px -16px rgb(56 44 24 / 0.18);
    --wg-warn-bg: rgb(255 251 235);
    --wg-warn-fg: rgb(146 64 14);
    --wg-warn-stroke: rgb(220 104 3);
    --wg-red-stroke: #d92d20;
    --wg-ok-bg: rgb(236 253 243);
    --wg-ok-fg: rgb(22 101 52);
    --wg-neutral-bg: #f4f4f5;
    --wg-neutral-fg: #52525c;
    --wg-thumb: #ffffff;
    color-scheme: light;
  }
}
@media (prefers-color-scheme: dark) {
  :is(plannix-costi, plannix-piramide, plannix-anteprima, plannix-vita)[theme="auto"] {
    --wg-win: #0f1930;
    --wg-side: #0c1428;
    --wg-sand: #16223d;
    --wg-line: rgb(184 196 217 / 0.12);
    --wg-line-warm: rgb(214 204 186 / 0.12);
    --wg-fg: #eef1f6;
    --wg-fg-2: #b8c4d9;
    --wg-fg-3: #8794ad;
    --wg-fg-4: #5f6c86;
    --wg-off: rgb(184 196 217 / 0.2);
    --wg-accent: #4a95f2;
    --wg-accent-press: #3a84e0;
    --wg-accent-text: #8fbdf7;
    --wg-track: #0b1326;
    --wg-seg-on: rgb(184 196 217 / 0.14);
    --wg-seg-shadow: inset 0 0 0 1px rgb(184 196 217 / 0.1);
    --wg-shadow: 0 0 0 1px rgb(0 0 0 / 0.2), 0 24px 64px -24px rgb(0 0 0 / 0.7);
    --wg-warn-bg: rgb(247 144 9 / 0.13);
    --wg-warn-fg: #f6b25e;
    --wg-warn-stroke: #f39b33;
    --wg-red-stroke: #f97066;
    --wg-ok-bg: rgb(23 178 106 / 0.14);
    --wg-ok-fg: #6fd8a0;
    --wg-neutral-bg: rgb(184 196 217 / 0.1);
    --wg-neutral-fg: #b8c4d9;
    --wg-thumb: #eef1f6;
    --wg-accent-soft: color-mix(in oklab, var(--wg-accent) 42%, var(--wg-win));
    color-scheme: dark;
  }
}

.wg-sec *, .wg-sec *::before, .wg-sec *::after { box-sizing: border-box; }
.wg-sec :where(p, h2, ol, ul, dl, dd, fieldset, figure) { margin: 0; padding: 0; }
.wg-sec :where(ol, ul) { list-style: none; }
.wg-sec fieldset { border: 0; min-width: 0; }
.wg-sec legend { padding: 0; }
.wg-sec :where(button) { font: inherit; color: inherit; }
.wg-sec .tnum { font-variant-numeric: tabular-nums; }
.wg-sec [hidden] { display: none !important; }

/* Section shell: title, one line, the widget */
.wg-wrap { width: 100%; max-width: calc(1200px + 2 * var(--wg-gutter)); margin-inline: auto; padding-inline: var(--wg-gutter); }
.wg-head { display: grid; gap: 8px; max-width: 46rem; margin-bottom: clamp(24px, 3vw, 36px); }
.wg-h2 { font-family: var(--wg-serif); font-weight: 400; font-size: 36px; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; color: var(--wg-ink); }
.wg-lead { font-size: 16px; line-height: 1.5; color: var(--wg-ink-2); max-width: 36em; text-wrap: pretty; }
.wg-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--wg-ink-3); max-width: 60em; text-wrap: pretty; }
.wg-note a { color: inherit; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.wg-sec :focus-visible { outline: 2px solid var(--wg-accent); outline-offset: 2px; border-radius: 6px; }

/* Window: the product frame, same anatomy as the Roadmap UI */
.wg-win { overflow: clip; border: 1px solid var(--wg-line); border-radius: 12px; background: var(--wg-win); box-shadow: var(--wg-shadow); color: var(--wg-fg); font-size: 14px; line-height: 20px; }
.wg-titlebar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--wg-line); font-size: 13px; color: var(--wg-fg-3); white-space: nowrap; overflow: hidden; }
.wg-logo { width: 15px; height: 15px; margin-right: 2px; display: block; }
.wg-crumb.is-current { color: var(--wg-fg); font-weight: 500; }
.wg-crumb-sep { width: 12px; height: 12px; fill: none; stroke: var(--wg-fg-4); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.wg-body { display: grid; }
.wg-controls { display: grid; align-content: start; gap: 22px; padding: 20px; background: var(--wg-side); border-right: 1px solid var(--wg-line-warm); }
.wg-label { font-size: 13px; line-height: 18px; color: var(--wg-fg-3); }
.wg-field { display: grid; gap: 10px; }

/* Range: native input, so keys, touch and screen readers work as they should */
.wg-range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wg-range-value { font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--wg-fg); }
.wg-range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.wg-range:focus { outline: none; }
.wg-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--wg-accent) var(--p), var(--wg-off) var(--p)); }
.wg-range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--wg-off); }
.wg-range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--wg-accent); }
.wg-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 999px; background: var(--wg-thumb); box-shadow: 0 0 0 1px rgb(24 24 27 / 0.12), 0 1px 3px rgb(24 24 27 / 0.2); transition: transform 120ms var(--wg-ease); }
.wg-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 999px; background: var(--wg-thumb); box-shadow: 0 0 0 1px rgb(24 24 27 / 0.12), 0 1px 3px rgb(24 24 27 / 0.2); transition: transform 120ms var(--wg-ease); }
.wg-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.wg-range:active::-moz-range-thumb { transform: scale(1.12); }
.wg-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--wg-win), 0 0 0 4px var(--wg-accent); }
.wg-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--wg-win), 0 0 0 4px var(--wg-accent); }

/* Segmented control: real radios */
.wg-seg { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--wg-track); box-shadow: inset 0 0 0 1px var(--wg-line-warm); }
.wg-seg-opt { position: relative; flex: 1 1 0; min-width: 0; }
.wg-seg-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wg-seg-opt span { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--wg-fg-2); white-space: nowrap; transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms var(--wg-ease); pointer-events: none; }
.wg-seg-opt input:checked + span { background: var(--wg-seg-on); color: var(--wg-fg); box-shadow: var(--wg-seg-shadow); }
.wg-seg-opt input:active + span { transform: scale(0.97); }
.wg-seg-opt input:focus-visible + span { outline: 2px solid var(--wg-accent); outline-offset: 1px; }
.wg-seg-wrap .wg-seg-opt span { height: auto; min-height: 30px; padding: 6px 6px; white-space: normal; text-align: center; line-height: 15px; }
.wg-seg-grid .wg-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wg-seg-grid .wg-seg-opt span { height: auto; min-height: 34px; padding: 6px; white-space: normal; text-align: center; line-height: 15px; }
@media (hover: hover) and (pointer: fine) { .wg-seg-opt:hover input:not(:checked) + span { color: var(--wg-fg); } }

/* Chips: the only coloured badges, semantic like the app */
.wg-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--wg-neutral-bg); color: var(--wg-neutral-fg); transition: background-color 320ms ease, color 320ms ease; }
.wg-chip[data-tone="ok"] { background: var(--wg-ok-bg); color: var(--wg-ok-fg); }
.wg-chip[data-tone="warn"] { background: var(--wg-warn-bg); color: var(--wg-warn-fg); }
.wg-chip[data-tone="off"] { background: transparent; color: var(--wg-fg-3); box-shadow: inset 0 0 0 1px var(--wg-line); }

/* Action rows: the Roadmap UI row */
.wg-list { position: relative; }
.wg-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 8px 8px; border-bottom: 1px solid var(--wg-line); background: var(--wg-win); }
.wg-row:last-child { border-bottom-color: transparent; }
.wg-row.is-leaving { position: absolute; left: 0; right: 0; pointer-events: none; }
.wg-idx { font-size: 12px; line-height: 20px; color: var(--wg-fg-3); font-variant-numeric: tabular-nums; }
.wg-row-main { display: grid; min-width: 0; }
.wg-row-title { font-weight: 600; letter-spacing: -0.006em; }
.wg-row-data { font-size: 13px; color: var(--wg-fg-3); }
.wg-row-meta { display: grid; grid-template-columns: 124px 132px 112px; column-gap: 12px; align-items: center; height: 20px; font-size: 13px; color: var(--wg-fg-2); }
.wg-list-noamount .wg-row-meta { grid-template-columns: 124px 132px; }
.wg-list-noamount .wg-amount { display: none; }
.wg-level, .wg-when { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.wg-amount { text-align: right; font-weight: 500; color: var(--wg-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wg-glyph { width: 15px; height: 13px; flex: none; }
.wg-glyph rect { fill: var(--wg-off); }
.wg-glyph rect.on { fill: var(--wg-accent); }
.wg-horizon { width: 13px; height: 13px; flex: none; }
.wg-h-ring { fill: none; stroke: var(--wg-fg-3); stroke-width: 1.5; }
.wg-h-half, .wg-h-full { fill: var(--wg-fg-3); opacity: 0; }
.wg-when[data-horizon="now"] .wg-h-full { opacity: 1; }
.wg-when[data-horizon="months"] .wg-h-half { opacity: 1; }
.wg-when[data-horizon="now"] .wg-h-ring, .wg-when[data-horizon="now"] .wg-h-full { stroke: var(--wg-accent); fill: var(--wg-accent); }
.wg-when[data-horizon="now"] .wg-h-ring { fill: none; }
.wg-listhead { display: grid; grid-template-columns: 18px minmax(0, 1fr) 124px 132px 112px; column-gap: 12px; padding: 0 8px 7px; border-bottom: 1px solid var(--wg-line); font-size: 12px; line-height: 16px; color: var(--wg-fg-3); }
.wg-lh-amount { text-align: right; }

.wg-link { display: inline-flex; align-items: baseline; gap: 8px; justify-self: start; font-size: 14px; font-weight: 500; color: var(--wg-accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color 120ms ease; }
.wg-arr { display: inline-block; text-decoration: none; transition: transform 120ms var(--wg-ease); }
@media (hover: hover) and (pointer: fine) { .wg-link:hover { text-decoration-color: currentColor; } .wg-link:hover .wg-arr { transform: translateX(3px); } }

/* ── 1. Costi: controls left, the receipt right ── */
.wg-costi-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wg-amount-field { display: grid; gap: 10px; }
.wg-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wg-preset { appearance: none; height: 32px; border: 0; border-radius: 6px; background: var(--wg-win); box-shadow: 0 0 0 1px var(--wg-line); color: var(--wg-fg-2); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; transition: box-shadow 120ms ease, color 120ms ease, transform 120ms var(--wg-ease); }
.wg-preset[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--wg-accent); color: var(--wg-fg); }
.wg-preset:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .wg-preset:hover { color: var(--wg-fg); } }
.wg-receipt { display: grid; align-content: start; gap: 16px; padding: 20px 24px; min-width: 0; }
.wg-total { display: grid; gap: 2px; padding: 16px 16px 14px; border-radius: 12px; background: var(--wg-side); box-shadow: inset 0 0 0 1px var(--wg-line-warm); }
.wg-total-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wg-big { margin-top: 4px; font-size: 48px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: var(--wg-fg); white-space: nowrap; }
.wg-total-sub { font-size: 14px; color: var(--wg-fg-2); }
.wg-lines { display: grid; }
.wg-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 2px; border-bottom: 1px dashed var(--wg-line); font-size: 14px; }
.wg-line:last-child { border-bottom: 0; }
.wg-line dt { color: var(--wg-fg-3); }
.wg-line dd { font-weight: 500; color: var(--wg-fg); white-space: nowrap; }
.wg-line.is-gain dd { color: var(--wg-ok-fg); font-weight: 600; }
.wg-alt { display: grid; gap: 4px; padding-top: 4px; border-top: 1px solid var(--wg-line); }
.wg-alt-title { padding: 8px 2px 0; font-size: 14px; font-weight: 600; letter-spacing: -0.006em; }
.wg-product-note { margin-top: -8px; font-size: 13px; line-height: 18px; color: var(--wg-fg-3); text-wrap: pretty; }
.wg-costi-body { grid-template-rows: minmax(0, 1fr) auto; }
.wg-costi-body .wg-controls { grid-column: 1; grid-row: 1; }
.wg-costi-body .wg-receipt { grid-column: 2; grid-row: 1 / span 2; }
.wg-costi-cta { grid-column: 1; grid-row: 2; padding: 4px 20px 20px; background: var(--wg-side); border-right: 1px solid var(--wg-line-warm); }

/* ── 2. Piramide: selectors left; right, the pyramid drawn in tratto di progetto with its rows, then where to start ── */
.wg-win-bare { box-shadow: var(--wg-shadow); }
.wg-pyr-body { grid-template-columns: 380px minmax(0, 1fr); grid-template-areas: "controls levels" "controls plan"; align-items: start; }
.wg-pyr-controls { grid-area: controls; align-self: stretch; gap: 14px; }
.wg-pyr-controls .wg-field { gap: 6px; }
.wg-pyr-levels { grid-area: levels; display: grid; gap: 16px; padding: 20px 24px 8px; min-width: 0; }
.wg-pyr-plan { grid-area: plan; display: grid; gap: 8px; padding: 12px 24px 22px; min-width: 0; }
.wg-pyr-plan .wg-link { margin-top: 4px; }
.wg-pyr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wg-score-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wg-fg-3); }
.wg-score-val { font-size: 18px; line-height: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--wg-fg); }
.wg-score-max { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--wg-fg-3); }

/* The drawing: line and guides take the theme, the Solido fill is always the logo blue */
.wg-tr-fig { --tr-w: 360px; position: relative; display: grid; grid-template-columns: var(--tr-w) minmax(0, 1fr); margin: 0; }
.wg-tr { --tr-line: #02376c; --tr-k: #9db2cc; --tr-face: var(--wg-win); width: var(--tr-w); height: auto; display: block; overflow: visible; color: var(--tr-line); }
.wg-sec[data-theme="dark"] .wg-tr { --tr-line: rgb(143 180 240); --tr-k: rgb(143 180 240 / 0.4); }
@media (prefers-color-scheme: dark) { .wg-sec[data-theme="auto"] .wg-tr { --tr-line: rgb(143 180 240); --tr-k: rgb(143 180 240 / 0.4); } }
.wg-tr-s { fill: none; stroke: var(--tr-line); stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wg-tr-thin { stroke-width: 0.9; }
.wg-tr-k { fill: none; stroke: var(--tr-k); stroke-width: 0.9; stroke-dasharray: 2 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wg-tr-axis { stroke-dasharray: 10 3 2 3; }
/* The state is the density of the hero's lines: all seven, every other one, the outline with the blue dot, the dashed outline */
.wg-tr-ln { opacity: 0; transition: opacity 120ms ease-out; }
.wg-tr-lv[data-status="strong"] .wg-tr-ln, .wg-tr-lv[data-status="partial"] .wg-tr-ln:nth-child(odd) { opacity: 1; }
.wg-tr-edge, .wg-tr-dash, .wg-tr-dot { opacity: 0; transition: opacity 120ms ease-out, transform 180ms var(--wg-ease); }
.wg-tr-edge { fill: none; stroke: var(--tr-line); stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wg-tr-dash { fill: none; stroke: var(--tr-line); stroke-width: 1.1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.wg-tr-dot { fill: #027dfa; transform: scale(0.5); transform-box: fill-box; transform-origin: center; }
.wg-tr-lv[data-status="developing"] .wg-tr-edge, .wg-tr-lv[data-status="absent"] .wg-tr-dash { opacity: 1; }
.wg-tr-lv[data-status="developing"] .wg-tr-dot { opacity: 1; transform: none; }

/* Rows sit on the guides: each one is centred on its block */
.wg-tr-rows { position: relative; min-width: 0; }
.wg-tr-row { position: absolute; left: 12px; right: 0; display: grid; gap: 1px; transform: translateY(-50%); }
.wg-tr-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wg-tr-name { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.006em; color: var(--wg-fg); white-space: nowrap; }
.wg-tr-row .wg-chip { height: 20px; padding: 0 7px; font-size: 12px; }
.wg-tr-fact { font-size: 13px; line-height: 17px; color: var(--wg-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wg-start-card { display: grid; gap: 4px; padding: 12px 14px 13px; border-radius: 12px; background: var(--wg-side); box-shadow: inset 0 0 0 1px var(--wg-line-warm); }
.wg-start-level { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wg-fg-2); }
.wg-start-level .wg-when { margin-left: auto; }
.wg-start-title { margin-top: 2px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.wg-start-data { font-size: 13px; line-height: 18px; color: var(--wg-fg-3); text-wrap: pretty; }

/* ── 2b. Piramide progressiva: one panel; the question is a strip on top, the result below (ring, levels, first action) ── */
.wg-ck .wg-ck-q { display: grid; gap: 12px; min-height: 0; padding: 18px 20px 14px; background: var(--wg-side); border-bottom: 1px solid var(--wg-line-warm); }
.wg-ck .wg-q-text { margin-bottom: 10px; }
.wg-ck .wg-opts { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.wg-ck .wg-opt { min-height: 44px; }
.wg-ck .wg-quiz-done { grid-template-columns: auto auto 1fr; align-items: center; gap: 16px; justify-items: start; padding-top: 0; }
.wg-ck .wg-done-title { grid-column: 1 / -1; }
.wg-ck-qfoot { display: flex; align-items: center; gap: 16px; min-height: 28px; }
.wg-ck .wg-steps { flex: 0 0 160px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wg-ck .wg-quiz-nav { flex: 1; }
.wg-ck-result { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "score levels" "first first"; gap: 18px 32px; align-items: center; padding: 20px 20px 22px; }
.wg-ck-score { grid-area: score; display: flex; align-items: center; gap: 18px; }
.wg-ck-ring { position: relative; width: 112px; height: 112px; flex: none; }
.wg-ck-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wg-ck-ring circle { fill: none; stroke-width: 8; }
.wg-ck-track { stroke: var(--wg-off); }
.wg-ck-arc { stroke: var(--wg-accent); stroke-linecap: round; }
.wg-ck-ring[data-tone="warn"] .wg-ck-arc { stroke: var(--wg-warn-stroke); }
.wg-ck-ring[data-tone="ok"] .wg-ck-arc { stroke: var(--wg-ok-fg); }
.wg-ck-ring[data-tone="off"] .wg-ck-arc { stroke: transparent; }
.wg-ck-num { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1; }
.wg-ck-num .tnum { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; color: var(--wg-fg); }
.wg-ck-max { margin-top: 4px; font-size: 12px; color: var(--wg-fg-3); }
.wg-ck-band { display: grid; gap: 6px; justify-items: start; }
.wg-ck-lvs { grid-area: levels; display: grid; border-top: 1px solid var(--wg-line); }
.wg-ck-lv { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--wg-line); }
.wg-ck-name { font-size: 14px; font-weight: 500; color: var(--wg-fg); }
.wg-ck-st { font-size: 13px; font-weight: 500; color: var(--wg-fg-3); }
.wg-ck-lv[data-tone="ok"] .wg-ck-st { color: var(--wg-ok-fg); }
.wg-ck-lv[data-tone="warn"] .wg-ck-st { color: var(--wg-warn-fg); }
.wg-ck-lv[data-tone="pending"] .wg-ck-name { color: var(--wg-fg-3); }
.wg-ck-lv[data-tone="pending"] .wg-glyph rect.on { fill: var(--wg-off); }
.wg-ck-first { grid-area: first; display: grid; gap: 8px; }

/* ── 2c. Il tuo piano (Prima la base): the step's inputs in the strip, the coverage ring and the ordered plan below ── */
.wg-pl .wg-pl-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.wg-pl .wg-pl-fields > fieldset { grid-column: 1 / -1; }
.wg-pl .wg-pl-step[data-step="1"] .wg-pl-fields, .wg-pl .wg-pl-step[data-step="2"] .wg-pl-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wg-pl .wg-pl-step[data-step="1"] .wg-pl-fields > fieldset { grid-column: auto; }
.wg-pl .wg-pl-step[data-step="2"] .wg-pl-fields > fieldset { grid-column: auto; }
.wg-pl .wg-pl-kid, .wg-pl .wg-pl-cap { display: grid; }
.wg-pl .wg-seg-wrap .wg-seg-opt span { min-height: 34px; }
.wg-pl-next { appearance: none; height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: #0373e2; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 120ms ease, transform 120ms var(--wg-ease); }
.wg-pl-next:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .wg-pl-next:hover { background: var(--brand-press, #025eba); } }
.wg-pl .wg-quiz-nav { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.wg-pl .wg-quiz-done { grid-template-columns: auto auto 1fr; }
.wg-pl-result { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "score plan" "note note"; align-items: start; }
.wg-pl .wg-ck-score { grid-area: score; align-items: flex-start; }
.wg-pl-plan { grid-area: plan; display: grid; gap: 8px; min-width: 0; }
.wg-pl-plan .wg-list { border-top: 1px solid var(--wg-line); }
.wg-pl-row .wg-row-title { font-weight: 500; text-wrap: pretty; }
.wg-pl-row .wg-row-meta { grid-template-columns: 124px 92px; }
.wg-pl-reserve { display: flex; align-items: center; gap: 8px; }
.wg-pl-band { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--wg-fg); text-wrap: balance; }
.wg-pl-result[data-state="empty"] .wg-pl-band { color: var(--wg-fg-3); font-weight: 400; }
.wg-pl-lv { font-size: 14px; font-weight: 600; color: var(--wg-fg); }
.wg-pl-kpis { display: grid; gap: 4px; margin-top: 4px; }
.wg-pl-kpis div { display: flex; gap: 8px; font-size: 13px; }
.wg-pl-kpis dt { color: var(--wg-fg-3); }
.wg-pl-kpis dd { color: var(--wg-fg); font-weight: 500; }
.wg-pl-none { font-size: 14px; color: var(--wg-fg-2); }
.wg-pl-note { grid-area: note; font-size: 12px; line-height: 16px; color: var(--wg-fg-3); }
.wg-ck-ring[data-tone="red"] .wg-ck-arc { stroke: var(--wg-red-stroke); }
.wg-pl-result[data-state="empty"] .wg-pl-reserve .wg-pl-lv { color: var(--wg-fg-3); }

/* ── 2d. Piramide, modalità essenziale: two sliders, the ring with its threshold, one action ── */
/* Concentric radii on the site tokens: window 12 (--r-card) with 20 px inside, the action card 8 (--r-btn), controls 6 (--r-ctl). */
.wg-ess .wg-ess-q { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; padding: 20px; background: var(--wg-side); border-bottom: 1px solid var(--wg-line-warm); }
.wg-ess-res { grid-template-columns: 320px minmax(0, 1fr); grid-template-areas: "score first" "foot foot"; gap: 20px 24px; padding: 20px; align-items: start; }
.wg-ess .wg-ck-score { grid-area: score; align-items: flex-start; }
.wg-ess-first { grid-area: first; display: grid; gap: 8px; min-width: 0; }
.wg-ess-first .wg-start-card { border-radius: 8px; padding: 12px; }
.wg-ess-first .wg-start-title { font-weight: 500; letter-spacing: -0.006em; }
.wg-ess-first .wg-start-data { font-size: 14px; line-height: 20px; }
.wg-ess-foot { grid-area: foot; padding-top: 16px; border-top: 1px solid var(--wg-line); }
/* The disclaimer sits under the panel, on the section's own tokens. */
.wg-ess-note { max-width: 64ch; margin-top: 12px; padding: 0 4px; }
/* From 1024 px the sliders sit left and the result right, so the panel stays short.
   Under 1280 the ring stacks over its band, leaving the action card room for its title. */
@media (min-width: 1024px) {
  .wg-ess { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
  .wg-ess > .wg-titlebar { grid-column: 1 / -1; }
  .wg-ess .wg-ess-q { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; border-bottom: 0; border-right: 1px solid var(--wg-line-warm); }
  .wg-ess-res { grid-template-columns: 168px minmax(0, 1fr); align-content: start; }
  .wg-ess .wg-ck-score { flex-direction: column; gap: 12px; }
}
@media (min-width: 1280px) {
  .wg-ess { grid-template-columns: 340px minmax(0, 1fr); }
  .wg-ess-res { grid-template-columns: 340px minmax(0, 1fr); }
  .wg-ess .wg-ck-score { flex-direction: row; gap: 18px; }
}

/* ── 3. Anteprima ── */
.wg-ant { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 16px; align-items: start; }
.wg-quiz-body { display: grid; gap: 16px; padding: 18px 20px 20px; background: var(--wg-side); min-height: 340px; align-content: start; }
.wg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.wg-step-seg { height: 3px; border-radius: 999px; background: var(--wg-off); overflow: hidden; }
.wg-step-seg span { display: block; height: 100%; background: var(--wg-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 320ms var(--wg-ease); }
.wg-step-seg.is-on span { transform: scaleX(1); }
.wg-q { display: grid; gap: 12px; }
.wg-sec plannix-anteprima:not(.is-stepper) .wg-q + .wg-q { padding-top: 16px; border-top: 1px solid var(--wg-line-warm); }
.wg-q-text { display: grid; gap: 4px; margin-bottom: 12px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.012em; color: var(--wg-fg); }
.wg-q-count { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0; color: var(--wg-fg-3); }
.wg-opts { display: grid; gap: 6px; }
.wg-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 8px; background: var(--wg-win); box-shadow: 0 0 0 1px var(--wg-line); cursor: pointer; transition: box-shadow 120ms ease, transform 120ms var(--wg-ease); }
.wg-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wg-opt:active { transform: scale(0.985); }
.wg-opt-dot { width: 14px; height: 14px; flex: none; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--wg-fg-4); transition: box-shadow 120ms ease; }
.wg-opt:has(input:checked) { box-shadow: 0 0 0 1.5px var(--wg-accent); }
.wg-opt:has(input:checked) .wg-opt-dot { box-shadow: inset 0 0 0 4.5px var(--wg-accent); }
.wg-opt:has(input:focus-visible) { outline: 2px solid var(--wg-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .wg-opt:hover { box-shadow: 0 0 0 1px var(--wg-fg-4); } .wg-opt:has(input:checked):hover { box-shadow: 0 0 0 1.5px var(--wg-accent); } }
.wg-quiz-nav { display: flex; }
.wg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wg-quiz-nav { justify-content: space-between; }
.wg-next { margin-left: auto; }

.wg-quiz-done { display: grid; justify-items: start; gap: 12px; padding-top: 8px; }
.wg-done-title { font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.012em; }
.wg-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 8px; background: #0373e2; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color 120ms ease, transform 120ms var(--wg-ease); }
.wg-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .wg-btn:hover { background: var(--brand-press, #025eba); } }
.wg-textbtn { appearance: none; border: 0; background: none; padding: 4px 0; font-size: 13px; color: var(--wg-fg-3); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.wg-preview-body, .wg-vita-main { display: grid; align-content: start; padding: 16px 20px 14px; min-width: 0; }
.wg-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wg-preview-title { font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.012em; }
.wg-persona { margin: 2px 0 14px; font-size: 13px; color: var(--wg-fg-3); }
.wg-persona::first-letter { text-transform: uppercase; }
.wg-preview .wg-listhead { grid-template-columns: 18px minmax(0, 1fr) 124px 132px; }
.wg-reviewer { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--wg-side); box-shadow: inset 0 0 0 1px var(--wg-line-warm); }
.wg-avatar { display: block; width: 28px; height: 28px; flex: none; border-radius: 999px; object-fit: cover; background: var(--wg-sand); box-shadow: 0 0 0 1px var(--wg-line-warm); }
.wg-avatar svg { width: 16px; height: 16px; fill: none; stroke: #8a7d68; stroke-width: 1.5; stroke-linecap: round; }
.wg-reviewer-text { display: grid; flex: 1; min-width: 0; font-size: 13px; line-height: 17px; }
.wg-reviewer-name { font-weight: 600; color: var(--wg-fg); }
.wg-reviewer-role { color: var(--wg-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 4. Vita ── */
.wg-vita-body { grid-template-columns: 300px minmax(0, 1fr); }
.wg-toggles { display: grid; gap: 6px; }
.wg-toggle { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 8px; background: var(--wg-win); box-shadow: 0 0 0 1px var(--wg-line); cursor: pointer; transition: box-shadow 120ms ease, transform 120ms var(--wg-ease); }
.wg-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wg-toggle:active { transform: scale(0.985); }
.wg-toggle-box { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--wg-fg-4); transition: background-color 120ms ease, box-shadow 120ms ease; }
.wg-toggle-box svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.6); transition: opacity 120ms ease, transform 120ms var(--wg-ease); }
.wg-toggle:has(input:checked) { box-shadow: 0 0 0 1.5px var(--wg-accent); }
.wg-toggle:has(input:checked) .wg-toggle-box { background: var(--wg-accent); box-shadow: none; }
.wg-toggle:has(input:checked) .wg-toggle-box svg { opacity: 1; transform: none; }
.wg-toggle:has(input:focus-visible) { outline: 2px solid var(--wg-accent); outline-offset: 2px; }
.wg-toggle-text { font-size: 14px; font-weight: 500; }
.wg-toggle-date { font-size: 12px; color: var(--wg-fg-3); font-variant-numeric: tabular-nums; }
.wg-revisions { font-size: 13px; color: var(--wg-fg-3); white-space: nowrap; }
.wg-activity { display: grid; gap: 6px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--wg-line); min-height: 34px; }
.wg-activity li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; font-size: 13px; color: var(--wg-fg-3); }
.wg-activity strong { font-weight: 500; color: var(--wg-fg-2); }
.wg-activity time { font-size: 12px; font-variant-numeric: tabular-nums; }
.wg-act-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--wg-off); transform: translateY(-1px); }
.wg-activity li:first-child .wg-act-dot { background: var(--wg-accent); }
.wg-change { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; padding: 0 5px; border-radius: 6px; background: var(--wg-neutral-bg); color: var(--wg-fg-2); font-variant-numeric: tabular-nums; }
.wg-change svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Wide: the drawing grows to the height of the selectors */
@media (min-width: 1101px) {
  .wg-pyr-levels { align-content: start; gap: 24px; padding-top: 24px; }
  .wg-tr-fig { --tr-w: 500px; }
  .wg-tr-fact { white-space: normal; max-width: 34ch; }
}

/* Mid widths */
@media (max-width: 1100px) {
  .wg-pyr-body { grid-template-columns: 320px minmax(0, 1fr); }
}

/* Phone first (64% of traffic): result above the controls, so it changes under the thumb without scrolling;
   every target at least 44px; one column, meta under the row title. */
@media (max-width: 760px) {
  .wg-h2 { font-size: 28px; }
  .wg-head { margin-bottom: 20px; }
  .wg-controls { gap: 16px; padding: 16px; border-right: 0; border-bottom: 1px solid var(--wg-line-warm); }
  .wg-field { gap: 6px; }
  .wg-range { height: 44px; }
  .wg-range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; }
  .wg-range::-moz-range-thumb { width: 28px; height: 28px; }
  .wg-range-value { font-size: 18px; }
  .wg-seg-opt span { height: 44px; font-size: 14px; }
  .wg-seg-wrap .wg-seg { flex-direction: row; }
  .wg-seg-wrap .wg-seg-opt { flex: 1 1 0; }
  .wg-seg-wrap .wg-seg-opt span { justify-content: center; padding: 0 6px; white-space: normal; text-align: center; line-height: 15px; font-size: 13px; }

  /* Costi: inputs first, then the result in one piece (total, years, ETF case), then the CTA */
  .wg-costi-body { display: flex; flex-direction: column; align-items: stretch; }
  .wg-costi-body .wg-controls { order: 1; border-right: 0; border-bottom: 1px solid var(--wg-line-warm); }
  .wg-costi-body .wg-receipt { order: 2; gap: 14px; padding: 16px 16px 0; }
  .wg-costi-cta { order: 3; padding: 24px 16px 16px; background: transparent; border-right: 0; }
  .wg-big { font-size: 36px; }
  .wg-presets { gap: 6px; }
  .wg-preset { height: 44px; font-size: 14px; }
  .wg-seg-grid .wg-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wg-seg-grid .wg-seg-opt span { min-height: 44px; }
  .wg-costi-cta .wg-btn { width: 100%; justify-content: center; height: 44px; }

  /* Piramide: the drawing and the four states stay pinned on top while the thumb works the selectors; then where to start */
  .wg-pyr-body { display: flex; flex-direction: column; align-items: stretch; }
  .wg-pyr-levels { order: 1; position: sticky; top: var(--wg-sticky-top, 0px); z-index: 2; gap: 8px; padding: 12px 14px 10px; background: var(--wg-win); box-shadow: 0 1px 0 var(--wg-line), 0 10px 16px -14px rgb(0 0 0 / 0.45); }
  .wg-pyr-controls { order: 2; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--wg-line-warm); }
  .wg-pyr-plan { order: 3; padding: 14px 16px 18px; }
  .wg-tr-fig { --tr-w: 156px; }
  .wg-pyr-head { gap: 8px; }
  .wg-pyr-head .wg-preview-title { white-space: nowrap; font-size: 14px; }
  .wg-score-inline { gap: 6px; white-space: nowrap; }
  .wg-score-max { display: none; }
  .wg-tr-row { left: 10px; }
  .wg-tr-name { font-size: 13px; line-height: 18px; }
  .wg-tr-fact { display: none; }
  .wg-seg-wrap .wg-seg-opt span { min-height: 44px; }

  /* Piramide progressiva: question, then score, then the first action (the result sits right under the answers) */
  .wg-ck { display: flex; flex-direction: column; }
  .wg-ck .wg-titlebar { order: 0; }
  .wg-ck .wg-ck-q { order: 1; padding: 14px 16px 12px; }
  .wg-ck-result { order: 2; grid-template-columns: minmax(0, 1fr); grid-template-areas: "score" "levels" "first"; gap: 12px; padding: 14px 14px 16px; }
  .wg-ck .wg-opts { grid-auto-flow: row; grid-auto-columns: auto; gap: 6px; }
  .wg-ck .wg-quiz-done { grid-template-columns: minmax(0, 1fr); }
  .wg-ck .wg-quiz-done .wg-btn { width: 100%; justify-content: center; height: 44px; }
  .wg-ck .wg-steps { flex: 1 1 auto; }
  .wg-ck .wg-quiz-nav { flex: none; }
  .wg-ck-score { gap: 14px; }
  .wg-ck-ring { width: 84px; height: 84px; }
  .wg-ck-num .tnum { font-size: 28px; }
  .wg-ck-lv { min-height: 36px; }

  /* Il tuo piano: one column; the step's inputs, then the ring and the plan right under them */
  .wg-pl .wg-pl-fields, .wg-pl .wg-pl-step[data-step="1"] .wg-pl-fields, .wg-pl .wg-pl-step[data-step="2"] .wg-pl-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wg-pl .wg-seg-wrap .wg-seg-opt span { min-height: 44px; }
  .wg-pl-next { height: 44px; padding: 0 18px; }
  .wg-pl-result { grid-template-columns: minmax(0, 1fr); grid-template-areas: "score" "plan" "note"; }
  .wg-pl .wg-quiz-done { grid-template-columns: minmax(0, 1fr); }

  /* Essenziale: the two sliders, then the ring, the action and the link */
  .wg-ess .wg-ess-q { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
  .wg-ess-res { grid-template-columns: minmax(0, 1fr); grid-template-areas: "score" "first" "foot"; gap: 16px; padding: 16px; }

  /* Anteprima: the plan on top, the questions under the thumb */
  .wg-ant { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .wg-quiz .wg-titlebar { display: none; }
  .wg-preview { order: 1; }
  .wg-quiz { order: 2; }
  .wg-preview .wg-row:nth-child(n + 4) { display: none; }
  .wg-quiz-body { min-height: 0; gap: 12px; padding: 14px 16px 12px; }
  .wg-q-text { margin-bottom: 8px; font-size: 16px; }
  .wg-opts { gap: 6px; }
  .wg-opt { min-height: 44px; }
  .wg-preview-body, .wg-vita-main { padding: 12px 12px 10px; }
  .wg-persona { margin-bottom: 6px; padding-inline: 4px; }
  .wg-preview-head { padding-inline: 4px; }
  .wg-reviewer { margin-top: 6px; padding: 8px 10px; }
  .wg-reviewer-role { white-space: normal; }

  /* Vita: events as a 2x2 grid so the top of the plan stays in view */
  .wg-vita-body { display: flex; flex-direction: column; }
  .wg-toggles { grid-template-columns: 1fr 1fr; }
  .wg-toggle { grid-template-columns: 16px minmax(0, 1fr); align-items: start; min-height: 56px; padding: 10px; gap: 8px; }
  .wg-toggle-text { font-size: 13px; line-height: 17px; }
  .wg-toggle-date { grid-column: 2; font-size: 12px; }
  .wg-toggle-box { margin-top: 1px; }

  .wg-listhead { display: none; }
  .wg-row { position: relative; grid-template-columns: 16px minmax(0, 1fr); row-gap: 4px; padding: 10px 6px; }
  .wg-list:not(.wg-list-noamount) .wg-row-main { padding-right: 104px; }
  .wg-row-meta, .wg-list-noamount .wg-row-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 14px; height: auto; font-size: 13px; }
  .wg-amount { position: absolute; top: 10px; right: 6px; font-size: 13px; line-height: 20px; }
  .wg-activity li { font-size: 13px; }
}

/* Touch screens of any width: a 44px slider and 44px segments */
/* Phones: no text under 13 px (DECISIONI, small 13-14). */
@media (max-width: 639px) {
  :is(.wg-chip, .wg-tr-row .wg-chip, .wg-idx, .wg-listhead, .wg-score-max, .wg-ck-max, .wg-pl-note, .wg-q-count, .wg-toggle-date, .wg-activity time) { font-size: 13px; }
}
@media (pointer: coarse) {
  .wg-range { height: 44px; }
  .wg-range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; }
  .wg-range::-moz-range-thumb { width: 28px; height: 28px; }
  .wg-seg-opt span { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .wg-sec *, .wg-sec *::before, .wg-sec *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
}