/* Openness Factor — stile.
   Stile Pellini (Manuale Brand Identity) con le regole di usabilità Apple (HIG). Variante A "Pellini editoriale".
   Colori del manuale: blu 7546 C #243646, beige 4525 C #c6b784; palette web: blu/nero #12232e,
   azzurro chiaro #007cc7, azzurro #4da8da, fondo #eefbfb, grigio #dddddd.
   Le tinte derivate sono proposte con contrasto calcolato (docs/DESIGN.md). Font: IBM Plex Sans (OFL). */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/IBMPlexSans-Regular-Pi.woff2") format("woff2"); unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083, U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+EBE1-EBE7, U+ECE0, U+EFCC; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/IBMPlexSans-Regular-Greek.woff2") format("woff2"); unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/IBMPlexSans-SemiBold-Pi.woff2") format("woff2"); unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083, U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+EBE1-EBE7, U+ECE0, U+EFCC; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/IBMPlexSans-Bold-Pi.woff2") format("woff2"); unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083, U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+EBE1-EBE7, U+ECE0, U+EFCC; }

/* ---------- Token: tema chiaro ---------- */
:root {
  color-scheme: light;
  --of-navy: #243646;          /* Pantone 7546 C */
  --of-beige: #c6b784;         /* Pantone 4525 C */
  --of-blu-notte: #12232e;     /* palette web */
  --of-aqua: #eefbfb;          /* palette web, fondo */

  --of-bg: var(--of-aqua);
  --of-surface: #ffffff;
  --of-fill: #e9eef1;          /* binario dei segmenti e dei cursori, campo calcolato */
  --of-text: var(--of-navy);
  --of-text-2: #5b6874;        /* derivata: 5,6:1 su bianco */
  --of-text-3: #66727e;        /* derivata: 4,9:1 su bianco, 4,6:1 sul fondo */
  --of-border: #879099;        /* derivata: ≥ 3:1 su bianco (bordi dei campi) */
  --of-separator: #dddddd;     /* palette web, grigio (solo decorativo) */
  --of-accent: var(--of-navy);
  --of-on-accent: #ffffff;
  --of-link: #0273b8;          /* derivata dall'azzurro #007cc7: 5,1:1 su bianco */
  --of-focus: #007cc7;
  --of-header-bg: var(--of-navy);
  --of-header-text: #ffffff;
  --of-header-text-2: #c9d3da;
  --of-header-rule: var(--of-beige);
  --of-danger: #b3261e;
  --of-danger-bg: #fdecea;
  --of-warning: #8a5300;
  --of-warning-bg: #fff1dc;
  --of-success: #247f64;
  --of-film: var(--of-navy);
  --of-hole: var(--of-aqua);
  --of-hole-collision: #ff8a7a;
  --of-dim: var(--of-beige);
  --of-dim-text: #ffffff;
  --of-grid: rgba(238, 251, 251, 0.45);
  --of-toast-bg: var(--of-blu-notte);
  --of-toast-text: #ffffff;
  --of-toast-action: var(--of-beige);
  --of-menu-shadow: 0 12px 32px rgba(18, 35, 46, 0.22), 0 0 0 1px rgba(18, 35, 46, 0.08);

  --of-radius-card: 0px;
  --of-radius-field: 0px;
  --of-radius-control: 999px;

  --of-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --of-fs-hero: 40px; --of-fs-title: 20px; --of-fs-body: 17px; --of-fs-callout: 15px; --of-fs-caption: 13px; --of-fs-eyebrow: 12px;
  --of-gap: 16px;
}

