/* SVILAPP — Componenti UI. Consumano SOLO token semantici: cambiano pelle con [data-kit].
   Richiede styles.css (tokens). Nessun colore letterale qui dentro. */

/* ---- Base ---- */
.sv-app{background:var(--sv-bg-1);color:var(--sv-text-1);font:400 15px/24px var(--sv-font-ui)}
.sv-overline{font:700 11px/16px var(--sv-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sv-text-3)}
.sv-display{font-family:var(--sv-font-display);font-weight:400;letter-spacing:.02em;text-transform:uppercase}

/* ---- Button ---- */
.sv-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sv-s2);
  font:600 15px/1 var(--sv-font-ui);height:44px;padding:0 var(--sv-s5);border:1px solid transparent;
  border-radius:var(--sv-r2);cursor:pointer;background:var(--sv-accent-1);color:var(--sv-text-onaccent);
  box-shadow:var(--sv-e1);transition:background-color var(--sv-dur-2) var(--sv-ease),transform var(--sv-dur-1) var(--sv-ease),box-shadow var(--sv-dur-2) var(--sv-ease)}
.sv-btn:hover{background:var(--sv-accent-1-hover)}
.sv-btn:active{background:var(--sv-accent-1-active);transform:translateY(1px)}
.sv-btn:focus-visible{outline:none;box-shadow:var(--sv-focus-ring)}
.sv-btn[disabled]{opacity:.38;cursor:not-allowed;box-shadow:none}
.sv-btn--secondary{background:var(--sv-accent-2);color:var(--sv-text-onaccent-2)}
.sv-btn--secondary:hover{background:var(--sv-accent-2-hover)}
.sv-btn--secondary:active{background:var(--sv-accent-2-active)}
.sv-btn--ghost{background:transparent;color:var(--sv-text-1);border-color:var(--sv-line-strong);box-shadow:none}
.sv-btn--ghost:hover{background:var(--sv-glass-fill)}
.sv-btn--ghost:active{background:var(--sv-accent-1-tint)}
.sv-btn--danger{background:var(--sv-err);color:var(--sv-text-on-err)}
.sv-btn--danger:hover{filter:brightness(1.12)}
.sv-btn--sm{height:32px;padding:0 var(--sv-s3);font-size:13px}
.sv-btn--icon{width:44px;padding:0}
.sv-btn--icon.sv-btn--sm{width:32px}

/* ---- Field (input, textarea, select) ---- */
.sv-field{display:flex;flex-direction:column;gap:6px}
.sv-label{font:500 11px/14px var(--sv-font-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--sv-text-2)}
.sv-input,.sv-select,.sv-textarea{font:400 15px/24px var(--sv-font-ui);color:var(--sv-text-1);
  background:var(--sv-glass-fill);border:1px solid var(--sv-glass-stroke);border-radius:var(--sv-r2);
  height:44px;padding:0 var(--sv-s3);outline:none;box-sizing:border-box;width:100%;
  transition:border-color var(--sv-dur-2) var(--sv-ease),box-shadow var(--sv-dur-2) var(--sv-ease)}
.sv-textarea{height:auto;min-height:96px;padding:var(--sv-s3);resize:vertical}
.sv-input:focus,.sv-select:focus,.sv-textarea:focus{border-color:var(--sv-accent-1);box-shadow:var(--sv-focus-ring)}
.sv-input[aria-invalid="true"],.sv-select[aria-invalid="true"]{border-color:var(--sv-err)}
.sv-hint{font:400 12px/16px var(--sv-font-ui);color:var(--sv-text-3)}
.sv-error{font:400 12px/16px var(--sv-font-ui);color:var(--sv-err)}
.sv-select{appearance:none;padding-right:var(--sv-s6);cursor:pointer}

