/* SVILAPP GTM System — foglio dell'applicazione.
 *
 * Qui c'è SOLO ciò che il brand kit non ha già: il guscio a barra laterale,
 * le tessere dei KPI, i grafici, la barra di allocazione, la legenda, lo
 * storico delle novità. Bottoni, campi, tabelle, badge, card, modale e
 * **navigazione** arrivano dai componenti `.sv-*` del kit e non vanno
 * ridefiniti qui: la barra laterale si compone con `.sv-nav` e
 * `.sv-nav__item`, questo foglio le dà solo la colonna in cui stare.
 *
 * Nessun colore letterale: ogni tinta è un token semantico `--sv-*`, quindi
 * l'intera pagina cambia pelle quando cambia `data-kit` sul root. Il test è
 * quello del kit: se cambiando kit qualcosa resta fermo, quel qualcosa non
 * appartiene ancora al sistema.
 *
 * Nota sui due usi del colore: `--sv-accent-1` è il token del RIEMPIMENTO.
 * Come inchiostro su una superficie si usa `--sv-accent-1-text`, e i colori di
 * feedback si usano come inchiostro solo sopra il proprio `-tint`, come fanno
 * i badge del kit.
 */

* { box-sizing: border-box; }

body { margin: 0; -webkit-font-smoothing: antialiased; }

/* --------------------------------------------------------- guscio di pagina */

/* Una sola misura per la colonna, dichiarata qui e letta da tutti. Il nome NON
   comincia per --sv-: i token del brand sono quelli del kit, e inventarne uno
   con lo stesso prefisso significherebbe far credere che il kit lo dichiari. */
:root { --panel-nav-w: 248px; }

.shell {
  display: grid;
  grid-template-columns: var(--panel-nav-w) minmax(0, 1fr);
  min-height: 100dvh;
}

/* ------------------------------------------------------------ barra laterale */

.shell__nav {
  position: sticky;
  top: 0;
  z-index: var(--sv-z-sticky);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--sv-s4);
  padding: var(--sv-s4);
  background: var(--sv-surface-1);
  border-right: 1px solid var(--sv-line);
}
/* La firma del kit in cima alla barra: è il filo che dichiara quale pelle è
   attiva. Resta orizzontale anche ora che la superficie è verticale, perché
   --sv-gradient-kit è un gradiente a bande orizzontali proporzionali ai pesi
   della palette: schiacciato su una striscia larga 2px diventerebbe una tinta
   piatta, cioè esattamente l'informazione che il filo esiste per dare. */
.shell__nav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--sv-gradient-kit);
}

.nav__testa { display: grid; gap: 6px; padding-top: var(--sv-s2); }
/* La CSP vieta gli attributi style inline, quindi la taglia del lockup si
   dichiara qui invece che sull'elemento. Sopra i 32px la riga di prodotto
   entra nella composizione: è il caso di una testata. */