/* ---------- Tema scuro: automatico (impostazione del dispositivo) o forzato con data-theme ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --of-bg: var(--of-blu-notte); --of-surface: #1a2e3b; --of-fill: #223847;
    --of-text: var(--of-aqua); --of-text-2: #b5c3cc; --of-text-3: #93a5b1; --of-border: #738a9b; --of-separator: #2c4351;
    --of-accent: var(--of-beige); --of-on-accent: var(--of-blu-notte); --of-link: #4da8da; --of-focus: #4da8da;
    --of-header-bg: #0d1a23;
    --of-danger: #ff8a7a; --of-danger-bg: #3a2a2e; --of-warning: #ffc266; --of-warning-bg: #3a3326; --of-success: #5fd3a8;
    --of-film: #0d1a23; --of-grid: rgba(238, 251, 251, 0.42);
    --of-toast-bg: var(--of-aqua); --of-toast-text: var(--of-blu-notte); --of-toast-action: var(--of-navy);
    --of-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(238, 251, 251, 0.1);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --of-bg: var(--of-blu-notte); --of-surface: #1a2e3b; --of-fill: #223847;
  --of-text: var(--of-aqua); --of-text-2: #b5c3cc; --of-text-3: #93a5b1; --of-border: #738a9b; --of-separator: #2c4351;
  --of-accent: var(--of-beige); --of-on-accent: var(--of-blu-notte); --of-link: #4da8da; --of-focus: #4da8da;
  --of-header-bg: #0d1a23;
  --of-danger: #ff8a7a; --of-danger-bg: #3a2a2e; --of-warning: #ffc266; --of-warning-bg: #3a3326; --of-success: #5fd3a8;
  --of-film: #0d1a23; --of-grid: rgba(238, 251, 251, 0.42);
  --of-toast-bg: var(--of-aqua); --of-toast-text: var(--of-blu-notte); --of-toast-action: var(--of-navy);
  --of-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(238, 251, 251, 0.1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: var(--of-font); font-size: var(--of-fs-body); line-height: 1.4;
  color: var(--of-text); background: var(--of-bg);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--of-focus); outline-offset: 2px; }
.appbar :focus-visible, .skip:focus-visible { outline-color: var(--of-header-rule); }
.toast :focus-visible { outline-color: var(--of-toast-action); }
/* un controllo che riceve il focus non finisce sotto la parte fissa (barra e, sul telefono, anteprima) */
html { scroll-padding-top: var(--margine-fisso, 64px); }
a { color: var(--of-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--of-surface); color: var(--of-text); }
.skip:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Barra superiore ---------- */
.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  background: var(--of-header-bg); color: var(--of-header-text);
  border-bottom: 2px solid var(--of-header-rule);
}
.appbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.appbar__icon { width: 28px; height: 28px; flex: none; border-radius: 7px; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }
.appbar__title { font-size: 17px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar__actions { display: flex; align-items: center; gap: 4px; }

.lang { display: inline-flex; padding: 2px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; }
.lang__opt { position: relative; min-width: 44px; height: 28px; padding: 0 8px; border: 0; border-radius: 999px; background: none; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--of-header-text-2); }
.lang__opt::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.lang__opt[aria-pressed="true"] { background: var(--of-header-rule); color: var(--of-navy); }

.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: inherit; }
.icon-btn svg { width: 22px; height: 22px; }
@media (hover: hover) { .icon-btn:hover { background: rgba(255, 255, 255, 0.12); } }

/* ---------- Anteprima ---------- */
.preview { position: relative; aspect-ratio: 1; background: var(--of-film); border-radius: var(--of-radius-card); overflow: hidden; touch-action: manipulation; }
.preview svg { display: block; width: 100%; height: 100%; }
.preview .hole { fill: var(--of-hole); }
.preview .hole--collision { fill: var(--of-hole-collision); }
.preview .grid-line { stroke: var(--of-grid); fill: none; }
.preview .lens-bg { fill: var(--of-film); stroke: var(--of-dim); }
.preview .dim { stroke: var(--of-dim); fill: none; stroke-linecap: square; }
.preview .dim-ring { fill: none; stroke: var(--of-dim); }
.preview .dim-text { fill: var(--of-dim-text); font-family: var(--of-font); font-weight: 600; stroke: var(--of-film); paint-order: stroke; stroke-linejoin: round; }
.preview__scale { position: absolute; left: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 3px; padding: 4px 6px; background: color-mix(in srgb, var(--of-film) 88%, transparent); font-size: 12px; font-weight: 600; color: var(--of-dim-text); pointer-events: none; }
.preview__scale i { display: block; height: 4px; border: 1.5px solid var(--of-dim); border-top: 0; }
.preview--piccola .preview__badge { display: none; }
/* zoom (v2.5): con il dito si scorre la pagina finché l'anteprima non è ingrandita */
.preview { touch-action: pan-y; }
.preview--zoom { touch-action: none; cursor: grab; }
.preview--zoom:active { cursor: grabbing; }
.preview .collision-mark { stroke: var(--of-navy); fill: none; stroke-linecap: round; }
.preview__zoom { position: absolute; left: 8px; top: 8px; display: flex; gap: 8px; }
.zoom-btn { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(238, 251, 251, 0.35); border-radius: 50%; background: color-mix(in srgb, var(--of-film) 82%, transparent); color: var(--of-dim-text); }
.zoom-btn::before { content: ""; position: absolute; inset: -4px; }
.zoom-btn svg { width: 18px; height: 18px; }
.zoom-btn:disabled { cursor: default; }
.zoom-btn:disabled svg { opacity: 0.35; }
.preview--piccola .preview__zoom { display: none; }
.preview__badge { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; background: color-mix(in srgb, var(--of-film) 88%, transparent); font-size: 12px; font-weight: 600; color: var(--of-dim-text); pointer-events: none; }