/* Il popup del <select> lo disegna il SISTEMA OPERATIVO, non la pagina — e quel popup non
   sta dentro il nostro albero, quindi non eredita nulla. Chromium lo dipinge col fondo del
   select, che qui è vetro: un bianco al 6% di alpha. Composto su bianco dà un menu
   bianco-su-bianco, con l'unica voce leggibile quella evidenziata dal sistema. Vale in tutte
   e dodici le palette, perché tutte usano un vetro con alpha.
   L'unico rimedio è dare alle voci un fondo OPACO preso dai token.
   Selettore di ELEMENTO voluto: una <option> non ha altro styling in questo sistema, e chi
   dimentica .sv-select non deve ritrovarsi un menu illeggibile. */
option,optgroup{background-color:var(--sv-bg-1);color:var(--sv-text-1)}
option:disabled{color:var(--sv-text-3)}
optgroup{font:600 12px/16px var(--sv-font-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--sv-text-3)}
optgroup option{font:400 15px/24px var(--sv-font-ui);color:var(--sv-text-1);text-transform:none;letter-spacing:0}

/* ---- Checkbox, radio, switch ---- */
.sv-check{display:inline-flex;align-items:center;gap:var(--sv-s2);min-height:var(--sv-hit-min);cursor:pointer;font:400 14px/20px var(--sv-font-ui);color:var(--sv-text-2)}
.sv-check input{appearance:none;width:20px;height:20px;margin:0;flex:none;border:1px solid var(--sv-line-strong);
  border-radius:var(--sv-r1);background:var(--sv-glass-fill);cursor:pointer;position:relative;
  transition:background-color var(--sv-dur-2) var(--sv-ease),border-color var(--sv-dur-2) var(--sv-ease)}
.sv-check input[type="radio"]{border-radius:var(--sv-r-full)}
.sv-check input:checked{background:var(--sv-accent-1);border-color:var(--sv-accent-1)}
.sv-check input:checked::after{content:"";position:absolute;inset:0;background:var(--sv-text-onaccent);
  clip-path:polygon(19% 47%,33% 60%,76% 22%,84% 33%,34% 79%,11% 57%)}
.sv-check input[type="radio"]:checked::after{clip-path:circle(24% at 50% 50%)}
.sv-check input:focus-visible{outline:none;box-shadow:var(--sv-focus-ring)}
.sv-switch{position:relative;width:44px;height:26px;flex:none;appearance:none;margin:0;cursor:pointer;
  border-radius:var(--sv-r-full);background:var(--sv-surface-3);border:1px solid var(--sv-line-strong);
  transition:background-color var(--sv-dur-2) var(--sv-ease)}
.sv-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:var(--sv-r-full);
  background:var(--sv-text-1);transition:transform var(--sv-dur-2) var(--sv-ease)}
.sv-switch:checked{background:var(--sv-accent-1);border-color:var(--sv-accent-1)}
.sv-switch:checked::after{transform:translateX(18px);background:var(--sv-text-onaccent)}
.sv-switch:focus-visible{outline:none;box-shadow:var(--sv-focus-ring)}

/* ---- Surface, card ---- */
.sv-surface{background:var(--sv-surface-1);border:1px solid var(--sv-line);border-radius:var(--sv-r3)}
.sv-card{background:var(--sv-glass-fill);border:1px solid var(--sv-glass-stroke);border-radius:var(--sv-r3);
  backdrop-filter:blur(var(--sv-glass-blur));-webkit-backdrop-filter:blur(var(--sv-glass-blur));
  box-shadow:var(--sv-e2);overflow:hidden;transition:box-shadow var(--sv-dur-3) var(--sv-ease),transform var(--sv-dur-3) var(--sv-ease)}
.sv-card--interactive:hover{box-shadow:var(--sv-e3);transform:translateY(-2px)}
.sv-card__signature{height:2px;background:var(--sv-gradient-kit)}  /* firma del kit: sempre in cima alle superfici */
.sv-card__body{padding:var(--sv-s5)}
.sv-card__footer{padding:var(--sv-s4) var(--sv-s5);border-top:1px solid var(--sv-line);display:flex;gap:var(--sv-s3);justify-content:flex-end}

/* ---- Badge, chip, tag ---- */
.sv-badge{display:inline-flex;align-items:center;gap:6px;font:700 10px/16px var(--sv-font-mono);
  letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:var(--sv-r-full);
  background:var(--sv-accent-1-tint);color:var(--sv-accent-1-text);border:1px solid transparent}
