/* ============================================================================
   HOMO LAPIS 2026 — MEDIA, DOWNLOAD, RADIO, FORM
   ---------------------------------------------------------------------------
   Le regole di comportamento restano quelle verificate: i video partono muti e
   solo quando entrano in campo, l'audio non parte mai da solo, il contatore
   ascoltatori mostra il numero vero dell'API.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   MEDIA
   ---------------------------------------------------------------------------
   I media sono moduli Divi nativi, quindi il foglio veste il markup che stampa
   Divi e non piu' il nostro: `.et_pb_image` con dentro `.et_pb_image_wrap`,
   `.et_pb_video` con dentro `.et_pb_video_box`, `.et_pb_group` per le griglie.

   Tre cose vanno sapute, perche' sono la ragione di meta' delle righe qui
   sotto:

   1. `et_flex_group` impila in colonna. Ogni griglia deve ridichiarare
      `display: grid`, altrimenti strisce e riquadri escono uno sotto l'altro.
   2. La cornice non sta sul modulo ma su `.et_pb_image_wrap`. Sul modulo
      finirebbe anche intorno all'etichetta, che sta sotto e deve restare
      fuori dal riquadro.
   3. L'etichetta della cella non e' un modulo di testo: e' `data-tag` sul
      modulo immagine, stampata da `::after`. Un modulo per etichetta
      raddoppierebbe le voci nel builder senza dare niente in cambio.
   ------------------------------------------------------------------------ */

/* Lo stack dei media di un pezzo. */
body.hl-carta .hl-piece__stack.et_pb_group {
  display: grid;
  gap: var(--hl-s-4);
  background: transparent;
  border: 0;
  padding: 0;
}

/* Il modulo, immagine o video. */
body.hl-carta .hl-media.et_pb_image,
body.hl-carta .hl-media.et_pb_video {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

/* La cornice: sul riquadro dell'immagine, non sul modulo. */
body.hl-carta .hl-media .et_pb_image_wrap,
body.hl-carta .hl-media .et_pb_video_box {
  display: block;
  width: 100%;
  position: relative;
  border: 1px solid var(--hl-rule);
  border-radius: var(--hl-r-none);
  overflow: hidden;
  background: var(--hl-surface);
  box-shadow: var(--hl-shadow-tile);
}

/* Il ritaglio si applica solo dove e' dichiarato: senza, l'immagine tiene la
   sua proporzione, che con width e height nel markup non fa saltare la
   pagina al caricamento. */
body.hl-carta .hl-media .et_pb_image_wrap img,
body.hl-carta .hl-media .et_pb_video_box video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--hl-media-ratio, auto);
  object-fit: cover;
  background: var(--hl-light-2);
}

/* Un verticale in una colonna larga meta' pagina diventa alto due schermate:
   la proporzione resta vera, l'ingombro no. Il selettore ripete la classe del
   modulo perche' la riga qui sopra azzera `max-width` con una specificita' che
   altrimenti vince: senza, il verticale del caso studio esce alto milleottanta
   pixel. */
body.hl-carta .hl-media--tall.et_pb_image,
body.hl-carta .hl-media--tall.et_pb_video { max-width: 330px; }

/* --- prima/dopo, modulo nativo -------------------------------------------
   Le due immagini le mette Divi come fondo dei suoi due riquadri, e la
   maniglia la muove il suo script. Qui restano la cornice e la proporzione:
   senza una proporzione dichiarata il modulo nasce alto zero. */
body.hl-carta .hl-compare.et_pb_before_after_image {
  border: 1px solid var(--hl-rule);
  background: var(--hl-surface);
  box-shadow: var(--hl-shadow-tile);
  overflow: hidden;
}
body.hl-carta .hl-compare .et_pb_before_after_image_container { display: block; }

/* --- striscia di fotogrammi ---------------------------------------------- */
body.hl-carta .hl-strip.et_pb_group {
  display: grid;
  grid-template-columns: repeat(var(--hl-strip-cols, 4), minmax(0, 1fr));
  gap: var(--hl-s-2);
  background: transparent;
  border: 0;
  padding: 0;
}
body.hl-carta .hl-strip .hl-strip__cell { margin: 0; }
body.hl-carta .hl-strip .hl-strip__cell .et_pb_image_wrap { box-shadow: none; }