/* ---------- Risultato ---------- */
.result { background: var(--of-surface); border: 1px solid var(--of-separator); border-top: 2px solid var(--of-beige); border-radius: var(--of-radius-card); }
.result--strip { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; padding: 10px 14px; }
.result--card { padding: 18px 18px 16px; }
.eyebrow { margin: 0; font-size: var(--of-fs-eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--of-text-2); }
.result__value { margin: 2px 0 0; font-size: var(--of-fs-hero); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.result__value small { font-size: 0.55em; font-weight: 600; margin-left: 0.12em; }
.result--strip .result__value { font-size: 30px; }
.result__meta { display: grid; gap: 2px; justify-items: end; font-size: var(--of-fs-callout); color: var(--of-text-2); font-variant-numeric: tabular-nums; text-align: right; }
.result__meta b { color: var(--of-text); font-weight: 600; }
.result__computed { margin: 10px 0 0; font-size: var(--of-fs-callout); color: var(--of-text-2); }
.result__computed b { color: var(--of-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.result__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--of-separator); }
.result__grid dt { font-size: var(--of-fs-caption); color: var(--of-text-2); }
.result__grid dd { margin: 0; font-size: var(--of-fs-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.result__note { margin: 14px 0 0; font-size: var(--of-fs-caption); color: var(--of-text-3); }
.value--alert, .result__meta b.value--alert { color: var(--of-danger); }
.result__alert { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: var(--of-fs-caption); font-weight: 600; }
.result__alert svg { flex: none; width: 16px; height: 16px; }
.result__alert--danger { color: var(--of-danger); }
.result__alert--warning { color: var(--of-warning); }
.result--strip .result__alert { grid-column: 1 / -1; margin: 0; }

/* ---------- Barra azioni e menu ---------- */
.toolbar { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.tool { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 72px; min-height: 52px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--of-radius-field); background: none; color: var(--of-text); font-size: 12px; font-weight: 600; }
.tool svg { width: 22px; height: 22px; }
@media (hover: hover) { .tool:hover { background: var(--of-surface); border-color: var(--of-separator); } }
.tool[aria-expanded="true"] { background: var(--of-surface); border-color: var(--of-separator); }

.menu { z-index: 40; margin: 0; padding: 6px; min-width: 240px; max-width: calc(100vw - 24px); border: 0; border-radius: var(--of-radius-field); background: var(--of-surface); color: var(--of-text); box-shadow: var(--of-menu-shadow); position: fixed; inset: auto; }
.menu:focus, .sheet:focus { outline: none; }
.menu__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: none; text-align: left; font-size: var(--of-fs-callout); font-weight: 600; color: var(--of-text); }
.menu__item svg { width: 20px; height: 20px; flex: none; color: var(--of-text-2); }
.menu__item:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .menu__item:hover { background: var(--of-fill); } }
.menu__item[aria-checked="true"]::after { content: "✓"; content: "✓" / ""; margin-left: auto; font-weight: 700; }
.menu__item:disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) { .menu__item:disabled:hover { background: none; } }
.menu__sep { height: 1px; margin: 6px 4px; background: var(--of-separator); }

/* ---------- Sezioni, gruppi, controlli ---------- */
.section { display: grid; gap: 8px; }
.section__help { margin: 2px 0 0; font-size: var(--of-fs-caption); color: var(--of-text-2); }
.card { background: var(--of-surface); border: 1px solid var(--of-separator); border-radius: var(--of-radius-card); }
.card > * + * { border-top: 1px solid var(--of-separator); }