.nav__testa .sv-lockup { --sv-lockup-h: 38px; }
.nav__testa .host {
  font: 400 var(--sv-t-cap)/var(--sv-t-cap-lh) var(--sv-font-mono);
  color: var(--sv-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* L'elenco delle viste è l'unica parte che può scorrere: il piede con aspetto,
   utenza e versione resta agganciato in fondo anche su schermi bassi. */
.nav__lista { flex: 1; min-height: 0; overflow-y: auto; }

.nav__piede { display: grid; gap: var(--sv-s3); }
.nav__utente { display: flex; align-items: center; gap: var(--sv-s2); }
.nav__utente .sv-btn { flex: none; }
.nav__riga { display: flex; align-items: center; gap: var(--sv-s2); }

.who {
  font: 400 var(--sv-t-cap)/1 var(--sv-font-ui);
  color: var(--sv-text-2);
  border: 1px solid var(--sv-line-strong);
  border-radius: var(--sv-r-full);
  padding: 6px 10px;
  /* In colonna stretta un'utenza lunga sborderebbe invece di andare a capo:
     meglio troncata e leggibile per intero nel title. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who.is-viewer { color: var(--sv-warn); border-color: var(--sv-warn); }

/* Il numero di versione È il collegamento allo storico: non un'etichetta con
   accanto un link, ma il numero stesso, dove la domanda «da quando fa così?»
   viene naturale. */
.versione {
  font: 400 var(--sv-t-cap)/1 var(--sv-font-mono);
  color: var(--sv-text-3);
  text-decoration: none;
  border-bottom: 1px dotted var(--sv-line-strong);
  font-variant-numeric: tabular-nums;
}
a.versione:hover { color: var(--sv-accent-1-text); border-bottom-color: currentColor; }
.versione--ferma { border-bottom: none; color: var(--sv-text-2); }
.kitver { font: 400 var(--sv-t-cap)/1 var(--sv-font-mono); color: var(--sv-text-3); }
.nav__riga .livedot { margin-left: auto; }

/* Chi non è superadmin vede tutto ma non può innescare nulla: i comandi che
   cambiano la macchina spariscono invece di restare lì a restituire un 403.
   È solo cortesia verso l'operatore — il divieto vero è nell'API. */
.admin-only { display: none; }
.viewer-only { display: block; }
body.is-admin .admin-only { display: inline-flex; }
body.is-admin .viewer-only { display: none; }
body:not(.is-admin) [data-apply-profile],
body:not(.is-admin) [data-redeploy],
body:not(.is-admin) [data-remove] { display: none; }

.livedot {
  width: 8px; height: 8px; border-radius: var(--sv-r-full);
  flex: none;
  background: var(--sv-ok);
  box-shadow: 0 0 0 3px var(--sv-ok-tint);
}
.livedot.stale { background: var(--sv-warn); box-shadow: 0 0 0 3px var(--sv-warn-tint); }
.livedot.down  { background: var(--sv-err);  box-shadow: 0 0 0 3px var(--sv-err-tint); }

/* --------------------------------------------------------- selettore del kit */

/* Due attributi indipendenti, due gruppi di scelte: il kit è il clima, la luce
   è la polarità. La luce ha esattamente tre voci — Chiara, Scura, Sistema —
   e mai una quarta: la luce *nativa* del kit non è un'opzione, è
   un'informazione che sta nell'etichetta e il valore con cui il selettore
   parte la prima volta. */
.tema { position: relative; }
.tema__toggle { gap: var(--sv-s2); width: 100%; justify-content: flex-start; }
/* Il pannello si apre di fianco e allineato in basso: dal piede di una colonna
   alta quanto lo schermo, aprendosi verso il basso finirebbe fuori dalla
   pagina. Il contenitore che scorre è solo `.nav__lista`, quindi qui non c'è
   niente che possa tagliarlo. */
.tema__pannello {
  position: absolute;
  left: calc(100% + var(--sv-s2));
  bottom: 0;
  z-index: var(--sv-z-overlay);
  width: 268px;
  padding: var(--sv-s4);
  background: var(--sv-surface-2);
  border: 1px solid var(--sv-line-strong);
  border-radius: var(--sv-r3);
  box-shadow: var(--sv-e3);
  display: grid;
  gap: var(--sv-s4);
}
.tema__pannello[hidden] { display: none; }
/* Sulla pagina di login non c'è una topbar dentro cui inserire il comando
   inline: resta fisso nell'angolo, con lo stesso bottone e lo stesso pannello
   del resto del pannello — è lo stesso comando, non una sua variante. */
.tema--corner {
  position: fixed;
  top: var(--sv-s4);
  right: var(--sv-s4);
  z-index: var(--sv-z-sticky);
}
.tema__gruppo { display: grid; gap: var(--sv-s2); }
.tema__scelte { display: flex; flex-wrap: wrap; gap: 6px; }
.tema__scelte .sv-chip { height: 28px; font-size: 12.5px; }
.tema__nativa { color: var(--sv-text-3); letter-spacing: 0; text-transform: none; }

/* ------------------------------------------------------------------ pagina */

main {
  max-width: var(--sv-container);
  width: 100%;
  margin: 0 auto;
  padding: var(--sv-s5) var(--sv-s5) var(--sv-s9);
  min-width: 0;
}

section {
  position: relative;
  background: var(--sv-surface-1);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r3);
  padding: var(--sv-s5);
}
/* Le sezioni non sono più impilate: ne vive una alla volta, scelta dalla barra
   laterale. Oggi `hidden` basterebbe da solo — nessuna regola dichiara un
   `display` su `section`, quindi vince quello del browser. Ma è una garanzia
   che dura finché nessuno scrive `section { display: grid }`: il giorno che
   succede, le sette viste tornerebbero tutte visibili insieme e nessuno
   collegherebbe le due cose. */
section[hidden] { display: none; }
.section-head {
  display: flex; align-items: baseline; gap: var(--sv-s3);
  margin-bottom: var(--sv-s4);
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head .note { font: 400 var(--sv-t-cap)/var(--sv-t-cap-lh) var(--sv-font-ui); color: var(--sv-text-3); }
.section-head .spacer { flex: 1; }

/* ------------------------------------------------------------------ avvisi */

.alerts { display: grid; gap: var(--sv-s2); margin-bottom: var(--sv-s5); }
.alerts:empty { display: none; }
.alert {
  display: flex; gap: var(--sv-s3); align-items: flex-start;
  padding: 10px var(--sv-s4); border-radius: var(--sv-r2);
  font: 400 14px/20px var(--sv-font-ui);
  border: 1px solid transparent;
}
.alert .glyph { font-family: var(--sv-font-mono); font-weight: 700; }
.alert.err  { color: var(--sv-err);  background: var(--sv-err-tint);  border-color: var(--sv-err); }
.alert.warn { color: var(--sv-warn); background: var(--sv-warn-tint); border-color: var(--sv-warn); }
.alert.info { color: var(--sv-info); background: var(--sv-info-tint); border-color: var(--sv-info); }
.alert.ok   { color: var(--sv-ok);   background: var(--sv-ok-tint);   border-color: var(--sv-ok); }

/* --------------------------------------------------------------- tessere KPI */

.tiles {
  display: grid; gap: var(--sv-s3);
  grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
}
.tile {
  background: var(--sv-surface-2);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r2);
  padding: var(--sv-s3) var(--sv-s4);
}
.tile .label {
  font: 700 var(--sv-t-ov)/1.35 var(--sv-font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sv-text-3);
  /* Due righe di spazio anche a chi ne occupa una: le etichette lunghe
     ("Memoria virtuale") mandavano a capo e il loro numero finiva più in
     basso di tutti gli altri, rompendo la lettura in orizzontale della fila. */
  min-height: 2.7em;
}
.tile .value {
  font: 400 26px/1.15 var(--sv-font-display);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
  color: var(--sv-text-1);
}
.tile .value .unit {
  font: 400 13px/1 var(--sv-font-ui);
  color: var(--sv-text-2); margin-left: 3px;
}
.tile .sub { font: 400 var(--sv-t-cap)/var(--sv-t-cap-lh) var(--sv-font-ui); color: var(--sv-text-3); margin-top: 4px; }
.tile.is-warn .value { color: var(--sv-warn); }
.tile.is-err  .value { color: var(--sv-err); }

/* Il misuratore è la barra di avanzamento del kit; il riempimento diventa una
   tinta piatta di feedback solo quando c'è qualcosa da segnalare. */
.meter { margin-top: 9px; }
.meter.is-warn .sv-progress__bar { background: var(--sv-warn); }
.meter.is-err  .sv-progress__bar { background: var(--sv-err); }

/* ---------------------------------------------------------------- legenda */

/* Chiusa di default: chi guarda il pannello dieci volte al giorno sa già
   leggerlo, chi ci entra la prima volta trova la spiegazione a un clic. */
.legend {
  margin-top: var(--sv-s4);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r2);
  background: var(--sv-surface-2);
}
.legend > summary {
  cursor: pointer; padding: 10px var(--sv-s4);
  font: 400 13px/20px var(--sv-font-ui); color: var(--sv-text-2);
  list-style: none;
}
.legend > summary::-webkit-details-marker { display: none; }
.legend > summary::before {
  content: "+"; display: inline-block; width: 14px;
  font-family: var(--sv-font-mono); color: var(--sv-text-3);
}
.legend[open] > summary::before { content: "–"; }
.legend[open] > summary { border-bottom: 1px solid var(--sv-line); color: var(--sv-text-1); }
.legend > .hint, .legend > .scroller { padding: 0 var(--sv-s4); }
.legend > .hint:first-of-type { padding-top: var(--sv-s3); }
.legend > .hint:last-child { padding-bottom: var(--sv-s4); }
.legend .sv-table { font-size: 13px; }
.legend td { vertical-align: top; }
.legend td:first-child { white-space: nowrap; }
.legend .lv-warn { color: var(--sv-warn); white-space: nowrap; }
.legend .lv-err  { color: var(--sv-err);  white-space: nowrap; }
/* Il KPI che si traduce più in fretta in latenza per il cliente non deve
   sembrare una riga come le altre. */
.legend tr.is-critical td { background: var(--sv-warn-tint); }
.legend tr.is-critical td:first-child { box-shadow: inset 2px 0 var(--sv-warn); }

/* ----------------------------------------------------------------- grafici */

.range { display: flex; gap: 4px; flex-wrap: wrap; }
/* Il selettore di cosa misurare sta accanto al titolo della sezione, non fra i
   comandi a destra: cambia il *soggetto* dei grafici, non il loro intervallo. */
.section-head .scope { height: 32px; width: auto; min-width: 190px; font-size: 13px; }

.charts { display: grid; gap: var(--sv-s4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.chart {
  background: var(--sv-surface-2);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r2);
  padding: var(--sv-s3) var(--sv-s4) 9px;
  position: relative;
}
.chart h3 {
  margin: 0 0 2px;
  font: 600 13px/20px var(--sv-font-ui);
  color: var(--sv-text-1);
}
.chart .summary {
  font: 400 var(--sv-t-ov)/var(--sv-t-ov-lh) var(--sv-font-mono);
  color: var(--sv-text-3);
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.chart .plot { height: 132px; width: 100%; }
.chart svg { display: block; width: 100%; height: 100%; }
.chart .empty {
  height: 132px; display: flex; align-items: center; justify-content: center;
  color: var(--sv-text-3); font-size: 13px;
}
.tooltip {
  position: absolute; pointer-events: none; z-index: var(--sv-z-raised);
  background: var(--sv-surface-3);
  border: 1px solid var(--sv-line-strong);
  border-radius: var(--sv-r1);
  padding: 6px 9px; font: 400 12px/16px var(--sv-font-ui); white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--sv-e2); opacity: 0; transition: opacity var(--sv-dur-1) var(--sv-ease);
  color: var(--sv-text-1);
}
.tooltip.on { opacity: 1; }
.tooltip .t { color: var(--sv-text-3); display: block; font-size: 11px; }

/* ------------------------------------------------------------------ tabelle */

.scroller { overflow-x: auto; }
.sv-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-table th { white-space: nowrap; }
/* Il select del kit è alto 44px e largo quanto il contenitore: in una cella di
   tabella, accanto a un bottone, va rimpicciolito come gli altri comandi di
   riga — l'anatomia resta quella del componente, cambia solo la taglia. */
.sv-table .sv-select { height: 32px; width: auto; min-width: 128px; font-size: 13px; }

code {
  font: 400 var(--sv-t-code)/var(--sv-t-code-lh) var(--sv-font-mono);
  background: var(--sv-glass-fill); padding: 1px 6px; border-radius: var(--sv-r1);
}
.stack { display: grid; gap: 3px; }
.muted { color: var(--sv-text-3); font-size: 12px; }

/* ------------------------------------------------------------- allocazione */

.alloc-bar {
  display: flex; height: 26px; border-radius: var(--sv-r1);
  overflow: hidden; background: var(--sv-glass-fill);
  border: 1px solid var(--sv-line); margin: 4px 0 10px;
}
.alloc-bar > span { display: block; height: 100%; border-right: 2px solid var(--sv-surface-1); }
.alloc-bar > span:last-child { border-right: none; }
.alloc-legend {
  display: flex; flex-wrap: wrap; gap: var(--sv-s3) var(--sv-s4);
  font: 400 12px/16px var(--sv-font-ui); color: var(--sv-text-2); margin-bottom: var(--sv-s4);
}
.alloc-legend span { display: flex; align-items: center; gap: 6px; }
.alloc-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }

/* ---------------------------------------------------------- form e comandi */

form { display: grid; gap: var(--sv-s4); grid-template-columns: 1fr 1fr; }
form .full { grid-column: 1 / -1; }
.actions { display: flex; gap: var(--sv-s2); flex-wrap: wrap; }

.msg {
  padding: 9px var(--sv-s3); border-radius: var(--sv-r2);
  font: 400 14px/20px var(--sv-font-ui); margin-bottom: var(--sv-s3); display: none;
}
.msg.err { display: block; color: var(--sv-err); background: var(--sv-err-tint); }
.msg.ok  { display: block; color: var(--sv-ok);  background: var(--sv-ok-tint); }

/* ---------------------------------------------------------------- procedura */

.plan, #joblog {
  background: var(--sv-glass-fill);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r2);
  padding: var(--sv-s3) var(--sv-s4); white-space: pre-wrap;
  font: 400 12px/18px var(--sv-font-mono);
  color: var(--sv-text-2);
  overflow: auto;
}
.plan { max-height: 460px; margin-bottom: var(--sv-s3); }
.plan:empty { display: none; }
#joblog { max-height: 400px; }

