/* ==========================================================================
   Marana Tech — assistenza.html (Assistenza e manutenzione, MT·ASS)
   Oggetto della pagina: il libretto dei tagliandi. La copertina d'acciaio si apre, le righe
   del registro ricevono il timbro una dopo l'altra; la piccola modifica aspetta con la sua
   bandella ambra «in corso», che si stacca prima del timbro; il prossimo tagliando è un posto
   tratteggiato. Davanti al libretto, lo strumento del monitoraggio batte regolare.
   Stato base = stato finale: libretto aperto, quattro righe timbrate, monitoraggio acceso e fermo.
   Gli stati di partenza esistono solo con html.js-motion.
   Prefisso delle classi: .ass-
   ========================================================================== */

/* ---------- Testata ---------- */
.ass-hero__grid { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
@media (max-width: 960px) { .ass-hero__grid { grid-template-columns: 1fr; } }
.ass-h1 { font-size: clamp(2.5rem, 4.4vw, 4.1rem); }
.ass-hero__object { min-height: 0; container: ass / inline-size; }
.ass-demo__foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; }

.ass-bench {
  --ink: #22303A;
  --ink-2: rgba(34, 48, 58, .66);
  --ink-3: rgba(34, 48, 58, .5);
  --stamp: #2F6E9E;
  --pw: min(330px, calc((100cqw - 24px) / 2)); /* larghezza di una pagina del libretto */
  position: relative;
}

/* ---------- Il libretto ---------- */
.ass-book { position: relative; display: flex; justify-content: center; }
.ass-book__in {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  perspective: 1700px;
}
.ass-leaf {
  position: relative;
  isolation: isolate;
  display: flex;
  padding: 8px;
  background:
    radial-gradient(120% 60% at 30% 0%, rgba(255, 255, 255, .07), transparent 60%),
    var(--brushed),
    linear-gradient(170deg, #2A3136 0%, #1B2024 60%, #15191C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    0 34px 54px -30px rgba(0, 0, 0, .95),
    0 6px 14px -6px rgba(0, 0, 0, .7);
}
.ass-leaf--l { padding-right: 0; border-radius: 12px 3px 3px 12px; transform-origin: 100% 50%; }
.ass-leaf--r { padding-left: 0; border-radius: 3px 12px 12px 3px; }
/* ombre durante l'apertura: la copertina oscura la pagina destra, la sinistra prende luce
   mentre si posa. A riposo --shade vale 0; l'apertura lo porta da scuro a zero. */
.ass-leaf { --shade: 0; }
.ass-leaf::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: var(--shade);
}
.ass-leaf--r::after {
  inset: 8px 8px 8px 0;
  border-radius: 2px 8px 8px 2px;
  background: linear-gradient(90deg, rgba(10, 12, 14, .7), rgba(10, 12, 14, .25) 55%, rgba(10, 12, 14, .05));
}
.ass-leaf--l::after {
  inset: 8px 0 8px 8px;
  border-radius: 8px 2px 2px 8px;
  background: linear-gradient(270deg, rgba(10, 12, 14, .75), rgba(10, 12, 14, .35));
}