.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; background: var(--of-fill); border-radius: var(--of-radius-control); border: 0; margin: 0; min-inline-size: 0; }
.segmented legend { padding: 0; }
.segmented__opt { position: relative; display: grid; place-items: center; min-height: 40px; padding: 0 10px; border-radius: var(--of-radius-control); font-size: var(--of-fs-callout); font-weight: 600; color: var(--of-text-2); cursor: pointer; text-align: center; }
.segmented__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented__opt:has(input:checked) { background: var(--of-accent); color: var(--of-on-accent); }
.segmented__opt:has(input:focus-visible) { outline: 2px solid var(--of-focus); outline-offset: 2px; }

.field { display: grid; gap: 8px; padding: 12px 14px 14px; }
.field__head { display: flex; align-items: baseline; gap: 8px; }
.field__label { font-size: var(--of-fs-callout); font-weight: 600; }
.field__sym { font-size: var(--of-fs-callout); color: var(--of-text-2); }
.field__badge { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--of-text-2); background: var(--of-fill); padding: 2px 8px; border-radius: 999px; }
.field__control { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 12px; align-items: center; }
.field__msg { margin: 0; font-size: var(--of-fs-caption); color: var(--of-danger); }
.field--computed .input-unit { background: var(--of-fill); border-style: dashed; }
.field--computed .input-unit input { font-weight: 600; }
.field--invalid .input-unit { border-color: var(--of-danger); box-shadow: inset 0 0 0 1px var(--of-danger); }

.input-unit { display: flex; align-items: center; height: 44px; border: 1px solid var(--of-border); border-radius: var(--of-radius-field); background: var(--of-surface); overflow: hidden; }
.input-unit:focus-within { outline: 2px solid var(--of-focus); outline-offset: 1px; }
.input-unit input { width: 100%; min-width: 0; height: 100%; padding: 0 4px 0 10px; border: 0; background: none; font-size: var(--of-fs-body); text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.input-unit input[readonly] { cursor: default; }
.input-unit span { padding: 0 10px 0 4px; font-size: var(--of-fs-callout); color: var(--of-text-2); }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: none; cursor: pointer; --pct: 50%; touch-action: pan-y; }
input[type="range"]:disabled { cursor: default; opacity: 0.55; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--of-accent) var(--pct), var(--of-border) var(--pct)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--of-border); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--of-accent); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: #ffffff; border: 2px solid var(--of-accent); box-shadow: 0 2px 6px rgba(18, 35, 46, 0.25); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #ffffff; border: 2px solid var(--of-accent); box-shadow: 0 2px 6px rgba(18, 35, 46, 0.25); }

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; min-height: 52px; flex-wrap: wrap; }
.row__label { font-size: var(--of-fs-callout); font-weight: 600; }
.row__value { font-size: var(--of-fs-callout); color: var(--of-text-2); font-variant-numeric: tabular-nums; }
.row .segmented { flex: 1 1 200px; max-width: 260px; }

/* Messaggi */
.messages { display: grid; gap: 8px; }
.messages:empty { display: none; }
.message { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--of-radius-field); font-size: var(--of-fs-callout); line-height: 1.35; }
.message svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.message--warning { background: var(--of-warning-bg); color: var(--of-warning); }
.message--danger { background: var(--of-danger-bg); color: var(--of-danger); }

/* pannello reale (v2.10) */
.pannello__campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 12px 14px; }
.pannello__campi label { display: grid; gap: 4px; font-size: var(--of-fs-caption); color: var(--of-text-2); }
.pannello__campi .input-unit input { width: 100%; }
.pannello__campi input[aria-invalid="true"] { border-color: var(--of-danger); }
.pannello__risultati { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 12px 14px; }
.pannello__risultati dt { font-size: var(--of-fs-caption); color: var(--of-text-2); }
.pannello__risultati dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pannello__risultati dd.pannello__vuoto { font-weight: 400; font-size: var(--of-fs-caption); color: var(--of-text-2); }
.pannello__nota { margin: 0; padding: 10px 14px 12px; font-size: var(--of-fs-caption); color: var(--of-text-3); }