/* Il modale nativo con l'anatomia del kit: `dialog` porta il comportamento
   (focus trap, Esc, backdrop), `.sv-modal` la materia. */
dialog.sv-modal {
  padding: 0;
  max-width: 900px;
  width: calc(100vw - 48px);
  color: var(--sv-text-1);
}
dialog.sv-modal::backdrop { background: var(--sv-shade-ink); opacity: .62; }
.sv-modal__body .muted { display: block; margin-bottom: var(--sv-s3); }

/* --------------------------------------------------------------- accesso */

.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sv-s6) var(--sv-s4);
}
/* La griglia a due colonne che il pannello applica a `form` qui è di troppo:
   il login è una colonna sola. */
.login-card {
  display: block;
  width: 100%;
  max-width: 408px;
  background: var(--sv-surface-1);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r3);
  box-shadow: var(--sv-e3);
  overflow: hidden;
}
.login-card > .sv-card__signature { height: 2px; background: var(--sv-gradient-kit); }
.login-body { padding: var(--sv-s6) var(--sv-s5) var(--sv-s5); }
.login-brand { margin-bottom: var(--sv-s5); }
.login-card h1 { margin: 0 0 6px; font: 600 var(--sv-t-h2)/var(--sv-t-h2-lh) var(--sv-font-ui); }
.login-card > .login-body > .muted { margin: 0 0 var(--sv-s4); font-size: 13px; line-height: 20px; }
.login-card .sv-field { margin-bottom: var(--sv-s4); }
.login-card .sv-btn { width: 100%; }
.login-foot { margin: var(--sv-s4) 0 0; font-size: 12px; line-height: 18px; }