/* --- coppia o terna affiancata ------------------------------------------- */
body.hl-carta .hl-duo.et_pb_group {
  display: grid;
  grid-template-columns: repeat(var(--hl-duo-cols, 2), minmax(0, 1fr));
  align-items: start;
  gap: var(--hl-s-3);
  background: transparent;
  border: 0;
  padding: 0;
}
body.hl-carta .hl-duo .hl-duo__cell { margin: 0; }
body.hl-carta .hl-duo .hl-duo__cell.hl-media--tall { max-width: none; }

/* --- griglia con didascalie ---------------------------------------------- */
body.hl-carta .hl-tiles.et_pb_group {
  display: grid;
  grid-template-columns: repeat(var(--hl-tiles-cols, 3), minmax(0, 1fr));
  gap: var(--hl-s-4) var(--hl-s-3);
  background: transparent;
  border: 0;
  padding: 0;
}
body.hl-carta .hl-tiles .hl-tile { margin: 0; min-width: 0; }
body.hl-carta .hl-tiles .hl-tile .et_pb_image_wrap { box-shadow: none; }
body.hl-carta .hl-tiles .hl-tile .et_pb_image_wrap img { aspect-ratio: 1 / 1; }

/* L'etichetta della cella: sotto il riquadro, non dentro. */
body.hl-carta [data-tag]::after {
  content: attr(data-tag);
  display: block;
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  line-height: 1.4;
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-fg-mute);
  margin-top: var(--hl-s-3);
}

/* La cella che ha anche un testo lungo — le pipeline generative — e' una
   blurb: immagine, titolo e corpo insieme, modificabili insieme. Non deve
   pero' somigliare alle schede di servizio, che hanno fondo e cornice.

   Ogni selettore ripete `.et_pb_blurb`: `divi-bridge.css` veste la blurb come
   scheda e viene caricato dopo questo foglio, quindi a parita' di specificita'
   vincerebbe lui e il titolo della cella uscirebbe grande come un H3. */
body.hl-carta .hl-tile--card.et_pb_blurb,
body.hl-carta .hl-tile--card.et_pb_blurb:hover {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  height: auto;
}
body.hl-carta .hl-tile--card.et_pb_blurb::before { content: none; }

body.hl-carta .et_pb_blurb.hl-tile--card .et_pb_main_blurb_image { margin-bottom: var(--hl-s-3); }
body.hl-carta .et_pb_blurb.hl-tile--card .et_pb_main_blurb_image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--hl-rule);
}
body.hl-carta .et_pb_blurb.hl-tile--card .et_pb_module_header {
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-fg);
  margin: 0 0 var(--hl-s-2);
}
body.hl-carta .et_pb_blurb.hl-tile--card .hl-tile__meta {
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  line-height: 1.4;
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-accent);
  margin: 0 0 var(--hl-s-1);
}
body.hl-carta .et_pb_blurb.hl-tile--card .hl-tile__body {
  font-size: var(--hl-fs-sm);
  line-height: 1.5;
  color: var(--hl-fg-mute);
  margin: 0;
}
/* A schermo l'ordine e' anno, nome, frase. Nella blurb il nome sta nel titolo
   e gli altri due nel corpo, cioe' dentro un contenitore diverso: `order` da
   solo non basta, perche' ordina i fratelli e quei tre non lo sono.
   `display: contents` sul corpo toglie il suo riquadro e promuove i due
   paragrafi a fratelli del titolo — a quel punto `order` li mette in fila. */
body.hl-carta .et_pb_blurb.hl-tile--card .et_pb_blurb_container {
  display: flex;
  flex-direction: column;
}
body.hl-carta .et_pb_blurb.hl-tile--card .et_pb_blurb_description { display: contents; }
body.hl-carta .et_pb_blurb.hl-tile--card .hl-tile__meta { order: 1; }
body.hl-carta .et_pb_blurb.hl-tile--card .et_pb_module_header { order: 2; }
body.hl-carta .et_pb_blurb.hl-tile--card .hl-tile__body { order: 3; margin-top: var(--hl-s-2); }