.sv-badge--ok{background:var(--sv-ok-tint);color:var(--sv-ok)}
.sv-badge--warn{background:var(--sv-warn-tint);color:var(--sv-warn)}
.sv-badge--err{background:var(--sv-err-tint);color:var(--sv-err)}
.sv-badge--info{background:var(--sv-info-tint);color:var(--sv-info)}
.sv-badge--neutral{background:transparent;color:var(--sv-text-3);border-color:var(--sv-line-strong)}
.sv-chip{display:inline-flex;align-items:center;gap:var(--sv-s2);height:32px;padding:0 var(--sv-s3);
  border-radius:var(--sv-r-full);border:1px solid var(--sv-line-strong);color:var(--sv-text-2);
  font:500 13px/1 var(--sv-font-ui);cursor:pointer;background:transparent;transition:background-color var(--sv-dur-2) var(--sv-ease),color var(--sv-dur-2) var(--sv-ease)}
.sv-chip[aria-pressed="true"]{background:var(--sv-accent-1);border-color:transparent;color:var(--sv-text-onaccent)}

/* ---- Tabs ---- */
.sv-tabs{display:flex;gap:var(--sv-s5);border-bottom:1px solid var(--sv-line)}
.sv-tab{position:relative;background:none;border:0;cursor:pointer;padding:var(--sv-s3) 0;
  font:600 14px/20px var(--sv-font-ui);color:var(--sv-text-3);transition:color var(--sv-dur-2) var(--sv-ease)}
.sv-tab:hover{color:var(--sv-text-2)}
.sv-tab[aria-selected="true"]{color:var(--sv-text-1)}
.sv-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sv-accent-1)}
.sv-tab:focus-visible{outline:none;box-shadow:var(--sv-focus-ring)}

/* ---- Table ---- */
.sv-table{width:100%;border-collapse:collapse;font:400 14px/20px var(--sv-font-ui)}
.sv-table th{text-align:left;padding:var(--sv-s3) var(--sv-s4);border-bottom:1px solid var(--sv-line-strong);
  font:700 10px/16px var(--sv-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sv-text-3)}
.sv-table td{padding:var(--sv-s3) var(--sv-s4);border-bottom:1px solid var(--sv-line);color:var(--sv-text-2)}
.sv-table tbody tr{transition:background-color var(--sv-dur-2) var(--sv-ease)}
.sv-table tbody tr:hover{background:var(--sv-glass-fill)}
.sv-table td:first-child{color:var(--sv-text-1)}
.sv-table--numeric td:last-child,.sv-table--numeric th:last-child{text-align:right;font-family:var(--sv-font-mono)}

/* ---- Nav / sidebar ---- */
.sv-nav{display:flex;flex-direction:column;gap:2px}
.sv-nav__item{display:flex;align-items:center;gap:var(--sv-s3);min-height:var(--sv-hit-min);padding:0 var(--sv-s3);
  border-radius:var(--sv-r2);color:var(--sv-text-2);text-decoration:none;font:500 14px/20px var(--sv-font-ui);
  transition:background-color var(--sv-dur-2) var(--sv-ease),color var(--sv-dur-2) var(--sv-ease)}
.sv-nav__item:hover{background:var(--sv-glass-fill);color:var(--sv-text-1)}
.sv-nav__item[aria-current="page"]{background:var(--sv-accent-1-tint);color:var(--sv-text-1);box-shadow:inset 2px 0 0 var(--sv-accent-1)}
.sv-topbar{display:flex;align-items:center;gap:var(--sv-s3);height:64px;padding:0 var(--sv-s5);
  background:var(--sv-surface-1);border-bottom:1px solid var(--sv-line)}

/* ---- Modal ---- */
/* Lo scrim NON è nero: prende --sv-scrim, derivato dall'inchiostro del kit. Un velo di nero
   puro su Regata o Meridiana è l'unico pezzo di interfaccia che non appartiene al clima. */
