/* =====================================================================
   switch2/e · «La linguetta sul bordo»
   Una linguetta sottile sul bordo destro, come quella di un raccoglitore:
   cinque tacche nei colori dei modi (quella del modo corrente è piena)
   e la scritta verticale «5 versioni». Tirandola (passaggio, clic, tocco
   o trascinamento) esce un cassetto stretto con le cinque versioni.
   Colori e contrasto vengono dalle variabili di ciascun modo.
   ===================================================================== */

.mmt {
  /* valori di riserva: ogni modo li ridefinisce qui sotto con le proprie variabili */
  --s: #f3f1ec; --i: #1f1d1a; --m: #5f5a52; --l: rgba(31,29,26,.16); --h: rgba(31,29,26,.05);
  --ombra: 0 18px 44px -26px rgba(20,18,16,.45);
  --nome: "Helvetica Neue", Helvetica, Arial, sans-serif; --nome-s: 15px; --nome-w: 500; --nome-st: normal;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --curva: cubic-bezier(.22,.8,.2,1);
  --W: 312px;            /* larghezza del cassetto */
  --tw: 15px;            /* larghezza visibile della linguetta */
  --th: 136px;           /* altezza della linguetta */
  position: fixed; right: 0; top: 0; z-index: 2147481000;
  width: var(--W); height: auto;
  transform: translate3d(var(--W), 0, 0);
  transition: transform .42s var(--curva);
  font: 400 11px/1.45 var(--mono); color: var(--i);
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;      /* solo linguetta e cassetto ricevono i puntatori */
}
.mmt.aperto { transform: translate3d(0, 0, 0); }
.mmt.trascina { transition: none; }
.mmt * { box-sizing: border-box; }
html.mms-aperto .mmt, html[data-mms-vt] .mmt { visibility: hidden; }
@media print { .mmt { display: none; } }