/* confronto varianti (v2.8): la tabella scorre dentro la scheda, mai la pagina */
.confronto__tabella { overflow-x: auto; }
.confronto__tabella:empty { display: none; }
.confronto table { width: 100%; border-collapse: collapse; font-size: var(--of-fs-caption); font-variant-numeric: tabular-nums; }
.confronto th, .confronto td { padding: 7px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--of-separator); }
.confronto thead th { vertical-align: bottom; font-weight: 600; color: var(--of-text-2); }
.confronto tbody th { text-align: left; font-weight: 400; color: var(--of-text-2); }
.confronto td.confronto__attuale { font-weight: 600; }
.confronto td.confronto__diverso { color: var(--of-link); font-weight: 600; }
.confronto tr:last-child > * { border-bottom: 0; }
.confronto__var { display: grid; justify-items: end; gap: 2px; }
.confronto__bottoni { display: flex; gap: 2px; }
.confronto__bottoni button { min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--of-link); font-size: var(--of-fs-caption); font-weight: 600; }
.confronto__vuoto { margin: 0; padding: 12px 14px 0; font-size: var(--of-fs-caption); color: var(--of-text-2); }
.confronto__tabella:empty + .confronto__vuoto { border-top: 0; }
.confronto__azioni { padding: 4px 6px; }
.btn-testo { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--of-link); font-weight: 600; }
.btn-testo:disabled { color: var(--of-text-3); cursor: default; }
.btn-testo:disabled [aria-hidden="true"] { display: none; }
.footnote { margin: 4px 0 24px; font-size: var(--of-fs-caption); color: var(--of-text-3); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--of-radius-field); background: var(--of-toast-bg); color: var(--of-toast-text); font-size: var(--of-fs-callout); box-shadow: 0 10px 30px rgba(18, 35, 46, 0.3); z-index: 60; }
.toast__action { border: 0; background: none; color: var(--of-toast-action); font-weight: 700; padding: 8px 4px; min-height: 44px; }

/* Foglio "Informazioni" */
.sheet { width: min(480px, 100vw); max-height: min(90vh, 760px); padding: 0; border: 0; border-radius: 10px; background: var(--of-surface); color: var(--of-text); box-shadow: var(--of-menu-shadow); }
.sheet::backdrop { background: rgba(18, 35, 46, 0.45); }
.sheet__bar { position: sticky; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 52px; padding: 0 8px; background: var(--of-surface); border-bottom: 1px solid var(--of-separator); z-index: 1; }
.sheet__title { grid-column: 2; margin: 0; font-size: 17px; font-weight: 600; }
.sheet__done { grid-column: 3; justify-self: end; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--of-link); font-weight: 600; }
.sheet__body { padding: 16px 18px 24px; display: grid; gap: 18px; }
.sheet__app { display: grid; justify-items: center; gap: 6px; text-align: center; }
.sheet__app img, .sheet__app svg { width: 64px; height: 64px; border-radius: 14px; }
.sheet__app h3 { margin: 4px 0 0; font-size: 22px; font-weight: 600; }
.sheet__app p { margin: 0; font-size: var(--of-fs-callout); color: var(--of-text-2); }
.sheet h4 { margin: 0 0 6px; }
.sheet p, .sheet ul { margin: 0; font-size: var(--of-fs-callout); }
.sheet ul { padding-left: 18px; display: grid; gap: 4px; }
.sheet__formula { font-size: 17px; font-weight: 600; }
#installa-testo p + p { margin-top: 6px; }
#installa-testo a { color: var(--of-link); font-weight: 600; overflow-wrap: anywhere; }
/* vincoli di processo (v2.11) */
.processo label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--of-fs-callout); }
.processo .input-unit { flex: none; width: 9em; }
.processo .input-unit input { width: 100%; }
.processo input[aria-invalid="true"] { border-color: var(--of-danger); }
.processo__nota { color: var(--of-text-2); font-size: var(--of-fs-caption); }