/* --- facciata: YouTube e ripiego dei video locali ----------------------- */
body.hl-carta .hl-embed,
body.hl-carta .hl-video { position: relative; }

body.hl-carta .hl-embed__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hl-s-3);
  width: 100%;
  border: 0;
  background: linear-gradient(to bottom, rgba(25, 20, 24, 0.28), rgba(25, 20, 24, 0.62));
  color: #fff;
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--hl-d-ui) var(--hl-e-ui);
}
body.hl-carta .hl-embed__play:hover,
body.hl-carta .hl-embed__play:focus-visible {
  background: linear-gradient(to bottom, rgba(25, 20, 24, 0.14), rgba(25, 20, 24, 0.48));
}

body.hl-carta .hl-embed__icon {
  width: 60px; height: 60px;
  border-radius: var(--hl-r-pill);
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(146, 76, 151, 0.55);
  backdrop-filter: blur(6px);
  position: relative;
  transition: transform var(--hl-d-ui) var(--hl-e-out), background var(--hl-d-ui) var(--hl-e-ui);
}
body.hl-carta .hl-embed__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
}
body.hl-carta .hl-embed__play:hover .hl-embed__icon,
body.hl-carta .hl-embed__play:focus-visible .hl-embed__icon {
  transform: scale(1.06);
  background: var(--hl-violet);
}

body.hl-carta .hl-embed__note {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: var(--hl-s-2) var(--hl-s-4);
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  background: rgba(25, 20, 24, 0.82);
  color: #e8e3dc;
  text-align: center;
  pointer-events: none;
}

body.hl-carta .hl-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

body.hl-carta .hl-video video {
  width: 100%;
  aspect-ratio: var(--hl-media-ratio);
  object-fit: cover;
  background: var(--hl-light-2);
  display: block;
}

/* Comandi discreti in basso a destra: il video e' il contenuto, non il player. */
body.hl-carta .hl-video__ui {
  position: absolute;
  right: var(--hl-s-3);
  bottom: var(--hl-s-3);
  display: flex;
  gap: var(--hl-s-2);
  opacity: 0.6;
  transition: opacity var(--hl-d-ui) var(--hl-e-ui);
}
body.hl-carta .hl-video:hover .hl-video__ui,
body.hl-carta .hl-video__ui:focus-within { opacity: 1; }
@media (hover: none) { body.hl-carta .hl-video__ui { opacity: 1; } }

body.hl-carta .hl-video__btn {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--hl-r-pill);
  background: rgba(25, 20, 24, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background var(--hl-d-micro) var(--hl-e-ui),
              border-color var(--hl-d-micro) var(--hl-e-ui);
}
body.hl-carta .hl-video__btn:hover,
body.hl-carta .hl-video__btn:focus-visible {
  background: var(--hl-violet);
  border-color: var(--hl-violet);
}

body.hl-carta .hl-video__icon { display: block; }
body.hl-carta .hl-video__icon--play {
  width: 0; height: 0; margin-left: 3px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}
body.hl-carta .hl-video__icon--pause {
  width: 10px; height: 12px;
  background:
    linear-gradient(currentColor, currentColor) left / 3px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right / 3px 100% no-repeat;
}
body.hl-carta .hl-video__icon svg { width: 18px; height: 18px; display: block; }
body.hl-carta .hl-video__icon--muted .hl-video__wave { display: none; }
body.hl-carta .hl-video__icon:not(.hl-video__icon--muted) .hl-video__slash { display: none; }

@media (max-width: 640px) {
  body.hl-carta .hl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.hl-carta .hl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.hl-carta .hl-compare,
  body.hl-carta .hl-duo { grid-template-columns: minmax(0, 1fr); }
  /* Tre pannelli verticali in colonna fanno tre schermate. Il primo, che e'
     quello che si muove, resta a tutta larghezza; gli altri due si
     affiancano, che e' come stanno anche nella presentazione. */
  body.hl-carta .hl-duo--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.hl-carta .hl-duo--3 > .hl-duo__cell:first-child { grid-column: span 2; }
  body.hl-carta .hl-media--tall,
  body.hl-carta .hl-media[style*="9 / 16"] { max-width: none; }
}