.sv-scrim{position:fixed;inset:0;z-index:var(--sv-z-modal);background:var(--sv-scrim);
  backdrop-filter:blur(var(--sv-scrim-blur));-webkit-backdrop-filter:blur(var(--sv-scrim-blur));
  display:flex;align-items:center;justify-content:center;padding:var(--sv-s5)}
.sv-modal{position:relative;width:min(560px,100%);background:var(--sv-surface-1);border:1px solid var(--sv-line-strong);
  border-radius:var(--sv-r4);box-shadow:var(--sv-e4);overflow:hidden}
/* Variante vetro: il pannello lascia intravedere il contesto da cui è stato chiamato, senza
   perdere leggibilità. Il filo del kit in cima è la firma della superficie. */
.sv-modal--vetro{background:var(--sv-glass-panel);border-color:var(--sv-glass-stroke);
  backdrop-filter:blur(var(--sv-glass-blur));-webkit-backdrop-filter:blur(var(--sv-glass-blur))}
.sv-modal--firma::before{content:"";display:block;height:2px;background:var(--sv-gradient-kit)}
.sv-modal__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sv-s4) var(--sv-s5);border-bottom:1px solid var(--sv-line)}
.sv-modal__title{margin:0;font:600 18px/26px var(--sv-font-ui)}
.sv-modal__body{padding:var(--sv-s5);color:var(--sv-text-2)}
.sv-modal__foot{padding:var(--sv-s4) var(--sv-s5);border-top:1px solid var(--sv-line);display:flex;gap:var(--sv-s3);justify-content:flex-end}

/* ---- Toast ---- */
.sv-toast{display:flex;align-items:center;gap:var(--sv-s3);padding:var(--sv-s3) var(--sv-s4);
  background:var(--sv-surface-2);border:1px solid var(--sv-line-strong);border-radius:var(--sv-r2);
  box-shadow:var(--sv-e3);font:400 14px/20px var(--sv-font-ui);color:var(--sv-text-1)}
.sv-toast::before{content:"";width:3px;align-self:stretch;border-radius:2px;background:var(--sv-accent-1)}
.sv-btn--ok{background:var(--sv-ok);color:var(--sv-text-on-ok)}
.sv-btn--warn{background:var(--sv-warn);color:var(--sv-text-on-warn)}
.sv-toast--ok::before{background:var(--sv-ok)}
.sv-toast--err::before{background:var(--sv-err)}

/* ---- Progress ---- */
.sv-progress{height:8px;border-radius:var(--sv-r-full);background:var(--sv-glass-fill);overflow:hidden}
.sv-progress__bar{height:100%;border-radius:var(--sv-r-full);background:var(--sv-gradient-kit);transition:width var(--sv-dur-3) var(--sv-ease)}

/* ---- Palette (indicatore di preponderanza) ---- */
/* Segmenti staccati a pillola: ogni voce cresce col proprio peso (--sv-palette-w*), che
   dalla 5.2.0 è dichiarato DAL KIT (schema per-kit: bicromatica, quaternaria, ...).
   Sempre quattro <i>: una voce a peso zero collassa — niente larghezza e niente gap,
   grazie al margine min(peso*999px, gap). Percentuali scritte solo nella sezione palette. */
.sv-palette{display:flex;height:10px;--pal-gap:5px}
.sv-palette--l{height:16px;--pal-gap:7px}
.sv-palette--s{height:7px;--pal-gap:4px}
.sv-palette i{border-radius:var(--sv-r-full);min-width:0}
.sv-palette i:nth-child(1){flex:var(--sv-palette-w1,50) 0 0;background:var(--sv-palette-1)}
.sv-palette i:nth-child(2){flex:var(--sv-palette-w2,50) 0 0;background:var(--sv-palette-2);margin-left:min(calc(var(--sv-palette-w2,0)*999px),var(--pal-gap))}
.sv-palette i:nth-child(3){flex:var(--sv-palette-w3,0) 0 0;background:var(--sv-palette-3);margin-left:min(calc(var(--sv-palette-w3,0)*999px),var(--pal-gap))}
.sv-palette i:nth-child(4){flex:var(--sv-palette-w4,0) 0 0;background:var(--sv-palette-4);margin-left:min(calc(var(--sv-palette-w4,0)*999px),var(--pal-gap))}