.ass-page {
  position: relative;
  width: var(--pw);
  min-height: 372px;
  padding: 24px 22px 22px;
  color: var(--ink);
  background: linear-gradient(180deg, #F8F5EE 0%, #F0ECE2 100%);
}
.ass-page--l {
  border-radius: 8px 2px 2px 8px;
  background:
    linear-gradient(270deg, rgba(70, 55, 25, .16), rgba(70, 55, 25, 0) 15%),
    linear-gradient(180deg, #F8F5EE 0%, #F0ECE2 100%);
}
.ass-page--r {
  border-radius: 2px 8px 8px 2px;
  background:
    linear-gradient(90deg, rgba(70, 55, 25, .16), rgba(70, 55, 25, 0) 15%),
    linear-gradient(180deg, #F8F5EE 0%, #F0ECE2 100%);
}
/* spessore delle pagine sotto quella aperta */
.ass-page--r::before {
  content: "";
  position: absolute;
  inset: 3px -3px -3px 3px;
  z-index: -1;
  border-radius: inherit;
  background: #DCD6C8;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2);
}

/* pagina sinistra: l'intestazione */
.ass-page__kicker {
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(34, 48, 58, .28);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ass-owner { display: grid; gap: 16px; }
.ass-owner dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.ass-owner dd {
  margin-top: 5px;
  padding-bottom: 6px;
  border-bottom: 1px dotted rgba(34, 48, 58, .4);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.3;
}
.ass-owner dd span, .ass-page__owner span { font-weight: 450; color: var(--ink-2); }
.ass-page__mark { position: absolute; right: 24px; bottom: 76px; width: 72px; height: auto; opacity: .07; }

/* pagina destra: il registro */
.ass-page__owner {
  display: none;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dotted rgba(34, 48, 58, .4);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}
.ass-log__head, .ass-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 54px; column-gap: 8px; align-items: center; }
.ass-log__head {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(34, 48, 58, .3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ass-log__head span:last-child { text-align: center; }
.ass-log { list-style: none; }
.ass-row { min-height: 56px; border-bottom: 1px solid rgba(47, 110, 158, .16); }
.ass-row__date { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; color: var(--ink-2); }
.ass-row__txt { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ass-row.is-todo .ass-row__txt, .ass-row.is-todo .ass-row__date { color: var(--ink-3); }
.ass-row__mark { position: relative; display: grid; place-items: center; width: 54px; height: 52px; rotate: var(--r, 0deg); }

/* timbro: inchiostro blu, con le piccole interruzioni di un timbro vero */
.ass-stamp { width: 46px; height: 46px; overflow: visible; fill: none; stroke: var(--stamp); opacity: .9; mix-blend-mode: multiply; }
.ass-stamp__out { stroke-width: 2.4; stroke-dasharray: .31 .012 .22 .009 .44 .006; }
.ass-stamp__in { stroke-width: .9; opacity: .75; }
.ass-stamp__ok { stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ass-halo { position: absolute; inset: 4px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(47, 110, 158, .3); opacity: 0; pointer-events: none; }

/* in corso: bandella ambra che sporge dal bordo della pagina (e dal libretto chiuso).
   Si vede solo durante l'apertura: poi si stacca e al suo posto arriva il timbro. */
.ass-flag {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -52px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  margin-top: -11px;
  /* a destra più spazio di quanto la bandella sporga dal libretto chiuso (22 px): dal bordo
     della copertina esce solo la linguetta ambra, senza lettere tagliate */
  padding: 0 26px 0 8px;
  border-radius: 3px 1px 1px 3px;
  background: linear-gradient(180deg, #EFB76E 0%, #E0A050 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 7px -2px rgba(80, 50, 10, .5);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #3A2508;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.ass-flag__spark { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #FFF4DE; box-shadow: 0 0 6px 1px rgba(255, 222, 170, .95); }

/* da fare: il posto del prossimo timbro */
.ass-slot { width: 40px; height: 40px; border: 1.5px dashed rgba(34, 48, 58, .42); border-radius: 50%; }

/* ---------- La copertina (solo per l'apertura) ---------- */
.ass-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: 24px;
  border-radius: 3px 12px 12px 3px;
  background:
    radial-gradient(110% 70% at 30% 0%, rgba(255, 255, 255, .1), transparent 60%),
    var(--brushed),
    linear-gradient(165deg, #2D3439 0%, #1E2327 55%, #15191C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    inset 12px 0 14px -10px rgba(0, 0, 0, .75),
    0 34px 54px -30px rgba(0, 0, 0, .95);
  transform-origin: 0 50%;
  backface-visibility: hidden;
  visibility: hidden; /* a riposo il libretto è aperto: la copertina non si vede */
}
.ass-cover::before {
  content: "";
  position: absolute;
  inset: 14px 14px 14px 22px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 0 0 1px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.ass-cover__mark { width: 46%; max-width: 150px; height: auto; }
.ass-cover__title { max-width: 16ch; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7; letter-spacing: .26em; text-align: center; text-transform: uppercase; color: var(--argento); }
.ass-cover__code { padding: 4px 9px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1px 0 rgba(0, 0, 0, .4); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em; color: var(--acciaio-testo); }

/* ---------- Lo strumento del monitoraggio ---------- */
.ass-monitor {
  position: relative;
  z-index: 3;
  /* lo strumento sta davanti al libretto: copre l'angolo in basso a sinistra e ne esce un poco */
  width: calc(var(--pw) + 40px);
  margin: -64px 0 0 calc(50cqw - var(--pw) - 32px);
  padding: 9px 9px 10px;
  border-radius: 12px;
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .07), transparent 60%),
    var(--brushed),
    linear-gradient(180deg, #2E353A 0%, #1E2327 60%, #181C1F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 0 0 1px rgba(0, 0, 0, .55),
    0 30px 50px -22px rgba(0, 0, 0, .95),
    0 8px 16px -8px rgba(0, 0, 0, .7);
}
.ass-monitor__bar { display: flex; align-items: center; gap: 9px; padding: 1px 4px 9px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
.ass-monitor__led {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--blu);
  box-shadow: 0 0 0 3px rgba(140, 192, 230, .16), 0 0 12px rgba(140, 192, 230, .9);
  position: relative;
  transition: background-color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
/* battito: il LED si ravviva quando il lampo passa sul picco */
.ass-monitor__led::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 228, 248, .95) 0 22%, rgba(140, 192, 230, .45) 40%, rgba(140, 192, 230, 0) 70%);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.ass-monitor__led.is-beat::after { opacity: 1; transition-duration: .05s; }
.ass-monitor.is-live .ass-monitor__led::after { will-change: opacity; }
.ass-monitor__state { color: #A9D0EE; transition: opacity var(--t-ui) var(--ease-out); }
.ass-monitor__code { margin-left: auto; color: var(--acciaio-testo); white-space: nowrap; }
.ass-monitor__screen {
  padding: 6px 8px 4px;
  border-radius: 7px;
  background:
    linear-gradient(rgba(140, 192, 230, .06) 1px, transparent 1px) 0 0 / 100% 12px,
    linear-gradient(90deg, rgba(140, 192, 230, .06) 1px, transparent 1px) 0 0 / 18px 100%,
    linear-gradient(180deg, #0B1013 0%, #10161A 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.ass-trace-box { position: relative; --win: .2; }
.ass-trace { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ass-trace__base { stroke: rgba(140, 192, 230, .6); stroke-width: 1.7; }
/* il lampo che corre sulla traccia: una finestra sfumata (la coda) che scorre sopra una copia accesa
   della traccia, mentre la copia scorre al contrario e resta ferma sotto. Si muovono solo transform e
   opacity su strati propri: il loop non ridisegna nulla. Visibile solo mentre gira (JS). */
.ass-trace__win {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--win) * 100%);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35) 45%, #000 92%);
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35) 45%, #000 92%);
}
.ass-trace--lit { position: absolute; top: 0; left: 0; width: calc(100% / var(--win)); max-width: none; }
.ass-trace__glow { stroke: rgba(140, 192, 230, .3); stroke-width: 7; }
.ass-trace__sweep { stroke: #DDF0FC; stroke-width: 2.1; }
.ass-trace__head {
  position: absolute;
  top: -2.5px;
  left: -2.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F0F8FF;
  box-shadow: 0 0 5px 1px rgba(200, 228, 248, .85);
  opacity: 0;
  pointer-events: none;
}
.ass-monitor.is-live .ass-trace__win,
.ass-monitor.is-live .ass-trace--lit,
.ass-monitor.is-live .ass-trace__head { will-change: transform, opacity; }

/* ---------- Stati di partenza (solo con movimento): libretto chiuso, strumento spento ---------- */
@media screen {
  /* transform e non translate/rotate: GSAP legge il punto di partenza dalla matrice e lo porta a zero */
  html.js-motion .ass-bench:not(.is-open) .ass-book__in { transform: translateX(-25%); }
  html.js-motion .ass-bench:not(.is-open) .ass-leaf--l { transform: rotateY(90deg); }
  html.js-motion .ass-bench:not(.is-open) .ass-cover { visibility: visible; }
  html.js-motion .ass-bench:not(.is-open) .ass-leaf--r { --shade: .8; }
  html.js-motion .ass-bench:not(.is-open) .ass-leaf--l { --shade: .7; }
  html.js-motion .ass-bench:not(.is-open) .ass-stamp,
  html.js-motion .ass-bench:not(.is-open) .ass-slot { opacity: 0; }
  html.js-motion .ass-bench:not(.is-open) .ass-flag { visibility: visible; opacity: 1; }
  html.js-motion .ass-bench:not(.is-open) .ass-monitor:not(.is-on) .ass-monitor__led { background: #2A3136; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .05); }
  html.js-motion .ass-bench:not(.is-open) .ass-monitor:not(.is-on) .ass-monitor__state { opacity: .3; }
}

/* ---------- WebKit (Safari): ingressi composti da livelli già disegnati ----------
   Safari rasterizza i livelli in buona parte col processore. Durante l'apertura del libretto:
   - l'ombra delle pagine (::after, opacità da --shade) sta su un livello suo: cambiare --shade
     cambia solo l'opacità del livello, senza ridipingere a ogni fotogramma la pagina sotto;
   - il libretto e la cartellina, che «sentono il colpo» (GSAP y: 2 avanti e indietro), restano su
     un livello per tutta la scena: senza, a ogni colpo GSAP li promuove per 0,1 s e poi li rimette
     nella pagina, e Safari li ridipinge interi due volte per timbro. Via a fine scena. */
@media screen {
  html.is-webkit.js-motion .ass-bench:not(.is-open) .ass-leaf::after { will-change: opacity; }
  html.is-webkit.js-motion .ass-bench:not(.is-open) .ass-book,
  html.is-webkit.js-motion .ass-board.is-played { will-change: transform; }
}

/* ---------- Libretto stretto: una pagina sola, l'intestazione sale in cima ---------- */
@container ass (max-width: 559px) {
  .ass-bench { --pw: min(400px, 100cqw - 16px); }
  .ass-book__in { grid-template-columns: auto; }
  .ass-leaf--l { display: none; }
  .ass-leaf--r { padding-left: 8px; border-radius: 12px; }
  .ass-leaf--r::after { inset: 8px; border-radius: 8px; }
  .ass-page--r { min-height: 0; border-radius: 8px; background: linear-gradient(180deg, #F8F5EE 0%, #F0ECE2 100%); }
  .ass-page__owner { display: block; }
  .ass-cover { left: 0; width: 100%; border-radius: 12px; }
  /* lo strumento, più stretto del libretto, ne copre il piede e sporge a sinistra se c'è posto */
  .ass-monitor {
    width: calc(var(--pw) - 24px);
    margin: -36px 0 0 calc(50cqw - var(--pw) / 2 - 8px - min(16px, (100cqw - var(--pw) - 16px) / 2));
  }
  html.js-motion .ass-bench:not(.is-open) .ass-book__in { transform: none; }
}
@container ass (max-width: 359px) {
  .ass-page { padding-inline: 16px; }
  .ass-log__head, .ass-row { grid-template-columns: 50px minmax(0, 1fr) 48px; column-gap: 6px; }
  .ass-row__date { font-size: 10px; letter-spacing: 0; }
  .ass-flag { right: -34px; }
  .ass-monitor__code { display: none; }
}

/* ---------- Cosa comprende: le targhe ---------- */
.ass-plates { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 1000px) { .ass-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ass-plates { grid-template-columns: minmax(0, 1fr); } }
.ass-plate__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ass-plate__top .plate__code { margin: 0; }
.ass-plate__ico { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--argento); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Vi rendiamo autonomi ---------- */
.ass-auto__split { align-items: center; }
.ass-auto__head { margin-bottom: 36px; }
.ass-kit { list-style: none; display: grid; gap: 22px; }
.ass-kit__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.ass-kit__ico {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 10px;
  fill: none;
  stroke: var(--blu-scuro);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: linear-gradient(180deg, #FFFFFF, #E4E8EB);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, .08), 0 8px 18px -10px rgba(21, 24, 26, .45);
}
.ass-kit__item h3 { font-size: 1.15rem; }
.ass-kit__item p { margin-top: 4px; font-size: var(--fs-small); color: var(--fg-2); }

.ass-board-wrap { display: grid; justify-items: center; gap: 18px; }
.ass-board {
  position: relative;
  width: min(100%, 460px);
  padding: 36px 16px 16px;
  border-radius: 14px;
  background:
    radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .1), transparent 60%),
    var(--brushed),
    linear-gradient(170deg, #3A4247 0%, #283035 55%, #1E2428 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 34px 54px -30px rgba(21, 24, 26, .75),
    0 3px 6px rgba(21, 24, 26, .2);
}
.ass-board__clip {
  position: absolute;
  z-index: 3;
  top: -13px;
  left: 50%;
  width: 136px;
  height: 42px;
  margin-left: -68px;
  border-radius: 8px 8px 12px 12px;
  background: var(--steel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 3px rgba(0, 0, 0, .25), 0 6px 12px -4px rgba(0, 0, 0, .6);
  perspective: 300px;
}
.ass-board__clip::after {
  /* il perno della molla */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFFFFF, #9AA3A9 60%, #5E676D);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.ass-board__lever {
  position: absolute;
  top: 6px;
  left: 18px;
  right: 18px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #A7B0B6, #5D666C);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .4);
  transform-origin: 50% 100%;
}
.ass-sheet {
  position: relative;
  z-index: 2;
  padding: 26px 24px 20px;
  border-radius: 4px;
  color: #1F2A33;
  background: linear-gradient(180deg, #FDFCFA 0%, #F3F1EC 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 22px -14px rgba(0, 0, 0, .55);
}
.ass-sheet__head { margin-bottom: 8px; padding-bottom: 14px; border-bottom: 1px solid rgba(31, 42, 51, .25); }
.ass-sheet__kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(31, 42, 51, .62); }
.ass-sheet__ref { margin-top: 6px; font-family: var(--font-display); font-stretch: 110%; font-size: 1.05rem; font-weight: 700; }
.ass-sheet__part { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 0; border-bottom: 1px dashed rgba(31, 42, 51, .2); }
.ass-sheet__part:last-child { border-bottom: 0; padding-bottom: 4px; }
.ass-sheet__part p { font-size: .9rem; line-height: 1.45; }
.ass-sheet__part s { text-decoration-thickness: 1px; color: rgba(31, 42, 51, .7); }
.ass-sheet__part .ass-sheet__label { margin-bottom: 3px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--blu-scuro); }
.ass-sheet__part--now { position: relative; margin-top: 4px; padding: 13px 12px 10px; border: 0; border-radius: 6px; background: rgba(47, 110, 158, .07); box-shadow: inset 0 0 0 1px rgba(47, 110, 158, .2); }
.ass-sheet__part--now::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(47, 110, 158, .55), 0 0 22px rgba(47, 110, 158, .28);
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
  pointer-events: none;
}
.ass-sheet__part--now.is-lit::after { opacity: 1; transition-duration: .25s; }
.ass-tick { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--blu-scuro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ass-tick circle { stroke-width: 1.2; opacity: .55; }
.ass-tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* stati di partenza della cartellina (scena una tantum, MT.arm) */
html.js-motion .ass-board.is-armed .ass-sheet { opacity: 0; }
html.js-motion .ass-board.is-armed .ass-board__lever { transform: rotateX(64deg); }
html.js-motion .ass-board.is-armed .ass-tick path { stroke-dashoffset: 1; }
html.js-motion .ass-board.is-armed .ass-tick circle { opacity: .2; }

/* ---------- Un messaggio di distanza ---------- */
.ass-talk__split { align-items: center; }
.ass-talk__head { margin-bottom: 0; }
.ass-chat-wrap { display: grid; justify-items: center; gap: 16px; }
.ass-chat {
  position: relative;
  width: min(100%, 500px);
  padding: 0 7px 7px;
  border-radius: 16px;
  background: var(--brushed), linear-gradient(180deg, #2C3338 0%, #1D2226 55%, #171B1E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 0, 0, .55), 0 36px 70px -30px rgba(0, 0, 0, .95);
}
.ass-dots { display: inline-flex; flex: none; gap: 6px; }
.ass-dots i { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #D5DADD, #6E787F 55%, #2B3237); box-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.ass-chat__bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 6px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em; color: var(--acciaio-testo); }
.ass-chat__list {
  list-style: none;
  display: grid;
  gap: 12px;
  padding: 20px 16px 22px;
  border-radius: 10px;
  background: linear-gradient(180deg, #101417, #13181B);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .03);
}
.ass-msg { display: grid; gap: 5px; max-width: 84%; }
.ass-msg__who { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acciaio-testo); }
.ass-msg p { padding: 10px 14px 11px; border-radius: 12px; font-size: .9rem; line-height: 1.45; }
.ass-msg--them { justify-self: start; }
.ass-msg--them p { border-bottom-left-radius: 4px; background: #232A2F; color: var(--cromo); box-shadow: inset 0 0 0 1px rgba(195, 202, 208, .08); }
.ass-msg--us { justify-self: end; justify-items: end; }
.ass-msg--us p { border-bottom-right-radius: 4px; color: #15181A; background: linear-gradient(180deg, #F1F4F6 0%, #D3D9DD 100%); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(0, 0, 0, .8); }
.ass-evt {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: .58rem;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ass-evt__led { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.ass-evt--wip { color: #EFC287; background: rgba(224, 160, 80, .08); box-shadow: inset 0 0 0 1px rgba(224, 160, 80, .34); }
.ass-evt--wip .ass-evt__led { background: var(--scintilla); box-shadow: 0 0 0 3px rgba(224, 160, 80, .16), 0 0 10px rgba(224, 160, 80, .85); }
.ass-evt--done { color: #A9D0EE; background: rgba(140, 192, 230, .07); box-shadow: inset 0 0 0 1px rgba(140, 192, 230, .32); }
.ass-evt__stamp { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--blu); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.ass-evt__stamp circle { stroke-width: 3; stroke-dasharray: 22 1.6 30 1.2 40 2; }

/* tre puntini: qualcuno sta scrivendo (solo durante la scena) */
.ass-typing {
  position: absolute;
  top: 0;
  right: 23px;
  display: none;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 12px 12px 4px 12px;
  background: linear-gradient(180deg, #F1F4F6 0%, #D3D9DD 100%);
}
.ass-typing i { width: 6px; height: 6px; border-radius: 50%; background: #5D666C; }
.ass-typing.is-on { display: inline-flex; }
.ass-typing.is-on i { animation: ass-dot 1s var(--ease-in-out) infinite; }
.ass-typing.is-on i:nth-child(2) { animation-delay: .15s; }
.ass-typing.is-on i:nth-child(3) { animation-delay: .3s; }
@keyframes ass-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

html.js-motion .ass-chat.is-played .ass-chat__list > li { transition: opacity .45s var(--ease-out), translate .45s var(--ease-out); }
html.js-motion .ass-chat.is-armed .ass-chat__list > li:not(.is-in) { opacity: 0; translate: 0 6px; }
/* il timbro dell'ultimo evento arriva con un colpo, un attimo dopo la riga */
html.js-motion .ass-chat.is-played .ass-evt__stamp { transition: scale .4s var(--ease-clack) .2s, opacity .15s linear .2s; }
html.js-motion .ass-chat.is-armed .ass-evt:not(.is-in) .ass-evt__stamp { scale: 1.9; opacity: 0; }

/* ---------- Dall'officina: il fascicolo riservato ----------
   Un fascicolo d'acciaio con il foglio del cliente: i dati sono coperti, il timbro «Riservato»
   lo chiude. Scena una tantum (MT.arm): le coperture si stendono, poi cade il timbro.
   Stato base = fascicolo coperto e timbrato. */
/* il timbro armato (ingrandito e ruotato) sporge oltre il bordo: la sezione, larga quanto lo schermo,
   lo ritaglia in orizzontale, così su telefono la pagina non si allarga e l'header resta al suo posto */
.ass-officina { overflow-x: clip; }
.ass-officina__split { align-items: center; }
.ass-officina__head { margin-bottom: 0; }
.ass-officina__head .btn-row { margin-top: 28px; }
.ass-file-wrap { display: grid; justify-items: center; padding-top: 24px; }
.ass-file {
  position: relative;
  width: min(100%, 440px);
  padding: 22px 16px 16px;
  border-radius: 4px 14px 14px 14px;
  background:
    radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .1), transparent 60%),
    var(--brushed),
    linear-gradient(170deg, #3A4247 0%, #283035 55%, #1E2428 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 34px 54px -30px rgba(0, 0, 0, .9),
    0 3px 6px rgba(0, 0, 0, .3);
}
.ass-file__tab {
  position: absolute;
  left: 0;
  bottom: 100%;
  height: 24px;
  padding: 0 16px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #454E54, #3A4247);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 25px;
  letter-spacing: .2em;
  color: var(--acciaio-testo);
}
.ass-file__sheet {
  position: relative;
  padding: 22px 22px 26px;
  border-radius: 4px;
  color: #1F2A33;
  background: linear-gradient(180deg, #FDFCFA 0%, #F3F1EC 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 22px -14px rgba(0, 0, 0, .55);
}
.ass-file__kicker {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(31, 42, 51, .25);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(31, 42, 51, .62);
}
.ass-file__rows { display: grid; }
.ass-file__row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: start; padding: 13px 0; border-bottom: 1px dashed rgba(31, 42, 51, .2); }
.ass-file__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ass-file__row dt { padding-top: 1px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; line-height: 1.35; text-transform: uppercase; color: var(--blu-scuro); }
.ass-file__row dd { display: grid; gap: 7px; margin: 0; }
/* le coperture: strisce d'inchiostro, si stendono da sinistra (solo transform) */
.ass-bar {
  display: block;
  width: calc(var(--w, .7) * 100%);
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2A3742, #1C262E);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transform-origin: 0 50%;
}
/* il timbro «Riservato»: inchiostro blu come i timbri del libretto */
.ass-seal {
  position: absolute;
  right: -10px;
  bottom: -26px;
  width: 124px;
  height: 124px;
  pointer-events: none;
  transform: rotate(-9deg);
  opacity: .92;
}
.ass-seal svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: #2F6E9E; }
.ass-seal__out { stroke-width: 3.2; stroke-dasharray: 90 2 120 1.5 128 2.5; }
.ass-seal__in { stroke-width: 1.2; opacity: .8; }
.ass-seal__txt { fill: #2F6E9E; stroke: none; font-family: var(--font-mono); font-weight: 700; }
.ass-seal__lock { stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) {
  .ass-file__row { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .ass-seal { right: 6px; bottom: -22px; width: 104px; height: 104px; }
}

/* scena: coperture arrotolate e timbro sollevato finché il fascicolo non entra in vista */
html.js-motion .ass-file.is-armed:not(.is-played) .ass-bar { transform: scaleX(0); }
html.js-motion .ass-file.is-armed:not(.is-played) .ass-seal { opacity: 0; transform: rotate(-22deg) scale(1.7); }
.ass-file.is-played .ass-bar { transition: transform .55s var(--ease-out); }
.ass-file.is-played .ass-file__row:nth-child(2) .ass-bar { transition-delay: .14s; }
.ass-file.is-played .ass-file__row:nth-child(3) .ass-bar { transition-delay: .28s; }
.ass-file.is-played .ass-file__row:nth-child(3) .ass-bar + .ass-bar { transition-delay: .38s; }
.ass-file.is-played .ass-file__row:nth-child(4) .ass-bar { transition-delay: .52s; }
/* il timbro cade accelerando, schiaccia e si assesta (animazione composta: solo transform e opacity) */
.ass-file.is-played .ass-seal { animation: ass-seal 0.8s 1.05s both; }
@keyframes ass-seal {
  0% { opacity: 0; transform: rotate(-22deg) scale(1.7); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42% { opacity: .92; transform: rotate(-9deg) scale(1); animation-timing-function: ease-out; }
  52% { transform: rotate(-9deg) scale(.93); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  100% { opacity: .92; transform: rotate(-9deg) scale(1); }
}

/* ---------- Stampa: libretto aperto e fogli leggibili su carta ---------- */
@media print {
  .ass-cover, .ass-typing, .ass-trace__win, .ass-trace__head { display: none !important; }
  .ass-leaf, .ass-monitor, .ass-board, .ass-chat, .ass-file { background: none !important; box-shadow: none !important; border: 1px solid #bbb; }
  .ass-monitor { margin-top: 12px; }
  .ass-monitor__screen, .ass-chat__list { background: none !important; box-shadow: none !important; }
  .ass-trace__base { stroke: #2F6E9E; }
  .ass-monitor__state, .ass-chat, .ass-chat * { color: #111 !important; }
  .ass-msg p { background: none !important; border: 1px solid #bbb; }
  .ass-leaf::after { display: none; }
  .ass-stamp { mix-blend-mode: normal; }
}