/* ---------------------------------------------------------------------------
   DOWNLOAD
   Il peso del file sta nel bottone, non dopo il click.
   ------------------------------------------------------------------------ */
/* La scheda del file: una `divi/blurb` per il testo e un `divi/button` per il
   file, dentro un `divi/group`. Prima era un unico <a> in un blocco code —
   tutta la scheda cliccabile, ma niente di modificabile dal builder. Adesso
   il bersaglio del click e' il bottone, che e' anche il punto dove sta
   scritto il peso. */
body.hl-carta .hl-download,
body.hl-carta .hl-download .et_pb_group_inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--hl-s-6);
  padding: 0;
  border: 0;
  background: transparent;
}
body.hl-carta .hl-download {
  padding: var(--hl-s-5) var(--hl-s-6);
  border: 1px solid var(--hl-rule);
  background: var(--hl-surface);
  box-shadow: var(--hl-shadow-tile);
  transition: border-color var(--hl-d-ui) var(--hl-e-ui);
}
body.hl-carta .hl-download:hover { border-color: var(--hl-rule-strong); }

/* L'icona del file: era uno <span> nel markup, adesso e' disegnata davanti
   al titolo della blurb, cosi' non serve un elemento in piu' da mantenere. */
body.hl-carta .hl-download .et_pb_blurb.hl-download__main,
body.hl-carta .hl-download .et_pb_blurb.hl-download__main:hover {
  padding: 0 0 0 var(--hl-s-9);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  height: auto;
  position: relative;
}
/* Il riquadro dell'icona. `right: auto; bottom: auto` non sono di troppo: il
   ::before della blurb arriva dal bridge con `inset: 0`, e senza azzerare i
   due lati opposti il riquadro si stira per tutta la scheda invece di stare
   40 per 40. */
body.hl-carta .hl-download .et_pb_blurb.hl-download__main::before {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 1px solid var(--hl-rule);
  background:
    linear-gradient(var(--hl-violet), var(--hl-violet)) 50% 11px / 2px 13px no-repeat;
  opacity: 1;
}
/* La punta della freccia, dentro lo stesso riquadro. */
body.hl-carta .hl-download .et_pb_blurb.hl-download__main::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -1px 0 0 -4.5px;
  border-right: 2px solid var(--hl-violet);
  border-bottom: 2px solid var(--hl-violet);
  transform: rotate(45deg);
}
body.hl-carta .hl-download .hl-download__main .et_pb_module_header {
  font-family: var(--hl-font-sans);
  font-weight: 500;
  font-size: var(--hl-fs-h3);
  color: var(--hl-fg);
  margin-bottom: var(--hl-s-2);
}
body.hl-carta .hl-download .hl-download__main .et_pb_blurb_description p {
  margin: 0;
  font-size: var(--hl-fs-sm);
  line-height: var(--hl-lh-body);
  color: var(--hl-fg-dim);
}
body.hl-carta .hl-download .et_pb_button.hl-download__btn { white-space: nowrap; }

body.hl-carta .hl-download__icon {
  width: 40px; height: 40px;
  border: 1px solid var(--hl-rule);
  position: relative;
  flex: none;
}
body.hl-carta .hl-download__icon::before {
  content: '';
  position: absolute;
  top: 11px; left: 50%;
  width: 2px; height: 13px;
  background: var(--hl-violet);
  transform: translateX(-50%);
}
body.hl-carta .hl-download__icon::after {
  content: '';
  position: absolute;
  top: 19px; left: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--hl-violet);
  border-bottom: 2px solid var(--hl-violet);
  transform: translateX(-50%) rotate(45deg);
}