/* ---------- temi: ogni modo presta i suoi colori ---------- */
.mmt--mm-os {
  --s: var(--paper-2, #fbfaf7); --i: var(--ink, #1f1d1a); --m: var(--ink-2, #55514a);
  --l: var(--line, rgba(31,29,26,.15)); --h: var(--paper-3, #ece9e2);
}
.mmt--storie {
  --s: #1b1524; --i: #f5efe4; --m: rgba(245,239,228,.68); --l: rgba(245,239,228,.2); --h: rgba(245,239,228,.07);
  --ombra: 0 18px 44px -20px rgba(0,0,0,.7);
  --nome: var(--display, "Arial Narrow", Arial, sans-serif); --nome-s: 17px; --nome-w: 600;
}
.mmt--rete-viva {
  --s: var(--bg2, #10141c); --i: var(--ink, #e7eaf0); --m: var(--muted, #8d95a5);
  --l: var(--panel-line, rgba(231,234,240,.14)); --h: var(--faint, rgba(231,234,240,.1));
  --ombra: 0 18px 44px -22px rgba(0,0,0,.55);
}
.mmt--porta {
  --s: #131417; --i: var(--ink, #ebe6dc); --m: var(--mute, #8d887f); --l: var(--line, rgba(235,230,220,.16)); --h: rgba(235,230,220,.06);
  --ombra: 0 18px 44px -20px rgba(0,0,0,.75);
  --nome: var(--serif, Georgia, serif); --nome-s: 21px; --nome-w: 400; --nome-st: italic;
}
.mmt--conversazione {
  --s: var(--carta-2, #fbfaf6); --i: var(--inchiostro, #1e1c1a); --m: var(--tenue, #6f6960);
  --l: var(--linea, #d8d1c5); --h: var(--linea-2, #e7e1d7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mmt--conversazione { --ombra: 0 18px 44px -20px rgba(0,0,0,.7); }
}
:root[data-theme="dark"] .mmt--conversazione { --ombra: 0 18px 44px -20px rgba(0,0,0,.7); }

/* ---------- la linguetta ---------- */
.mmt-tab {
  position: absolute; right: 100%; top: var(--ty, 0px);
  width: var(--tw); height: var(--th); margin: 0; padding: 12px 0 11px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  background: var(--s); color: var(--m);
  border: 1px solid var(--l); border-right: 0; border-radius: 7px 0 0 7px;
  font: inherit; cursor: pointer; pointer-events: auto; touch-action: none;
  transition: width .32s var(--curva), color .2s, box-shadow .3s;
}
/* area di presa più larga della parte visibile (invisibile, verso l'interno della pagina) */
.mmt-tab::before { content: ""; position: absolute; inset: -8px 0 -8px -9px; }
.mmt-tab:hover, .mmt-tab:focus-visible, .mmt.aperto .mmt-tab, .mmt.affaccia .mmt-tab { width: calc(var(--tw) + 4px); color: var(--i); }
.mmt-tab:focus-visible { outline: 2px solid #4dbfd6; outline-offset: 2px; }
.mmt.aperto .mmt-tab { box-shadow: -6px 0 18px -14px rgba(0,0,0,.4); }

.mmt-tacche { display: flex; flex-direction: column; gap: 4px; width: 100%; padding-left: 4px; }
.mmt-tacche i {
  display: block; width: 6px; height: 2px; border-radius: 1px; background: var(--c);
  opacity: .55; transition: width .3s var(--curva), opacity .3s;
}
.mmt-tacche i.split { background: linear-gradient(90deg, var(--c) 0 50%, var(--c2) 50% 100%); }
.mmt-tacche i.qui { width: 100%; opacity: 1; border-radius: 1px 0 0 1px; }
.mmt-tab:hover .mmt-tacche i:not(.qui), .mmt.affaccia .mmt-tacche i:not(.qui) { opacity: .9; }
.mmt.affaccia .mmt-tacche i { animation: mmt-tacca .9s var(--curva) both; animation-delay: calc(var(--k) * 90ms + 200ms); }
@keyframes mmt-tacca { 0%, 100% { width: 6px; } 45% { width: 100%; } }
.mmt.affaccia .mmt-tacche i.qui { animation: none; }

.mmt-scritta {
  writing-mode: vertical-rl; transform: rotate(180deg);
  align-self: center; font-size: 9.5px; letter-spacing: .1em; line-height: 1; white-space: nowrap;
  font-weight: 400;
  margin: auto 0; /* switch H: aria uguale sopra e sotto la scritta, staccata dalle tacche */
}

/* ---------- il cassetto ---------- */
.mmt-cassetto {
  position: relative; width: var(--W);
  background: var(--s); color: var(--i);
  border: 1px solid var(--l); border-right: 0; border-radius: 10px 0 0 10px;
  box-shadow: var(--ombra);
  padding: 14px 18px 10px 14px;
  pointer-events: auto; touch-action: pan-y;
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
.mmt-cassetto::-webkit-scrollbar { display: none; }
.mmt:not(.aperto):not(.trascina):not(.affaccia) .mmt-cassetto { visibility: hidden; transition: visibility 0s .42s; }
.mmt--rete-viva .mmt-cassetto { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.mmt-testa { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 10px; letter-spacing: .06em; color: var(--m); }
.mmt-testa b { font-weight: 400; color: var(--i); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* anteprima piccola della versione indicata */
.mmt-anteprima {
  position: relative; margin: 0 0 8px; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 5px; background: var(--h); outline: 1px solid var(--l); outline-offset: -1px;
}
.mmt-anteprima::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c, transparent); transition: background .25s; z-index: 3; }
.mmt-anteprima img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .28s; }
.mmt-anteprima img.su { opacity: 1; }
.mmt-anteprima iframe {
  position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0;
  pointer-events: none; opacity: 0; transition: opacity .45s; z-index: 2; background: transparent;
}
.mmt-anteprima iframe.pronto { opacity: 1; }
.mmt-vivo {
  position: absolute; right: 6px; bottom: 6px; z-index: 4; padding: 2px 6px 2px 5px; border-radius: 3px;
  font-size: 9px; letter-spacing: .06em; color: #f3f1ec; background: rgba(20,18,16,.62);
  opacity: 0; transition: opacity .3s;
}
.mmt-vivo::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #4dbfd6; margin-right: 5px; vertical-align: 1px; }
.mmt-anteprima.vivo .mmt-vivo { opacity: 1; }

/* elenco delle cinque versioni */
.mmt-elenco { list-style: none; margin: 0; padding: 0; }
.mmt-elenco li + li { border-top: 1px solid var(--l); }
.mmt-voce {
  position: relative; display: grid; grid-template-columns: 20px 1fr auto; column-gap: 8px; align-items: baseline;
  padding: 8px 6px 8px 4px; margin: 0 -6px 0 -4px; border-radius: 5px;
  color: inherit; text-decoration: none; outline: none;
}
.mmt-voce::before { /* la tacca: la stessa della linguetta, in grande */
  content: ""; position: absolute; left: -14px; top: 50%; width: 3px; height: 0; border-radius: 0 2px 2px 0;
  background: var(--c); transform: translateY(-50%); transition: height .25s var(--curva);
}
.mmt-voce.split::before { background: linear-gradient(180deg, var(--c) 0 50%, var(--c2) 50% 100%); }
.mmt-voce:hover, .mmt-voce.su, .mmt-voce:focus-visible { background: var(--h); }
.mmt-voce:hover::before, .mmt-voce.su::before, .mmt-voce:focus-visible::before { height: 60%; }
.mmt-voce[aria-current]::before { height: 60%; }
.mmt-voce:focus-visible { box-shadow: inset 0 0 0 1px #4dbfd6; }
.mmt-n { font-size: 10px; letter-spacing: .04em; color: var(--m); font-variant-numeric: tabular-nums; }
.mmt-nome { font-family: var(--nome); font-size: var(--nome-s); font-weight: var(--nome-w); font-style: var(--nome-st); line-height: 1.15; letter-spacing: -.005em; }
.mmt-riga { grid-column: 2 / 4; font-size: 10.5px; color: var(--m); line-height: 1.4; margin-top: 2px; }
.mmt-qui { font-size: 9.5px; letter-spacing: .06em; color: var(--m); white-space: nowrap; }
.mmt-qui::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: 1px; }
.mmt-va { font-size: 11px; color: var(--m); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .25s var(--curva); }
.mmt-voce:hover .mmt-va, .mmt-voce.su .mmt-va, .mmt-voce:focus-visible .mmt-va { opacity: 1; transform: none; }
.mmt-mini { display: none; }

.mmt-piede {
  margin: 8px 0 0; padding-top: 9px; border-top: 1px solid var(--l);
  display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10px; color: var(--m);
}
.mmt-tutte { margin: 0; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--l); }
.mmt-tutte:hover, .mmt-tutte:focus-visible { color: var(--i); text-decoration-color: currentColor; outline: none; }
.mmt-piede kbd { font: inherit; font-size: 9.5px; padding: 0 5px; border: 1px solid var(--l); border-radius: 3px; }

/* ---------- telefono ---------- */
.mmt.tel { --W: min(318px, calc(100vw - 44px)); --tw: 13px; --th: 122px; }
.mmt.tel .mmt-tab { padding: 11px 0 10px; }
.mmt.tel .mmt-tab::before { inset: -10px 0 -10px -12px; }
.mmt.tel .mmt-scritta { font-size: 9px; }
.mmt.tel .mmt-anteprima { display: none; }
.mmt.tel .mmt-cassetto { padding: 12px 16px 8px 14px; }
.mmt.tel .mmt-voce { grid-template-columns: 30px 18px 1fr auto; padding: 8px 6px 8px 4px; min-height: 56px; align-items: center; }
.mmt.tel .mmt-mini {
  display: block; grid-row: 1 / 3; width: 30px; height: 44px; border-radius: 3px; overflow: hidden;
  background: var(--h); outline: 1px solid var(--l); outline-offset: -1px; align-self: center;
}
.mmt.tel .mmt-mini img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mmt.tel .mmt-n { align-self: end; }
.mmt.tel .mmt-nome { align-self: end; }
.mmt.tel .mmt-qui, .mmt.tel .mmt-va { align-self: end; }
.mmt.tel .mmt-riga { grid-column: 3 / 5; align-self: start; }
.mmt.tel .mmt-voce::before { left: -14px; }
.mmt.tel .mmt-va { opacity: .7; transform: none; }
.mmt.basso .mmt-anteprima { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mmt, .mmt-tab, .mmt-tacche i, .mmt-voce::before, .mmt-anteprima img, .mmt-va { transition: none !important; }
  .mmt.affaccia .mmt-tacche i { animation: none; }
  .mmt.affaccia .mmt-tab { color: var(--i); box-shadow: 0 0 0 1px var(--i); }
}

/* dati societari in fondo al cassetto */
.mmt-legale { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--h); color: var(--m); font-size: 9.5px; }