/* tabella soluzioni (v2.9) */
.sheet--largo { width: min(760px, 100vw); }
.soluzioni__griglia { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 8px 10px; align-items: center; }
.soluzioni__griglia label { display: flex; align-items: center; gap: 6px; font-size: var(--of-fs-caption); color: var(--of-text-2); }
.soluzioni__griglia input { width: 100%; min-width: 0; min-height: 40px; padding: 6px 8px; border: 1px solid var(--of-border); border-radius: var(--of-radius-field); background: var(--of-surface); color: var(--of-text); font-variant-numeric: tabular-nums; }
.soluzioni__nome { font-size: var(--of-fs-callout); font-weight: 600; }
.soluzioni__largo { grid-column: span 3; flex-wrap: wrap; }
.soluzioni__largo input { width: 7em; flex: none; }
.soluzioni__nota { color: var(--of-text-3); }
.soluzioni__ordine { display: flex; align-items: center; gap: 10px; font-size: var(--of-fs-callout); }
.soluzioni__ordine select { min-height: 40px; padding: 0 8px; border: 1px solid var(--of-border); border-radius: var(--of-radius-field); background: var(--of-surface); color: var(--of-text); }
.soluzioni__esito { margin: 0; font-weight: 600; }
.soluzioni__esito:empty { display: none; }
.soluzioni__tabella { overflow-x: auto; max-height: 50vh; overflow-y: auto; border: 1px solid var(--of-separator); border-radius: var(--of-radius-field); }
.soluzioni__tabella:empty { display: none; }
.soluzioni__tabella table { width: 100%; border-collapse: collapse; font-size: var(--of-fs-caption); font-variant-numeric: tabular-nums; }
.soluzioni__tabella th, .soluzioni__tabella td { padding: 6px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--of-separator); }
.soluzioni__tabella thead th { position: sticky; top: 0; background: var(--of-surface); font-weight: 600; color: var(--of-text-2); }
.soluzioni__tabella td button { min-height: 36px; padding: 0 10px; border: 0; background: none; color: var(--of-link); font-weight: 600; }
@media (max-width: 599px) {
  .soluzioni__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .soluzioni__nome { grid-column: 1 / -1; margin-top: 4px; }
  .soluzioni__griglia > span:empty { display: none; }
}