body.hl-carta .hl-download__main { display: grid; gap: var(--hl-s-2); }
body.hl-carta .hl-download__title {
  font-family: var(--hl-font-sans);
  font-weight: 500;
  font-size: var(--hl-fs-h3);
  color: var(--hl-fg);
}
body.hl-carta .hl-download__body {
  font-size: var(--hl-fs-sm);
  line-height: var(--hl-lh-body);
  color: var(--hl-fg-dim);
}
body.hl-carta .hl-download__meta {
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-fg-mute);
  white-space: nowrap;
}

@media (max-width: 640px) {
  body.hl-carta .hl-download { grid-template-columns: auto minmax(0, 1fr); padding: var(--hl-s-4); gap: var(--hl-s-4); }
  body.hl-carta .hl-download__meta { grid-column: 2; }
}

/* ---------------------------------------------------------------------------
   WEBRADIO
   ------------------------------------------------------------------------ */
body.hl-carta .hl-radio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--hl-s-5);
  padding: var(--hl-s-5);
  border: 1px solid var(--hl-rule);
  background: var(--hl-surface);
  box-shadow: var(--hl-shadow-tile);
}

body.hl-carta .hl-radio__cover {
  position: relative;
  width: 84px; height: 84px;
  flex: none;
  overflow: hidden;
  background: var(--hl-light-2);
  border: 1px solid var(--hl-rule-soft);
}
body.hl-carta .hl-radio__art { width: 100%; height: 100%; object-fit: cover; }
/* Il segno tiene il posto della copertina quando non ce n'e' una. Sopra la
   copertina vera non ci va: era una squadra colorata in mezzo alla grafica
   del brano. */
body.hl-carta .hl-radio__mark {
  position: absolute;
  inset: 34%;
  border-left: 2px solid var(--hl-violet);
  border-bottom: 2px solid var(--hl-red);
}
body.hl-carta .hl-radio__cover.has-art .hl-radio__mark { display: none; }

body.hl-carta .hl-radio__main { min-width: 0; }

body.hl-carta .hl-radio__station {
  display: flex;
  align-items: center;
  gap: var(--hl-s-2);
  margin: 0 0 var(--hl-s-2);
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-fg-mute);
}
body.hl-carta .hl-radio__dot {
  width: 7px; height: 7px;
  border-radius: var(--hl-r-pill);
  background: var(--hl-fg-mute);
  flex: none;
}
body.hl-carta .hl-radio.is-playing .hl-radio__dot {
  background: var(--hl-red);
  animation: hl-radio-pulse 2s var(--hl-e-ui) infinite;
}
@keyframes hl-radio-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(228, 35, 32, 0.34); }
  50%      { box-shadow: 0 0 0 6px rgba(228, 35, 32, 0); }
}

body.hl-carta .hl-radio__track { margin: 0 0 var(--hl-s-3); display: grid; gap: 2px; }
body.hl-carta .hl-radio__title {
  font-family: var(--hl-font-sans);
  font-weight: 500;
  font-size: var(--hl-fs-h3);
  color: var(--hl-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.hl-carta .hl-radio__artist {
  font-size: var(--hl-fs-sm);
  color: var(--hl-fg-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

body.hl-carta .hl-radio__progress {
  height: 2px;
  background: var(--hl-rule);
  overflow: hidden;
}
body.hl-carta .hl-radio__progress span {
  display: block; height: 100%; width: 0;
  background: var(--hl-violet);
  transition: width 1s linear;
}

body.hl-carta .hl-radio__controls { display: flex; align-items: center; gap: var(--hl-s-4); }

body.hl-carta .hl-radio__play {
  display: inline-flex;
  align-items: center;
  gap: var(--hl-s-3);
  padding: 12px 22px;
  border: 1px solid var(--hl-violet);
  border-radius: var(--hl-r-pill);
  background: var(--hl-violet);
  color: #fff;
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--hl-d-ui) var(--hl-e-ui);
}
body.hl-carta .hl-radio__play:hover,
body.hl-carta .hl-radio__play:focus-visible { background: var(--hl-violet-deep); border-color: var(--hl-violet-deep); }

body.hl-carta .hl-radio__icon {
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}
body.hl-carta .hl-radio.is-playing .hl-radio__icon {
  width: 10px; height: 12px;
  border: 0;
  background:
    linear-gradient(#fff, #fff) left / 3px 100% no-repeat,
    linear-gradient(#fff, #fff) right / 3px 100% no-repeat;
}

body.hl-carta .hl-radio__vol input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 92px; height: 4px;
  border-radius: var(--hl-r-pill);
  background: var(--hl-rule-strong);
  outline: none;
}
body.hl-carta .hl-radio__vol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  border-radius: var(--hl-r-pill);
  background: var(--hl-violet);
  border: 0; cursor: pointer;
}
body.hl-carta .hl-radio__vol input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: var(--hl-r-pill);
  background: var(--hl-violet);
  border: 0; cursor: pointer;
}

body.hl-carta .hl-radio__listeners {
  margin: 0;
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  color: var(--hl-fg-mute);
  white-space: nowrap;
}

body.hl-carta .hl-radio__error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--hl-fs-sm);
  color: var(--hl-red-deep);
}