/* ---- Tooltip ---- */
.sv-tooltip{position:relative}
.sv-tooltip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  z-index:var(--sv-z-overlay,900);white-space:nowrap;padding:7px 11px;border-radius:var(--sv-r1);
  background:var(--sv-glass-panel);color:var(--sv-text-1);
  backdrop-filter:blur(var(--sv-glass-blur));-webkit-backdrop-filter:blur(var(--sv-glass-blur));
  border:1px solid var(--sv-line-strong);box-shadow:var(--sv-e3);font:400 12px/16px var(--sv-font-ui);
  opacity:0;pointer-events:none;transition:opacity var(--sv-dur-2) var(--sv-ease)}
/* Il tooltip compare anche da tastiera: se lo vede solo il puntatore, metà utenti non lo vede. */
.sv-tooltip:hover::after,.sv-tooltip:focus-visible::after,.sv-tooltip:focus-within::after{opacity:1}
/* Oltre una riga serve una larghezza dichiarata: --sv-tip-w, default 220px. */
.sv-tooltip--testo::after{white-space:normal;width:var(--sv-tip-w,220px);text-align:left;line-height:18px}
/* Solo per vetrine e documentazione: tiene il tooltip aperto senza puntatore. */
.sv-tooltip--aperto::after{opacity:1}
.sv-tooltip--sotto::after{bottom:auto;top:calc(100% + 8px)}
.sv-tooltip--destra::after{bottom:auto;top:50%;left:calc(100% + 8px);transform:translateY(-50%)}
.sv-tooltip--sinistra::after{bottom:auto;top:50%;left:auto;right:calc(100% + 8px);transform:translateY(-50%)}

/* ---- Icona informativa ----
   Non è un bottone: non fa niente. Porta una spiegazione che non sta nell'etichetta, e va
   sempre accanto al termine che spiega — mai in fondo alla riga, mai da sola. */
.sv-info{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:20px;height:20px;padding:0;border-radius:var(--sv-r-full);
  border:1px solid var(--sv-line-strong);background:transparent;color:var(--sv-text-2);
  font:700 11px/1 var(--sv-font-mono);cursor:help;vertical-align:middle;
  transition:color var(--sv-dur-2) var(--sv-ease),border-color var(--sv-dur-2) var(--sv-ease)}
.sv-info:hover{color:var(--sv-accent-1-text);border-color:var(--sv-accent-1)}
.sv-info:focus-visible{outline:none;box-shadow:var(--sv-focus-ring)}
.sv-info--lg{width:24px;height:24px;font-size:12px}
.sv-info--pieno{background:var(--sv-accent-1-tint);border-color:transparent;color:var(--sv-accent-1-text)}

/* ---- Popover ----
   Vetro strutturale come la modale, ma senza scrim: non blocca, non interrompe. Si ancora a
   un contenitore in position:relative e si chiude con Esc o con un clic fuori. */
.sv-popover{position:absolute;z-index:var(--sv-z-overlay,900);width:max-content;max-width:320px;
  padding:var(--sv-s4);border-radius:var(--sv-r3);border:1px solid var(--sv-glass-stroke);
  background:var(--sv-glass-panel);box-shadow:var(--sv-e3);
  backdrop-filter:blur(var(--sv-glass-blur));-webkit-backdrop-filter:blur(var(--sv-glass-blur));
  font:400 13px/20px var(--sv-font-ui);color:var(--sv-text-2)}
.sv-popover__title{margin:0 0 6px;font:600 14px/20px var(--sv-font-ui);color:var(--sv-text-1)}
.sv-popover__foot{margin-top:var(--sv-s3);padding-top:var(--sv-s3);border-top:1px solid var(--sv-line);
  display:flex;gap:var(--sv-s2);justify-content:flex-end}