/* foglio Condividi (v2.6): il codice QR resta nero su bianco anche nel tema scuro */
.qr { width: min(240px, 70vw); margin: 0 auto; padding: 10px; background: #ffffff; border-radius: 8px; }
.qr svg { display: block; width: 100%; height: auto; }
.qr__riassunto { text-align: center; font-weight: 600; }
.qr__nota { text-align: center; color: var(--of-text-2); }
.qr__link { text-align: center; font-size: var(--of-fs-caption); color: var(--of-text-2); overflow-wrap: anywhere; user-select: all; }
.azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.azioni .btn { margin-top: 0; }
.sheet .btn--secondario { background: var(--of-fill); color: var(--of-text); }
.sheet__credits { font-size: var(--of-fs-caption); color: var(--of-text-2); text-align: center; }
.sheet .btn { display: block; margin-top: 10px; justify-self: start; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--of-radius-control); background: var(--of-accent); color: var(--of-on-accent); font-weight: 600; }
@media (max-width: 599px) {
  .sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 12px 12px 0 0; max-height: 90vh; padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- Impaginazione (in fondo: prevale sui componenti) ---------- */
[hidden] { display: none !important; }
.layout { display: grid; gap: var(--of-gap); padding: var(--of-gap); padding-left: max(var(--of-gap), env(safe-area-inset-left)); padding-right: max(var(--of-gap), env(safe-area-inset-right)); max-width: 1440px; margin: 0 auto; }
.viewer { display: grid; gap: 10px; align-content: start; }
.stage { display: grid; gap: 10px; align-content: start; }
.panel { display: grid; gap: 22px; align-content: start; }

@media (max-width: 899px) {
  /* telefono e tablet: anteprima e risultato restano visibili mentre si scorrono i comandi */
  .viewer { display: contents; }
  .stage { position: sticky; top: calc(54px + env(safe-area-inset-top)); z-index: 20; background: var(--of-bg); margin: calc(-1 * var(--of-gap)) calc(-1 * var(--of-gap)) 0; padding: var(--of-gap) var(--of-gap) 10px; box-shadow: 0 10px 14px -14px rgba(18, 35, 46, 0.5); }
  .preview { width: min(100%, 36vh); margin: 0 auto; }
  .result--card { display: none; }
}
@media (max-width: 559px) and (max-height: 560px) {
  /* finestra molto piccola (per esempio zoom al 400 %): una colonna, anteprima non fissa */
  .stage { position: static; box-shadow: none; }
}
@media (min-width: 560px) and (max-width: 899px) and (max-height: 560px) {
  /* telefono orizzontale: due colonne, anteprima ferma a sinistra */
  .layout { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: start; }
  .viewer { display: grid; position: sticky; top: calc(56px + env(safe-area-inset-top)); }
  .stage { position: static; box-shadow: none; margin: 0; padding: 0; }
  .preview { width: min(100%, calc(100vh - 200px)); width: min(100%, calc(100dvh - 200px)); }
  .result--strip { padding: 6px 10px; gap: 2px 10px; }
  .result--strip .result__value { font-size: 24px; }
  .result__meta { font-size: var(--of-fs-caption); }
  .tool { flex-direction: row; gap: 6px; min-width: 0; min-height: 44px; padding: 6px; font-size: 13px; }
  .toolbar { flex-wrap: nowrap; gap: 2px; }
}
@media (min-width: 900px) {
  .layout { grid-template-columns: minmax(340px, 400px) 1fr; align-items: start; padding-top: 24px; }
  .panel { order: -1; }
  .viewer { position: sticky; top: 76px; }
  .result--strip { display: none; }
  .preview { width: min(100%, calc(100vh - 190px)); margin: 0 auto; }
  .tool { flex-direction: row; gap: 8px; min-height: 44px; padding: 8px 14px; font-size: 15px; }
}

/* ---------- Contrasto elevato (colori di sistema) ---------- */
@media (forced-colors: active) {
  .segmented__opt:has(input:checked), .lang__opt[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  input[type="range"]::-webkit-slider-runnable-track { forced-color-adjust: none; background: CanvasText; }
  input[type="range"]::-moz-range-track { background: CanvasText; }
  .result__alert { forced-color-adjust: auto; }
}

/* ---------- Scheda da stampare o salvare in PDF (v2.7) ---------- */
/* Con la stampa (menu Esporta, Ctrl+P o menu del browser) si stampa solo la scheda, su A4. */
.scheda { display: none; }
@page { size: A4; margin: 14mm; }
@media print {
  html, body { background: #ffffff !important; }
  body > *:not(.scheda) { display: none !important; }
  .scheda { display: block; color: #12232e; font-family: var(--of-font); font-size: 10.5pt; line-height: 1.35; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .scheda h1 { display: flex; align-items: center; gap: 3mm; margin: 0; font-size: 16pt; font-weight: 600; }
  .scheda h1 svg { width: 9mm; height: 9mm; }
  .scheda__testa { display: flex; justify-content: space-between; align-items: center; padding-bottom: 3mm; border-bottom: 0.6mm solid #c6b784; }
  .scheda__data { color: #4c5a66; }
  .scheda__of { margin: 5mm 0 1mm; font-size: 26pt; font-weight: 700; }
  .scheda__of small { font-size: 12pt; font-weight: 600; margin-left: 1mm; }
  .scheda__eyebrow { margin: 0; font-size: 8pt; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #4c5a66; }
  .scheda__nota { margin: 0 0 5mm; color: #4c5a66; }
  .scheda__avviso { margin: 0 0 4mm; padding: 2mm 3mm; border-left: 1mm solid #b42318; background: #fbeae8; }
  .scheda__tabelle { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; align-items: start; break-inside: avoid; }
  .scheda table { width: 100%; border-collapse: collapse; }
  .scheda th, .scheda td { padding: 1.4mm 0; border-bottom: 0.2mm solid #d5dde2; text-align: left; vertical-align: top; font-weight: 400; }
  .scheda td { text-align: right; font-weight: 600; white-space: nowrap; }
  .scheda caption { text-align: left; padding-bottom: 1.5mm; }
  .scheda__figure { display: grid; grid-template-columns: auto 1fr; gap: 10mm; align-items: start; margin-top: 8mm; break-inside: avoid; }
  .scheda__figure figure { margin: 0; }
  .scheda__figure figcaption { margin-top: 2mm; font-size: 8.5pt; color: #4c5a66; max-width: 60mm; }
  .scheda__disegno { display: block; width: 50mm; height: 50mm; }
  .scheda__qr { display: block; width: 32mm; height: 32mm; }
  .scheda__link { font-size: 8pt; color: #4c5a66; overflow-wrap: anywhere; }
  .scheda__formula { margin-top: 8mm; break-inside: avoid; }
  .scheda__piede { margin-top: 10mm; padding-top: 2mm; border-top: 0.2mm solid #d5dde2; font-size: 8pt; color: #4c5a66; }
}