/* Aggancio in basso, solo mentre si ascolta. */
/* Divi da' `position: relative; z-index: 2` sia alle sezioni sia alle colonne,
   e ognuna diventa un contesto di impilamento: il `z-index: 100` del player
   agganciato valeva solo dentro la propria colonna, e ogni sezione successiva
   — anch'essa a 2 e piu' avanti nel documento — gli passava sopra. Si azzera
   lo z-index lungo tutta la catena che lo ospita, cosi' il player torna a
   competere con le sezioni invece che coi propri fratelli. */
body.hl-carta .hl-radio-band.et_pb_section,
body.hl-carta .hl-radio-band .et_pb_row,
body.hl-carta .hl-radio-band .et_pb_column,
body.hl-carta .hl-radio-band .et_pb_code { z-index: auto; }

body.hl-carta .hl-radio.is-docked {
  position: fixed;
  left: var(--hl-gutter);
  right: var(--hl-gutter);
  bottom: var(--hl-s-4);
  z-index: var(--hl-z-overlay);
  margin: 0 auto;
  max-width: var(--hl-content-max);
  padding: var(--hl-s-3) var(--hl-s-4);
  gap: var(--hl-s-4);
  background: var(--hl-surface);
  box-shadow: var(--hl-shadow-tile);
  animation: hl-radio-dock var(--hl-d-ui) var(--hl-e-out) both;
}
@keyframes hl-radio-dock {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
body.hl-carta .hl-radio.is-docked .hl-radio__cover { width: 44px; height: 44px; }
body.hl-carta .hl-radio.is-docked .hl-radio__title { font-size: var(--hl-fs-body); }
body.hl-carta .hl-radio.is-docked .hl-radio__artist,
body.hl-carta .hl-radio.is-docked .hl-radio__progress,
body.hl-carta .hl-radio.is-docked .hl-radio__listeners { display: none; }

body.hl-carta .hl-radio-slot { min-height: var(--hl-s-10); }
body.hl-carta .hl-radio-sentinel { height: 1px; margin-top: -1px; }

@media (max-width: 780px) {
  body.hl-carta .hl-radio { grid-template-columns: auto minmax(0, 1fr); gap: var(--hl-s-4); }
  body.hl-carta .hl-radio__controls { grid-column: 1 / -1; justify-content: space-between; }
  body.hl-carta .hl-radio__vol { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.hl-carta .hl-radio.is-playing .hl-radio__dot { animation: none; }
  body.hl-carta .hl-radio.is-docked { animation: none; }
  body.hl-carta .hl-radio__progress span { transition: none; }
}

/* ---------------------------------------------------------------------------
   FORM
   ------------------------------------------------------------------------ */
body.hl-carta .hl-form { max-width: 760px; }

body.hl-carta .hl-form__set {
  border: 1px solid var(--hl-rule);
  padding: var(--hl-s-5) var(--hl-s-5) var(--hl-s-3);
  margin: 0 0 var(--hl-s-5);
  background: var(--hl-surface);
}

body.hl-carta .hl-form__set legend {
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-accent-tx);
  padding-inline: var(--hl-s-2);
}

body.hl-carta .hl-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hl-s-4);
  align-items: start;
}