/* ------------------------------------------------------------------ novità */

.cl__legenda { display: flex; flex-wrap: wrap; gap: var(--sv-s2); margin: var(--sv-s4) 0; }

.rilasci { display: grid; gap: var(--sv-s4); }
.rilascio {
  background: var(--sv-surface-2);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r2);
  padding: var(--sv-s4);
}
.rilascio__testa {
  display: flex; align-items: baseline; gap: var(--sv-s3);
  flex-wrap: wrap;
  padding-bottom: var(--sv-s3);
  border-bottom: 1px solid var(--sv-line);
}
.rilascio__num {
  font: 400 20px/1.2 var(--sv-font-display);
  color: var(--sv-text-1);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.rilascio__che { display: grid; gap: 2px; min-width: 0; }
.rilascio__titolo { font: 600 14px/20px var(--sv-font-ui); color: var(--sv-text-1); }
.rilascio__data {
  font: 400 var(--sv-t-cap)/var(--sv-t-cap-lh) var(--sv-font-mono);
  color: var(--sv-text-3);
}

.voci { list-style: none; margin: 0; padding: var(--sv-s3) 0 0; display: grid; gap: var(--sv-s3); }
/* L'etichetta della tipologia sta in colonna propria: le quattro parole hanno
   lunghezze diverse e a bandiera i titoli partirebbero disallineati, che è il
   modo più veloce per far leggere una lista come rumore. */
.voce { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--sv-s3); align-items: start; }
.voce .sv-badge { justify-content: center; }
.voce__testo { display: grid; gap: 2px; min-width: 0; }
.voce__titolo { font: 600 14px/20px var(--sv-font-ui); color: var(--sv-text-1); }
/* Su uno schermo largo la riga arriverebbe a 150 caratteri: l'occhio perde il
   capo della riga successiva, e un elenco di cinquanta voci diventa illeggibile
   proprio dove serve scorrerlo in fretta. */