/* ---- Layout ---- */
.sv-container{max-width:var(--sv-container);margin:0 auto;padding:0 var(--sv-grid-margin)}
.sv-grid{display:grid;grid-template-columns:repeat(var(--sv-grid-cols),minmax(0,1fr));gap:var(--sv-grid-gutter)}
.sv-stack{display:flex;flex-direction:column;gap:var(--sv-s4)}
.sv-row{display:flex;align-items:center;gap:var(--sv-s3)}

/* ---- Cubo (micro-illustrazione) ---- */
.sv-cube{position:relative;aspect-ratio:1/1.155;--c:var(--sv-accent-1)}
.sv-cube span{position:absolute;inset:0}
.sv-cube span:nth-child(1){background:var(--c);clip-path:polygon(50% 0,100% 25%,50% 50%,0 25%)}
.sv-cube span:nth-child(2){background:color-mix(in oklab,var(--c),var(--sv-shade-ink) 32%);clip-path:polygon(0 25%,50% 50%,50% 100%,0 75%)}
.sv-cube span:nth-child(3){background:color-mix(in oklab,var(--c),var(--sv-shade-ink) 54%);clip-path:polygon(50% 50%,100% 25%,100% 75%,50% 100%)}

/* Helper JS consigliato:
   function applicaKit(kit){
     const r = document.documentElement;
     r.classList.add('sv-kit-swapping');
     r.dataset.kit = kit;
     localStorage.setItem('sv-kit', kit);
     setTimeout(() => r.classList.remove('sv-kit-swapping'), 340);
   } */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important}
}

/* ---- Marchio · logotipo polimorfico -------------------------------------
   La FORMA è l'asset registrato: maschere alpha ricavate dai PNG ufficiali,
   proporzioni e tracciati intoccabili. L'INCHIOSTRO è token — il marchio
   cambia pelle con [data-kit] come ogni altro componente del sistema.
   Dentro l'interfaccia si usa SEMPRE questo componente; i PNG a colori
   valgono solo per usi fuori sistema (social, terze parti, stampa altrui). */
.sv-mark{--sv-mark-size:64px;position:relative;display:inline-block;flex:none;
  width:var(--sv-mark-size);height:var(--sv-mark-size)}