/* `align-content: start`: senza, le due righe automatiche del campo si
   spartiscono lo spazio avanzato e il controllo scende. Nella coppia di
   campi affiancati si vedeva: due caselle uguali che partivano da due
   altezze diverse. */
body.hl-carta .hl-field {
  margin: 0 0 var(--hl-s-4);
  display: grid;
  align-content: start;
  gap: var(--hl-s-2);
}
body.hl-carta .hl-field label { font-size: var(--hl-fs-sm); font-weight: 700; color: var(--hl-fg); }

body.hl-carta .hl-field label .hl-req,
body.hl-carta .hl-check label .hl-req,
body.hl-carta .hl-field label em,
body.hl-carta .hl-check label em {
  font-style: normal;
  font-family: var(--hl-font-mono);
  font-weight: 500;
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
  color: var(--hl-red-deep);
  margin-left: var(--hl-s-2);
}

body.hl-carta .hl-field__hint {
  font-size: var(--hl-fs-label);
  line-height: 1.6;
  color: var(--hl-fg-mute);
}

body.hl-carta .hl-field input[type="text"],
body.hl-carta .hl-field input[type="email"],
body.hl-carta .hl-field select,
body.hl-carta .hl-field textarea {
  width: 100%;
  padding: var(--hl-s-3) var(--hl-s-4);
  border: 1px solid var(--hl-rule-strong);
  border-radius: var(--hl-r-none);
  background: var(--hl-sheet);
  color: var(--hl-fg);
  font-family: inherit;
  font-size: var(--hl-fs-body);
  transition: border-color var(--hl-d-micro) var(--hl-e-ui),
              box-shadow var(--hl-d-micro) var(--hl-e-ui);
}
body.hl-carta .hl-field textarea { resize: vertical; min-height: 120px; }

body.hl-carta .hl-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--hl-s-4) + 18px);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--hl-fg-dim) 50%),
    linear-gradient(135deg, var(--hl-fg-dim) 50%, transparent 50%);
  background-position:
    calc(100% - 21px) 50%,
    calc(100% - 16px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

body.hl-carta .hl-field input:not([type="file"]):focus-visible,
body.hl-carta .hl-field select:focus-visible,
body.hl-carta .hl-field textarea:focus-visible {
  outline: none;
  border-color: var(--hl-violet);
  box-shadow: 0 0 0 3px var(--hl-violet-soft);
}

body.hl-carta .hl-field.is-invalid input,
body.hl-carta .hl-field.is-invalid select,
body.hl-carta .hl-field.is-invalid textarea { border-color: var(--hl-red-deep); }

body.hl-carta .hl-field__error {
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  color: var(--hl-red-deep);
}

/* Campo file rivestito: il controllo di sistema parla la lingua di Windows. */
body.hl-carta .hl-file {
  display: flex;
  align-items: center;
  gap: var(--hl-s-4);
  padding: var(--hl-s-2) var(--hl-s-3) var(--hl-s-2) var(--hl-s-2);
  border: 1px solid var(--hl-rule-strong);
  background: var(--hl-light);
  cursor: pointer;
  transition: border-color var(--hl-d-micro) var(--hl-e-ui);
}
body.hl-carta .hl-file:hover { border-color: var(--hl-violet); }
body.hl-carta .hl-field input[type="file"]:focus-visible + .hl-file {
  border-color: var(--hl-violet);
  box-shadow: 0 0 0 3px var(--hl-violet-soft);
}
body.hl-carta .hl-file__btn {
  flex: none;
  padding: var(--hl-s-2) var(--hl-s-4);
  border: 1px solid var(--hl-violet);
  border-radius: var(--hl-r-pill);
  background: var(--hl-violet-soft);
  color: var(--hl-accent-tx);
  font-family: var(--hl-font-mono);
  font-size: var(--hl-fs-label);
  letter-spacing: var(--hl-ls-label);
  text-transform: uppercase;
}
body.hl-carta .hl-file__name {
  font-size: var(--hl-fs-sm);
  color: var(--hl-fg-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.hl-carta .hl-file__name.is-set { color: var(--hl-fg); }

body.hl-carta .hl-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--hl-s-3);
  align-items: start;
  margin: 0 0 var(--hl-s-4);
}
body.hl-carta .hl-check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  margin-top: 3px;
  width: 16px; height: 16px;
  border: 1px solid var(--hl-rule-strong);
  background: var(--hl-light);
  cursor: pointer;
  position: relative;
}
body.hl-carta .hl-check input[type="checkbox"]:checked {
  background: var(--hl-violet);
  border-color: var(--hl-violet);
}
body.hl-carta .hl-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px; left: 4.5px;
  width: 4px; height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(42deg);
}
body.hl-carta .hl-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--hl-violet);
  outline-offset: 2px;
}
body.hl-carta .hl-check label { font-size: var(--hl-fs-sm); line-height: var(--hl-lh-body); color: var(--hl-fg-dim); font-weight: 400; }