.voce__desc {
  margin: 0; max-width: 84ch;
  font: 400 13px/19px var(--sv-font-ui); color: var(--sv-text-2);
}

/* --------------------------------------------------------------- adattamento */

/* Il form a due colonne non guarda più la finestra ma quanto spazio resta
   davvero: con la barra laterale a 248px, a 1080px di finestra l'area di
   contenuto scende sotto i 700px e due colonne diventano due colonne strette
   con etichette lunghe. */
@media (max-width: 1080px) {
  form { grid-template-columns: 1fr; }
}

/* Sotto i 900px la colonna non ha più senso: diventa una fascia in cima, con
   le viste che scorrono in orizzontale. Nessun menu a scomparsa da aprire —
   le voci sono sette, si vedono. */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .shell__nav {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--sv-line);
    gap: var(--sv-s3);
  }
  .nav__lista { flex-direction: row; overflow-x: auto; overflow-y: visible; padding-bottom: 2px; }
  .nav__lista .sv-nav__item { white-space: nowrap; }
  /* In fascia il piede è una riga — ma che sa andare a capo: su un telefono i
     quattro comandi affiancati superano la larghezza dello schermo e a
     sforare non è la fascia, è la pagina intera, che si mette a scorrere in
     orizzontale su ogni vista. */
  .nav__piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sv-s3);
  }
  .nav__utente { min-width: 0; flex: 0 1 auto; }
  .nav__riga { margin-left: auto; }
  .nav__riga .livedot { margin-left: 0; }
  /* In fascia orizzontale il pannello dell'aspetto torna ad aprirsi verso il
     basso: di fianco uscirebbe dallo schermo. */
  .tema__pannello { left: 0; bottom: auto; top: calc(100% + var(--sv-s2)); }
}

@media (max-width: 720px) {
  main { padding: var(--sv-s4) var(--sv-s3) var(--sv-s8); }
  .shell__nav { padding: var(--sv-s3); }
  .nav__testa .host { display: none; }
  .login-wrap { padding: var(--sv-s4) var(--sv-s3); }
  .tema__pannello { width: min(268px, calc(100vw - 32px)); }
  .voce { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .voce .sv-badge { justify-self: start; }
}