.sv-mark > i,.sv-wordmark > i{position:absolute;inset:0;display:block;
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.sv-mark__ink{mask-image:url(assets/mask/mark-ink.png);-webkit-mask-image:url(assets/mask/mark-ink.png);background-color:var(--sv-text-1)}
.sv-mark__a1{mask-image:url(assets/mask/mark-a1.png);-webkit-mask-image:url(assets/mask/mark-a1.png);background-color:var(--sv-palette-1)}
.sv-mark__shade{mask-image:url(assets/mask/mark-shade.png);-webkit-mask-image:url(assets/mask/mark-shade.png);background-color:var(--sv-palette-3)}
/* Quarta lamina (5.4.0): un filo sulla lamina d’ombra porta la quarta voce di palette —
   congruenza col ventaglio della biglia. Il mask del genitore la ritaglia da solo;
   nei regimi mono e su accento la quarta voce tace. */
.sv-mark__shade::after{content:"";position:absolute;inset:0;background:var(--sv-palette-4);clip-path:inset(0 0 0 58%)}
.sv-mark--mono .sv-mark__shade::after,.sv-mark--onaccent .sv-mark__shade::after,
.sv-lockup--mono .sv-mark__shade::after,.sv-lockup--onaccent .sv-mark__shade::after{content:none}
.sv-mark__a2{mask-image:url(assets/mask/mark-a2.png);-webkit-mask-image:url(assets/mask/mark-a2.png);background-color:var(--sv-palette-2)}

/* Contromarchio — la S sola, senza anello: il regime piccolo (favicon, avatar, bullet).
   Maschera raster in assets/mask/ come le lamine del marchio: STESSO meccanismo, stessa
   affidabilità (una maschera SVG esterna qui si è dimostrata fragile tra i motori).
   La forma vettoriale resta in assets/contromarchio.svg per gli usi fuori sistema. */
.sv-contromarchio{--sv-contromarchio-size:64px;display:inline-block;flex:none;
  width:var(--sv-contromarchio-size);height:var(--sv-contromarchio-size);
  background-color:var(--sv-text-1);
  mask-image:url(assets/mask/contromarchio.png);-webkit-mask-image:url(assets/mask/contromarchio.png);
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.sv-contromarchio--accento{background-color:var(--sv-accent-1)}
.sv-contromarchio--onaccent{background-color:var(--sv-text-onaccent)}

/* LA SCRITTA È SOLO IL NOME. Fino alla 1.2.0 `word-ink.png` conteneva scritta E payoff cotti
   insieme in un raster: il payoff non si poteva tradurre, ritmare, né togliere, ed era l'ultimo
   pezzo di marca che non passava dai token. Ora la maschera porta il solo logotipo registrato
   — quello sì, lettere disegnate — e il payoff è TESTO, come già la riga di prodotto del lockup. */
.sv-wordmark{--sv-wordmark-h:24px;position:relative;display:block;flex:none;
  height:var(--sv-wordmark-h);width:calc(var(--sv-wordmark-h) * 8.1382)}
.sv-wordmark__ink{mask-image:url(assets/mask/word-solo-ink.png);-webkit-mask-image:url(assets/mask/word-solo-ink.png);background-color:var(--sv-text-1)}
.sv-wordmark__a1{mask-image:url(assets/mask/word-solo-a1.png);-webkit-mask-image:url(assets/mask/word-solo-a1.png);background-color:var(--sv-accent-1-text)}

/* Il payoff. Le proporzioni sono misurate sull'asset storico e conservate: corpo .592 e
   distacco .26 dell'altezza della scritta, estremi allineati ai suoi (space-between, come
   nell'originale). Cambia tutto il resto: si compone, si traduce, segue i token.
   La bicromia non è decorazione — SVIL + APP ricompongono il nome dentro la frase. */
.sv-payoff{display:flex;justify-content:space-between;align-items:baseline;width:100%;
  font-family:var(--sv-font-mono);font-weight:700;text-transform:uppercase;
  font-size:calc(var(--sv-wordmark-h) * .555);line-height:1;letter-spacing:-.01em;
  color:var(--sv-text-1);white-space:nowrap}
.sv-payoff b{font-weight:inherit;color:var(--sv-accent-1-text)}
/* Variante enfatica: nei momenti grandi due inchiostri non bastano a far VEDERE la
   contrazione (misurato: 1.27 di stacco su Regata chiara). La pastiglia piena sì. */
.sv-payoff--evidenza b{background-color:var(--sv-accent-1);color:var(--sv-text-onaccent);
  padding:.14em .28em;border-radius:var(--sv-r1);box-shadow:var(--sv-e1)}

/* Firma completa: scritta sopra, payoff sotto, allineati sugli stessi estremi.
   È il PAYOFF a dettare la larghezza, non la scritta. Il payoff è testo: la sua misura
   dipende dai glifi, dalla lingua e — nella variante enfatica — dal riempimento delle
   pastiglie, quindi nessun moltiplicatore fisso può garantirne l'incastro (provato: sbordava
   di pochi pixel a ogni taratura). La scritta è una forma e si adatta a qualunque larghezza:
   width 100% + aspect-ratio, e i due estremi coincidono sempre.
   --sv-firma-h regola il corpo del payoff; l'altezza della scritta ne discende. */
.sv-firma{--sv-firma-h:24px;display:inline-flex;flex-direction:column;align-items:stretch;
  gap:calc(var(--sv-firma-h) * .46);width:max-content}
.sv-firma .sv-wordmark{width:100%;height:auto;aspect-ratio:8.1382 / 1}
.sv-firma .sv-payoff{font-size:calc(var(--sv-firma-h) * .555)}

/* Monocromo — obbligatorio sotto i 32px (le lamine spariscono) e su fondi accento */
.sv-mark--mono > i,.sv-wordmark--mono > i{background-color:var(--sv-text-1)}
.sv-mark--onaccent > i,.sv-wordmark--onaccent > i{background-color:var(--sv-text-onaccent)}

/* Su CARTA il marchio non ha bisogno di varianti proprie: dentro [data-superficie="carta"]
   (tokens/carta.css) --sv-text-1, --sv-accent-1/2 e --sv-mark-shade sono già ri-basati sul
   foglio bianco, e queste stesse regole danno l'inchiostro giusto. Una famiglia di classi
   .sv-*--carta esisteva qui e puntava a token mai definiti: rimossa, era codice morto. */

/* Lockup orizzontale — la sola proporzione registrata è quella fra anello e altezza delle
   lettere: .5444 del diametro, misurata sull'asset storico. Da lì discende .5773 sul file
   della maschera, che porta 3px di margine per lato. Il gap resta .132.
   Con .sv-logo--firma il payoff compare sotto la scritta, alla stessa larghezza. */
.sv-logo{--sv-logo-h:48px;display:inline-flex;align-items:center;gap:calc(var(--sv-logo-h) * .132)}
.sv-logo .sv-mark{--sv-mark-size:var(--sv-logo-h)}
.sv-logo .sv-wordmark{--sv-wordmark-h:calc(var(--sv-logo-h) * .5773)}

/* ---- Lockup di prodotto (marchio + scritta + riga applicativa) ----------
   Un logo applicativo NON è un file: è il marchio + la scritta SVILAPP (stesse
   lettere registrate, maschera senza il payoff) + una riga composta a testo.
   Così un'applicazione nuova non richiede un PNG nuovo, e l'inchiostro segue
   il kit come tutto il resto. */
.sv-lockup{--sv-lockup-h:48px;display:inline-flex;align-items:center;gap:calc(var(--sv-lockup-h) * .16)}
.sv-lockup .sv-mark{--sv-mark-size:var(--sv-lockup-h)}
.sv-lockup__testo{display:flex;flex-direction:column;gap:calc(var(--sv-lockup-h) * .09);min-width:0}
.sv-lockup__word{position:relative;display:block;flex:none;
  height:calc(var(--sv-lockup-h) * .52);width:calc(var(--sv-lockup-h) * .52 * 8.1382)}.sv-lockup__word > i{position:absolute;inset:0;display:block;
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.sv-lockup__ink{mask-image:url(assets/mask/word-solo-ink.png);-webkit-mask-image:url(assets/mask/word-solo-ink.png);background-color:var(--sv-text-1)}
.sv-lockup__a1{mask-image:url(assets/mask/word-solo-a1.png);-webkit-mask-image:url(assets/mask/word-solo-a1.png);background-color:var(--sv-accent-1)}
/* La riga di prodotto è TESTO: si compone, si traduce, non si ridisegna. Quindi obbedisce
   alla scala tipografica, non al rapporto del lockup: pavimento a --sv-t-ov, e cresce solo
   quando il lockup è abbastanza grande da giustificarlo (hero, stampa). */
.sv-lockup__prodotto{font-family:var(--sv-font-mono);font-weight:700;text-transform:uppercase;
  font-size:max(var(--sv-t-ov), calc(var(--sv-lockup-h) * .2));line-height:1.25;
  color:var(--sv-accent-1-text);letter-spacing:.12em;white-space:nowrap}
/* Sotto i 32px la riga non sta più nella composizione: il lockup degrada a marchio + scritta,
   come il marchio degrada a monocromo. Il prodotto si dice altrove — titolo, tab, breadcrumb. */
.sv-lockup--compatto .sv-lockup__prodotto{display:none}
.sv-lockup--mono .sv-mark > i,.sv-lockup--mono .sv-lockup__word > i{background-color:var(--sv-text-1)}
.sv-lockup--mono .sv-lockup__prodotto{color:var(--sv-text-2)}
.sv-lockup--onaccent .sv-mark > i,.sv-lockup--onaccent .sv-lockup__word > i,
.sv-lockup--onaccent .sv-lockup__prodotto{color:var(--sv-text-onaccent);background-color:var(--sv-text-onaccent)}
.sv-lockup--onaccent .sv-lockup__prodotto{background-color:transparent}