body.hl-carta .hl-form__note {
  font-size: var(--hl-fs-sm);
  line-height: var(--hl-lh-body);
  color: var(--hl-fg-mute);
  border-left: 2px solid var(--hl-rule-strong);
  padding-left: var(--hl-s-4);
  margin-bottom: var(--hl-s-5);
}

body.hl-carta .hl-form__submit[disabled] { opacity: 0.55; cursor: progress; }

body.hl-carta .hl-form__result {
  margin-top: var(--hl-s-4);
  padding: var(--hl-s-4) var(--hl-s-5);
  border: 1px solid var(--hl-rule);
  border-left-width: 2px;
  background: var(--hl-surface);
  font-size: var(--hl-fs-sm);
  line-height: var(--hl-lh-body);
  color: var(--hl-fg-dim);
}
body.hl-carta .hl-form__result.is-ok    { border-left-color: var(--hl-violet); }
body.hl-carta .hl-form__result.is-warn  { border-left-color: var(--hl-red); }
body.hl-carta .hl-form__result.is-error { border-left-color: var(--hl-red-deep); }

@media (max-width: 640px) {
  body.hl-carta .hl-form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------------------------------------------------------------------------
   INGRESSO DEI MEDIA
   ---------------------------------------------------------------------------
   Immagini e video entrano con un velo dei due colori di marca che rientra.
   E' un accento, non un effetto: 900ms, una volta, e non si ripete.

   Si usa box-shadow e non transform su strati duplicati: l'ombra si disegna
   fuori dal box, quindi nessuna maschera la taglia, e non serve markup in piu'.
   ------------------------------------------------------------------------ */
.hl-js body.hl-carta [data-hl-reveal] .hl-media,
.hl-js body.hl-carta [data-hl-reveal] .hl-compare__side,
.hl-js body.hl-carta [data-hl-reveal].hl-download {
  box-shadow:
    9px -7px 0 -1px rgba(146, 76, 151, 0.42),
    -8px 6px 0 -1px rgba(228, 35, 32, 0.34),
    var(--hl-shadow-tile);
  transition: box-shadow 900ms var(--hl-e-out);
  transition-delay: var(--hl-reveal-delay, 0ms);
}

.hl-js body.hl-carta [data-hl-reveal].is-revealed .hl-media,
.hl-js body.hl-carta [data-hl-reveal].is-revealed .hl-compare__side,
.hl-js body.hl-carta [data-hl-reveal].is-revealed.hl-download {
  box-shadow:
    0 0 0 -1px rgba(146, 76, 151, 0),
    0 0 0 -1px rgba(228, 35, 32, 0),
    var(--hl-shadow-tile);
}

@media (prefers-reduced-motion: reduce) {
  .hl-js body.hl-carta [data-hl-reveal] .hl-media,
  .hl-js body.hl-carta [data-hl-reveal] .hl-compare__side,
  .hl-js body.hl-carta [data-hl-reveal].hl-download {
    box-shadow: var(--hl-shadow-tile) !important;
    transition: none !important;
  }
}