/* Radio SS113 — stylehls.css · UI redesign v3 (dal file Illustrator "RSS113 Layout web", 18/10/2026)
 *
 * Sistema dimensionale: ogni misura è il valore della tavola a 1920 px × var(--u).
 *   larghezze  → moduli del 5% (logo e colonna menu = 384, logo home = 576, testo = 960, linea = 1440)
 *   spaziature → passo 16 (--s1 16, --s2 32, --s3 48, --s4 64)
 *   corpi      → base 20 (--f-60 12 · --f-80 16 · --f-100 20 · --f-120 24 · --f-150 30 · --f-300 60)
 *   tratti     → 1, 2, 3 px (non scalano)
 * Le stesse misure sono usate in JS per la timeline sul canvas (events-timeline.js, radioUiScale()).
 * Le regole del debug (?debug=1) sono in fondo, invariate salvo il font.
 */

:root {
  --u: max(0.7px, calc(0.5px + 0.026041667vw));

  /* Container generale: margini sinistro/destro della viewport */
  --margin: calc(32 * var(--u));
  --container: calc(100vw - 2 * var(--margin));

  /* Larghezze (moduli del 5% a 1920, poi scalati con --u e mai oltre il container) */
  --col: calc(384 * var(--u));                                 /* logo = colonna menu */
  --w-30: min(calc(576 * var(--u)), var(--container));         /* logo della home */
  --w-50: min(calc(960 * var(--u)), var(--container));         /* testo della home */
  --w-75: min(calc(1440 * var(--u)), calc(var(--container) - 2 * 3 * var(--f-120)));   /* linea SS113: spazio per le etichette ruotate agli estremi */

  /* Spaziature ed elementi piccoli (passo 16) */
  --s1: calc(16 * var(--u));
  --s2: calc(32 * var(--u));
  --s3: calc(48 * var(--u));
  --s4: calc(64 * var(--u));

  /* Corpi (base 20 = 100%) */
  --f-60: calc(12 * var(--u));
  --f-80: calc(16 * var(--u));
  --f-100: calc(20 * var(--u));
  --f-120: calc(24 * var(--u));
  --f-150: calc(30 * var(--u));
  --f-300: calc(60 * var(--u));

  /* Tratti */
  --t1: 1px; --t2: 2px; --t3: 3px;
}

/* Mobile: quando la colonna menu supererebbe metà schermo (384 × 0,7 ≈ 269 px → sotto 538 px).
   Stessa scala bloccata a 0,7; il menu occupa tutta la larghezza del container. */
@media (max-width: 537.98px) {
  :root {
    --u: 0.7px;
    --col: var(--container);
    --w-30: min(calc(576 * var(--u)), var(--container));
    /* Radio mobile: logo alto quanto i pulsanti. Con --u fisso a 0,7 servono
       logo (3,1119 × 44,8) + spazio 22,4 + 3 pulsanti (3 × 44,8) + 2 distanze (2 × 11,2) = 318,6 px oltre ai margini.
       Se la viewport è più stretta, logo, pulsanti e distanze si riducono insieme in proporzione; i margini restano. */
    --mob-btn: min(var(--s4), calc((100vw - 2 * var(--margin)) * 0.140615));
    --mob-gap: calc(var(--mob-btn) * 0.25);
  }
}

:root {
  --blue: #0000ff;
  --cyan: #00ffff;
  --green: #00ff00;
  --grey: #808080;
  --white: #ffffff;
  --black: #000000;
  --fill: rgba(0, 0, 0, 0.8);
  --logo-ratio: 0.32135;                         /* 308.49 / 960 del logo.svg */
  --logo-h: calc(var(--col) * var(--logo-ratio));
  --font: "interstate", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-cond: "interstate-condensed", "interstate", sans-serif;
  --regular: 500;                                /* nel kit Adobe il 500 è Interstate Regular (il 400 è ancora Light) */
  --half: 0.225s;                                 /* transizioni in sequenza: prima esce il vecchio (½), poi entra il nuovo (½) */
  --ic: calc(var(--s4) - var(--t2));              /* colonna icona: il testo parte a 64 px dal bordo esterno */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* Mobile (iOS/Android): l'altezza utile è quella VISIBILE, senza le barre del browser.
   100dvh dove supportato; la pagina non scorre (i pannelli scorrono al loro interno). */
@supports (height: 100dvh) { html, body { height: 100dvh; } }
html { overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-weight: var(--regular);
  font-size: var(--f-100);
  line-height: 1.25;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
/* Chrome Android: suppress native tap overlay; custom :active handles feedback. */
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
b, strong { font-weight: 700; }
[hidden] { display: none !important; }

/* ---------- Transizioni in sequenza (niente dissolvenze incrociate) ----------
   Elemento che esce: sparisce subito in ½ tempo. Elemento che entra: aspetta ½ tempo, poi compare in ½ tempo. */
.logo-bar, .screen-home, .screen-loading, .screen-about, .panels, .dither-over-spectrum, .top-actions {
  opacity: 0; visibility: hidden;
  transition: opacity var(--half) ease, visibility 0s linear var(--half);
}
.is-on {
  opacity: 1 !important; visibility: visible !important;
  transition: opacity var(--half) ease var(--half), visibility 0s linear var(--half) !important;
}

/* ---------- Sfondi ---------- */
.bg-key {
  position: fixed; inset: 0; z-index: 0;
  background-image: url("../img/80percent-black-dither.gif"), url("../img/key-bg-static.png?v=2");   /* fermo in home e about */
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-position: 0 0, center;
  image-rendering: pixelated;
}
body[data-screen="loading"] .bg-key { background-image: url("../img/80percent-black-dither.gif"), url("../img/key-bg.gif"); }   /* animato solo nel loading */
body[data-screen="radio"] .bg-key { display: none; }

.dither-over-spectrum {
  position: absolute; inset: 0;
  background: url("../img/80percent-black-dither.gif") repeat;
  image-rendering: pixelated;
}


/* ---------- Radio: canvas unico (spettrogramma + timeline), come in produzione ---------- */
#spectrumFullscreenViewport { position: fixed; top: 0; left: 0; right: 0; height: 100%; z-index: 1; visibility: hidden; }
@supports (height: 100dvh) { #spectrumFullscreenViewport { height: 100dvh; } }
body[data-screen="radio"] #spectrumFullscreenViewport { visibility: visible; }
#compositeCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.dither-over-spectrum {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: url("../img/80percent-black-dither.gif") repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
/* About aperto sulla radio: la fascia della timeline resta nera, senza etichette */
body.about-open[data-screen="radio"] #spectrumFullscreenViewport::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--timeline-h, 0px); background: #000;
}

/* ---------- Logo: due istanze che compaiono/scompaiono, nessuno spostamento ---------- */
.logo { height: auto; }
.logo-bar {
  position: fixed; z-index: 20;
  top: var(--margin); left: var(--margin);
  width: var(--col);
}
.logo-home { width: var(--w-30); }

/* ---------- Pulsanti in alto a destra ---------- */
.top-actions {
  position: fixed; z-index: 30;
  top: var(--margin); right: var(--margin);
  display: flex; gap: var(--s1);
}
.icon-btn {
  width: var(--s4); height: var(--s4);
  display: grid; place-items: center; padding: 0;
  background: var(--fill);
  border: var(--t2) solid var(--white);
  border-radius: calc(var(--s1) * 0.75);
  font-size: calc(var(--s4) * 0.5);
  cursor: pointer;
}
.icon-btn:focus-visible { color: var(--cyan); border-color: var(--cyan); outline: none; }
.radio-only { display: none; }
body[data-screen="radio"] .top-actions .radio-only { display: grid; }

/* ---------- Schermate ---------- */
.screen { position: fixed; inset: 0; z-index: 10; }


/* HOME */
.home-stack {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3);
  padding: var(--s4) var(--margin);
  overflow-y: auto;
}
.home-text { width: var(--w-50); text-align: center; font-size: var(--f-150); line-height: 1.3333; }
.home-intro, .home-cta { margin: 0; }
.home-cta { font-weight: 700; margin-top: calc(var(--f-150) * 0.6667); }
.home-notice { margin: var(--s1) 0 0; color: var(--cyan); font-size: var(--f-100); }

/* Linea SS113 proporzionale (≥ 768 px). Posizioni orizzontali calcolate in JS (uxui.js), in px della linea. */
.ss113-map {
  position: relative; flex: none;
  width: var(--w-75);
  height: calc(var(--f-120) * 6);
  margin-top: var(--s2);
}
.ss113-map .road { position: absolute; left: calc(var(--t3) / -2); right: calc(var(--t3) / -2); bottom: 0; height: var(--t3); background: var(--white); transform: translateY(50%); }
/* la tacca scende fino al bordo inferiore della linea: angolo pieno, senza scalino */
.ss113-map .place-tick { position: absolute; bottom: calc(var(--t3) / -2); width: var(--t3); height: calc(var(--s1) + var(--t3) / 2); background: var(--white); transform: translateX(-50%); }
.ss113-map .map-label {
  position: absolute; left: 0; bottom: 100%;
  white-space: nowrap; font-size: var(--f-120); line-height: 1;
  transform-origin: left bottom; transform: rotate(-45deg);
  pointer-events: none;
}
.ss113-map .place { position: absolute; bottom: 0; width: 0; }
.ss113-map .place .map-label { bottom: calc(var(--s1) + var(--s1) * 0.5); left: calc(var(--s1) * -0.25); }
.ss113-map .station {
  position: absolute; bottom: 0; transform: translate(-50%, 50%);
  width: var(--s2); height: var(--s2); padding: 0;
  border: var(--t2) solid var(--white); border-radius: 50%;
  background: var(--blue); cursor: pointer;
}
.ss113-map .station .map-label { font-weight: 700; left: 50%; bottom: calc(100% + var(--s1) * 0.5); pointer-events: auto; }   /* anche l'etichetta avvia la stazione */
.ss113-map .station.off .map-label { cursor: not-allowed; }
.ss113-map .station.off { background: var(--grey); cursor: not-allowed; }
.ss113-map .station .leader { display: none; }
.ss113-map .station:not(.off):focus-visible { outline: none; }
.ss113-map .station:not(.off):focus-visible .map-label { color: var(--cyan); }
.home-station-list { display: none; }

/* Stazioni attive: il lampeggio funzionale (radioHomeFlicker) modifica il riempimento.
   Il feedback di interazione modifica solo testo e bordo, non il riempimento. */
.ss113-map .station:not(.off).flash,
.home-station-list button.row:not(.off) .sdot.flash { background-color: var(--cyan); }
.ss113-map .station:not(.off).flash-soft,
.home-station-list button.row:not(.off) .sdot.flash-soft { background-color: rgb(0, 140, 255); }
.ss113-map .station:not(.off):focus-visible,
.home-station-list button.row:not(.off):focus-visible .sdot {
  border-color: var(--cyan);
}


/* LOADING */
.screen-loading { display: grid; place-items: center; align-content: center; gap: var(--s3); text-align: center; }
.screen-loading p { margin: 0; font-size: var(--f-150); }
.spinner { position: relative; width: var(--s4); height: var(--s4); margin: 0 auto; animation: spin 1.1s steps(8) infinite; }
.spinner span { position: absolute; left: 50%; top: 50%; width: 18%; height: 18%; margin: -9% 0 0 -9%; border-radius: 50%; background: var(--white); }
.spinner span:nth-child(1) { transform: rotate(0deg)   translateY(-200%); }
.spinner span:nth-child(2) { transform: rotate(45deg)  translateY(-200%); opacity: .875; }
.spinner span:nth-child(3) { transform: rotate(90deg)  translateY(-200%); opacity: .75; }
.spinner span:nth-child(4) { transform: rotate(135deg) translateY(-200%); opacity: .625; }
.spinner span:nth-child(5) { transform: rotate(180deg) translateY(-200%); opacity: .5; }
.spinner span:nth-child(6) { transform: rotate(225deg) translateY(-200%); opacity: .375; }
.spinner span:nth-child(7) { transform: rotate(270deg) translateY(-200%); opacity: .25; }
.spinner span:nth-child(8) { transform: rotate(315deg) translateY(-200%); opacity: .125; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Menu radio (uno aperto alla volta, riempimento sempre nero 80%) ---------- */
.panels {
  position: fixed; z-index: 15;
  left: var(--margin);
  top: calc(var(--margin) + var(--logo-h) + var(--s2));
  width: var(--col);
  max-height: calc(100vh - var(--margin) - var(--logo-h) - var(--s2) - var(--s4) - var(--s2));
  max-height: calc(100dvh - var(--margin) - var(--logo-h) - var(--s2) - var(--timeline-h, var(--s4)) - var(--s2));
  overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: var(--s1);
}

.panel {
  background: var(--fill);
  border: var(--t2) solid var(--white);
  border-radius: calc(var(--s1) * 0.75);
  flex: none;
}
.panel-head {
  width: 100%; min-height: calc(var(--s4) - 2 * var(--t2));
  display: grid; grid-template-columns: var(--ic) 1fr auto; align-items: center;
  padding: 0 var(--s1) 0 0;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.panel-head > i { justify-self: center; font-size: calc(var(--f-100) * 1.5); line-height: 1; }
.panel-head .wi { font-size: var(--f-120); }
.panel-head .closed-value { font-size: var(--f-80); white-space: nowrap; }
.panel-head .closed-label, .panel-head .open-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* una sola riga, con … se troppo lunga */
.panel-head .open-label, .panel-head .open-icon { display: none; }
.panel:not(.open) .panel-head:focus-visible { color: var(--cyan); outline: none; }

.panel-body { display: none; }
.panel.open .panel-head { text-transform: uppercase; }
.panel.open .closed-label, .panel.open .closed-value, .panel.open .closed-icon { display: none; }
.panel.open .open-label { display: inline; }
.panel.open .open-icon { display: inline-block; }
.panel.open .panel-body { display: block; padding: 0 var(--s1) var(--s1) 0; }
.panel.open .panel-body::before { content: ""; display: block; height: var(--t1); background: var(--white); margin: 0 0 calc(var(--s1) * 0.5) var(--s1); }

/* Elenco stazioni (menu radio e home mobile) */
.station-list { list-style: none; margin: 0; padding: 0; }
.station-list li { position: relative; }
.station-list li + li::before {           /* tratto verticale che unisce le stazioni */
  content: ""; position: absolute; z-index: 0;
  left: calc(var(--ic) / 2 - var(--t2) / 2); top: calc(var(--s3) * -0.5); height: var(--s3);
  width: var(--t2); background: var(--white);
}
.station-list .row {
  width: 100%; min-height: var(--s3);
  display: grid; grid-template-columns: var(--ic) 1fr auto; align-items: center;
  padding: 0; background: none; border: 0; text-align: left;
  font-size: var(--f-100);
}
button.row { cursor: pointer; }
.station-list .sdot {
  position: relative; z-index: 1; justify-self: center;
  width: calc(var(--s1) * 1.25); height: calc(var(--s1) * 1.25);
  border: var(--t2) solid var(--white); border-radius: 50%; background: var(--black);
}
.station-list .km { font-size: var(--f-80); }
.station-list .current .sdot { background: var(--blue); }
.station-list .current .name { font-weight: 700; }
.station-list .off { color: var(--grey); cursor: not-allowed; }
.station-list .off .sdot { background: var(--grey); }

.station-list .place-row .ptick { justify-self: center; width: var(--s1); height: var(--t3); background: var(--white); position: relative; z-index: 1; }
.station-list .place-row .name { font-size: var(--f-80); }

/* Info stazione */
.info-rows { list-style: none; margin: 0; padding: 0; }
.info-rows li { display: grid; grid-template-columns: var(--ic) 1fr auto; align-items: center; min-height: var(--s3); }
.info-rows li > i { justify-self: center; font-size: var(--f-120); }
.info-rows li > i.ph { font-size: calc(var(--f-100) * 1.5); }
.info-rows .v { font-size: var(--f-80); }
.info-rows li.sep { display: block; min-height: 0; height: var(--t1); margin: calc(var(--s1) * 0.5) 0 calc(var(--s1) * 0.5) var(--s1); background: var(--white); }

/* Mixer */
.stream-control { display: grid; grid-template-columns: var(--ic) 1fr calc(var(--s3) * 0.75); align-items: center; row-gap: calc(var(--s1) * 0.5); padding: calc(var(--s1) * 0.75) 0; }
.stream-control.master { box-shadow: inset 0 calc(-1 * var(--t1)) 0 var(--white); }
.mobile-stations-track > .station-container { display: none; }
.mobile-stations-track > .station-container.is-current { display: block; }
.station-header { display: none; }
.stream-control .ch-name { grid-column: 2 / 4; }
.stream-control .mute-btn { grid-column: 1; position: relative; background: none; border: 0; padding: 0; cursor: pointer; font-size: calc(var(--f-100) * 1.5); line-height: 1; justify-self: center; }

.stream-control .mute-btn i, .icon-btn i { position: relative; display: inline-block; }
/* barra rossa del muto, uguale ovunque (mixer e pulsante in alto a destra), come nel file AI */
.stream-control.muted .mute-btn i::after, #spectrumMasterMuteBtn.is-muted i::after {
  content: ""; position: absolute; left: -8%; top: 50%; width: 116%; height: var(--t2);
  background: #ff0000; transform: rotate(45deg);
}
.stream-control .val { font-size: var(--f-80); text-align: right; }
.stream-control input[type="range"]:disabled { cursor: not-allowed; }
.stream-control .mute-btn:disabled { cursor: not-allowed; }
/* canale silenziato dal volume generale: icona e taglio dello stesso grigio */
.stream-control.forced .mute-btn { color: var(--grey); }
.stream-control.forced .mute-btn i::after { background: var(--grey) !important; }
.stream-control.muted .val { color: var(--grey); }
.stream-control input[type="range"] { margin: 0 var(--s1) 0 0; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: auto; height: calc(var(--s1) * 1.5); background: transparent; cursor: pointer; --pct: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: var(--t3); background: linear-gradient(to right, var(--white) var(--pct), var(--grey) var(--pct)); }
input[type="range"]::-moz-range-track { height: var(--t3); background: var(--grey); }
input[type="range"]::-moz-range-progress { height: var(--t3); background: var(--white); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: calc(var(--s1) * 1.25); height: calc(var(--s1) * 1.25); margin-top: calc((var(--t3) - var(--s1) * 1.25) / 2); border-radius: 50%; background: var(--blue); border: var(--t2) solid var(--white); }
input[type="range"]::-moz-range-thumb { width: calc(var(--s1) * 1.25 - 4px); height: calc(var(--s1) * 1.25 - 4px); border-radius: 50%; background: var(--blue); border: var(--t2) solid var(--white); }
.stream-control.muted input[type="range"]::-webkit-slider-runnable-track { background: var(--grey); }
.stream-control.muted input[type="range"]::-moz-range-progress { background: var(--grey); }
.stream-control.muted input[type="range"]::-webkit-slider-thumb { background: var(--grey); border-color: var(--grey); }
.stream-control.muted input[type="range"]::-moz-range-thumb { background: var(--grey); border-color: var(--grey); }

/* ---------- Modalità inattiva (10 s senza azioni, solo in radio e con about chiuso) ---------- */
body.idle, body.idle * { cursor: none !important; }

/* ---------- About ---------- */
.screen-about { overflow-y: auto; z-index: 14; }
.about-grid {
  position: relative;
  padding-top: calc(var(--margin) + var(--logo-h) + var(--s1));
  padding-bottom: calc(var(--s4) * 2);
}
.about-map {
  position: absolute; left: var(--margin);
  top: calc(var(--margin) + var(--logo-h) + var(--s1) + var(--f-300) * 2 + var(--s1));
  width: var(--col);
}
.about-text {
  /* inizia dopo logo + 64: a 1920 cade al 25% (480 px). La giustezza (960) si riduce solo quando
     non c'è più spazio, e a quel punto il margine destro resta quello minimo del container. */
  margin-left: calc(var(--margin) + var(--col) + var(--s4));
  width: min(calc(960 * var(--u)), calc(100vw - var(--margin) - var(--col) - var(--s4) - var(--margin)));
}
.about-text h1 {
  margin: 0 0 var(--s1); color: var(--white);
  font-family: var(--font-cond); font-weight: 700;
  font-size: var(--f-300); line-height: 1;
}
.about-text p { margin: 0 0 calc(var(--f-150) * 0.6667); font-size: var(--f-150); line-height: 1.3333; }
/* Sezioni dell'about (dossier 2026): titolo h2 come h1, immagine nella colonna del logo. */
.about-text h2, h2.about-text {
  margin: 0 0 var(--s1); color: var(--white);
  font-family: var(--font-cond); font-weight: 700;
  font-size: var(--f-300); line-height: 1;
}
.about-text h3 {
  margin: 0 0 calc(var(--f-150) * 0.6667);
  font-size: var(--f-150); line-height: 1.3333; font-weight: var(--regular);
  text-decoration: underline; text-decoration-thickness: var(--t1); text-underline-offset: 0.15em;
}
.about-text h3 strong { font-weight: 700; }
.about-text a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--t1); text-underline-offset: 0.15em; overflow-wrap: anywhere; }
.about-text a:hover, .about-text a:focus-visible { color: var(--cyan); }
.about-section, .about-grid > .about-block { margin-top: var(--s4); }
.about-section > h2.about-text { margin: 0 0 var(--s2) calc(var(--margin) + var(--col) + var(--s4)); }
.about-block {
  display: grid; grid-template-columns: var(--col) auto; column-gap: var(--s4);
  padding-left: var(--margin); align-items: start;
}
.about-section .about-block + .about-block { margin-top: var(--s2); }
.about-block > .about-text { grid-column: 2; margin-left: 0; }
.about-photo { grid-column: 1; width: var(--col); height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.about-photo-square { aspect-ratio: 1 / 1; }
.about-refs { margin: 0; padding: 0 0 0 1.1em; list-style: disc outside; font-size: var(--f-100); line-height: 1.4; }
.about-refs li { margin: 0 0 calc(var(--s1) * 0.5); padding-left: 0.2em; }
.about-refs li::marker { color: var(--white); }

/* ---------- Mobile (< 538 px: la colonna menu supererebbe metà schermo) ---------- */
@media (max-width: 537.98px) {
  .home-stack { justify-content: flex-start; padding-top: calc(var(--s4) + var(--s3)); gap: var(--s2); }
  .ss113-map { display: none; }
  .home-station-list { display: block; width: 100%; }
  /* home mobile: nomi di stazioni e città uno step sopra (24 a 1920), stazioni bold, città regular */
  .home-station-list .name, .home-station-list .place-row .name { font-size: var(--f-120); }
  .home-station-list button.row .name { font-weight: 700; }
  .home-station-list .place-row .name { font-weight: var(--regular); }
  /* stessi criteri cromatici della linea desktop: attiva blu, inattiva grigia (testo bianco), hover ciano */
  .home-station-list button.row .sdot { width: calc(var(--s2) * 0.75); height: calc(var(--s2) * 0.75); background: var(--blue); }
  .home-station-list button.row.off { color: var(--white); }
  .home-station-list button.row.off .sdot { background: var(--grey); }
  .home-station-list button.row:not(.off):focus-visible { color: var(--cyan); outline: none; }
  .home-station-list button.row:not(.off):focus-visible .sdot { border-color: var(--cyan); }
  /* logo e testo introduttivo allineati a sinistra */
  .home-stack { align-items: flex-start; }
  .home-text { text-align: left; }

  /* radio mobile: logo alto quanto i pulsanti; se manca spazio si riducono tutti insieme (--mob-btn) */
  .logo-bar { width: calc(var(--mob-btn) / var(--logo-ratio)); }
  .icon-btn { width: var(--mob-btn); height: var(--mob-btn); font-size: calc(var(--mob-btn) * 0.5); }
  .top-actions { gap: var(--mob-gap); }
  .panels { top: calc(var(--margin) + var(--mob-btn) + var(--s2)); right: var(--margin); width: auto; }
  .panel.open { box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
  .about-map { position: static; width: 45%; margin: 0 0 var(--s2) var(--margin); }
  .about-grid { padding-top: calc(var(--margin) + var(--mob-btn) + var(--s2)); }
  .about-text { margin: 0 var(--margin); width: auto; }
  .about-section > h2.about-text { margin: 0 var(--margin) var(--s2); }
  .about-block { display: block; padding: 0 var(--margin); }
  .about-block > .about-text { margin: 0; }
  .about-photo { width: 100%; margin-bottom: var(--s2); }
  .home-stack { padding-left: var(--margin); padding-right: var(--margin); }
}


/* --- frequency-scale-style --- */
#frequencyScaleCanvas {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            width: 62px;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        @media (max-width: 768px) {
            #frequencyScaleCanvas {
                width: 56px;
            }
        }




/* DEBUG_SPECTRUM_CURSOR_STYLE_V1
 *
 * Attivato da uxui.js soltanto con ?debug=1.
 */
#compositeCanvas.debug-spectrum-cursor {
    cursor: crosshair;
}

#compositeCanvas.debug-spectrum-cursor.debug-detection-hover {
    cursor: pointer;
}


/* DEBUG_YAMNET_ANNOTATION_STYLE_V1 */

#debugSpectrumSelectionOverlayCanvas {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

#compositeCanvas.debug-spectrum-annotation-enabled {
    touch-action: none;
}

#debugAnnotationPanel {
    position: fixed;

    left: 50%;
    bottom: var(--ui-screen-edge);

    transform: translateX(-50%);

    width: min(
        560px,
        calc(
            100vw -
            (var(--ui-screen-edge) * 2)
        )
    );

    padding: 14px;

    box-sizing: border-box;

    background:
        rgba(10, 10, 10, 0.94);

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    border-radius: 8px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    z-index: 80;

    color: #fff;
}

#debugAnnotationPanel[hidden] {
    display: none;
}

.debug-annotation-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.debug-annotation-meta {
    font-size: 0.76rem;
    line-height: 1.4;
    color: #aaa;
    margin-bottom: 12px;
}

.debug-annotation-labels {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(105px, 1fr)
        );

    gap: 7px;
}

.debug-annotation-label,
.debug-annotation-cancel {
    min-height: 38px;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    border-radius: 5px;

    background: #222;
    color: #fff;

    font: inherit;

    cursor: pointer;
}

.debug-annotation-label:hover,
.debug-annotation-cancel:hover {
    background: #333;
}

.debug-annotation-label.negative {
    border-style: dashed;
}

.debug-annotation-cancel {
    width: 100%;
    margin-top: 10px;
}

.debug-annotation-loading,
.debug-annotation-error {
    grid-column: 1 / -1;

    padding: 8px 0;

    font-size: 0.8rem;
    color: #aaa;
}

.debug-annotation-error {
    color: #ff8080;
}

@media (max-width: 768px) {

    #debugAnnotationPanel {
        max-height: 55vh;
        overflow-y: auto;
    }

    .debug-annotation-labels {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}



/* DEBUG_YAMNET_PANEL_V1 */

#debugYamnetPanelButton {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 10020;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;

    padding: 9px 14px;

    background: rgba(15,15,15,.92);
    color: #fff;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 4px 18px rgba(0,0,0,.35);

    backdrop-filter:
        blur(8px);
}


#debugYamnetPanelButton:hover {
    background: rgba(35,35,35,.96);
}


#debugYamnetPanel {
    position: fixed;

    left: 16px;
    bottom: 64px;

    width: min(
        360px,
        calc(100vw - 32px)
    );

    max-height:
        min(620px, calc(100vh - 90px));

    overflow: auto;

    z-index: 10021;

    background: rgba(15,15,15,.97);
    color: #fff;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 14px;

    box-shadow:
        0 12px 40px rgba(0,0,0,.55);

    backdrop-filter:
        blur(12px);
}


#debugYamnetPanel[hidden] {
    display: none;
}


.debug-yamnet-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;

    padding: 13px 14px;

    border-bottom:
        1px solid rgba(255,255,255,.12);
}


.debug-yamnet-station-selector {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: normal;
}

.debug-yamnet-station-selector select {
    max-width: 115px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    background: #282828;
    color: white;
    padding: 5px 6px;
}

#debugYamnetPanelClose {
    border: 0;
    background: transparent;
    color: #fff;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}


.debug-yamnet-panel-body {
    padding: 14px;
}


.debug-yamnet-placeholder {
    opacity: .65;
    font-size: 13px;
}


@media (max-width: 768px) {

    #debugYamnetPanelButton {
        left: 10px;
        bottom: 10px;
    }

    #debugYamnetPanel {
        left: 10px;
        bottom: 56px;

        width:
            calc(100vw - 20px);

        max-height:
            calc(100vh - 76px);
    }

}


/* YAMNET_CONTROL_CENTER_UI_V1 */

@media (min-width: 769px) {

    #debugYamnetPanel {
        width:
            min(
                1040px,
                calc(100vw - 32px)
            );

        max-height:
            calc(100vh - 90px);
    }

    .debug-yamnet-dashboard {
        display: grid;

        grid-template-columns:
            minmax(280px, .8fr)
            minmax(380px, 1.2fr);

        gap: 14px;
    }

    .debug-yamnet-span {
        grid-column:
            1 / -1;
    }

    .debug-yamnet-samples-grid {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 8px;
    }

}


.debug-yamnet-section {
    padding: 12px;

    border:
        1px solid rgba(
            255,
            255,
            255,
            .12
        );

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            .025
        );
}


.debug-yamnet-section h3 {
    margin:
        0 0 10px;

    font-size: 14px;
}


.debug-yamnet-toolbar {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

    margin-top: 8px;
}


.debug-yamnet-toolbar button,
.debug-yamnet-toolbar select,
#debugYamnetTrainButton,
#debugYamnetBaselineButton {
    font: inherit;
}


#debugYamnetTrainButton,
#debugYamnetBaselineButton {
    width: 100%;

    margin-top: 8px;
}


.debug-yamnet-muted {
    opacity: .72;

    font-size: 12px;

    margin-top: 4px;
}


.debug-yamnet-class-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 3px 10px;

    margin-top: 10px;

    font-size: 12px;
}


.debug-yamnet-class-grid
.is-ready {
    font-weight: 700;
}


.debug-yamnet-sample-card,
.debug-yamnet-model-card {
    padding: 10px;

    border:
        1px solid rgba(
            255,
            255,
            255,
            .12
        );

    border-radius: 8px;

    background:
        rgba(
            255,
            255,
            255,
            .025
        );
}


.debug-yamnet-model-card {
    margin-top: 10px;
}


.debug-yamnet-model-header {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 10px;
}


.debug-yamnet-badge {
    padding: 2px 7px;

    border:
        1px solid rgba(
            255,
            255,
            255,
            .25
        );

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;
}


.debug-yamnet-metrics {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                180px,
                1fr
            )
        );

    gap: 4px 12px;

    margin-top: 8px;

    font-size: 12px;
}


.debug-yamnet-confusion {
    margin-top: 10px;
}


.debug-yamnet-confusion table {
    margin-top: 8px;

    border-collapse:
        collapse;

    font-size: 11px;
}


.debug-yamnet-confusion th,
.debug-yamnet-confusion td {
    padding: 4px 7px;

    border:
        1px solid rgba(
            255,
            255,
            255,
            .14
        );

    text-align: center;
}


@media (max-width: 768px) {

    .debug-yamnet-dashboard {
        display: block;
    }

    .debug-yamnet-section {
        margin-bottom: 10px;
    }

    .debug-yamnet-samples-grid {
        display: block;
    }

    .debug-yamnet-sample-card {
        margin-top: 8px;
    }

}



/* UI_REDESIGN_V3: il debug usa lo stesso font della nuova interfaccia (nessun altro cambiamento) */
#debugAnnotationPanel, #debugYamnetPanel, #debugYamnetPanelButton,
#debugAnnotationPanel button, #debugYamnetPanel button, #debugYamnetPanel select, #debugYamnetPanel input {
  font-family: var(--font);
}

/* UI_REDESIGN_V3: stati di caricamento/errore del pannello Info stazione */
.panel-body .meteo-loading, .panel-body .meteo-error {
  padding: calc(var(--s1) * 0.5) 0 0 var(--s1);
  font-size: var(--f-80);
}

/* iOS: il volume degli elementi audio non è regolabile da script. Restano i pulsanti muto. */
body.volume-readonly .stream-control input[type="range"],
body.volume-readonly .stream-control .val { visibility: hidden; }

/* Input-specific interaction states. Touch never uses the mouse hover styles.
   Preserve station fill/flash and disabled/muted states. */
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { color: var(--cyan); border-color: var(--cyan); }
  .ss113-map .station:not(.off):hover { border-color: var(--cyan); }
  .ss113-map .station:not(.off):hover .map-label { color: var(--cyan); }
  .home-station-list button.row:not(.off):hover { color: var(--cyan); }
  .home-station-list button.row:not(.off):hover .sdot { border-color: var(--cyan); }
  .panel:not(.open):hover { border-color: var(--cyan); }
  .panel:not(.open) .panel-head:hover { color: var(--cyan); }
  .panel.open .panel-head:hover .open-label { color: var(--cyan); }
  .station-list button.row:not(.off):not(.current):hover { color: var(--cyan); }
  .station-list button.row:not(.off):not(.current):hover .sdot { border-color: var(--cyan); }
  .stream-control:not(.forced) .mute-btn:hover { color: var(--cyan); }
}
@media (hover: none) {
  .icon-btn:active { color: var(--cyan); border-color: var(--cyan); }
  .ss113-map .station:not(.off):active { border-color: var(--cyan); }
  .ss113-map .station:not(.off):active .map-label { color: var(--cyan); }
  .home-station-list button.row:not(.off):active { color: var(--cyan); }
  .home-station-list button.row:not(.off):active .sdot { border-color: var(--cyan); }
  .panel:not(.open):has(.panel-head:active) { border-color: var(--cyan); }
  .panel .panel-head:active { color: var(--cyan); }
  .panel.open .panel-head:active .open-label { color: var(--cyan); }
  .station-list button.row:not(.off):not(.current):active { color: var(--cyan); }
  .station-list button.row:not(.off):not(.current):active .sdot { border-color: var(--cyan); }
  .stream-control:not(.forced) .mute-btn:active { color: var(--cyan); }
}

/* Lo screenshot non deve comparire prima dell'inizializzazione debug. */
#spectrumCaptureBtn[hidden] { display: none !important; }


/* iOS touch mixer targets (WebKit touch only).
 * Mobile's scaled --s1 makes range controls ~17px tall and thumbs ~14px.
 * Give native controls a 44px hit box while keeping the original thumb size,
 * track geometry, desktop layout or Android touch behaviour.
 * The support probe is iOS-WebKit specific; pointer: coarse excludes Mac.
 */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) {
    .stream-control {
      grid-template-columns: max(44px, var(--ic)) minmax(0, 1fr) calc(var(--s3) * 0.75);
    }

    .stream-control .mute-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      padding: 0;
      justify-self: center;
      -webkit-tap-highlight-color: transparent;
    }

    .stream-control input[type="range"] {
      display: block;
      width: 100%;
      min-width: 0;
      height: 44px;
      min-height: 44px;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    /* Native hit regions stay 44px. Inset the 3px visible track by half
       the 44px thumb width on both ends to align its endpoints with the
       centre of the visible dot at min/max, without changing hit geometry. */
    .stream-control input[type="range"]::-webkit-slider-runnable-track {
      height: 44px;
      background: linear-gradient(to right, var(--white) var(--pct), var(--grey) var(--pct)) center / calc(100% - 44px) var(--t3) no-repeat;
    }
    .stream-control.muted input[type="range"]::-webkit-slider-runnable-track {
      background: linear-gradient(var(--grey), var(--grey)) center / calc(100% - 44px) var(--t3) no-repeat;
    }
    .stream-control input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 44px;
      height: 44px;
      margin-top: 0;
      border: 0;
      border-radius: 50%;
      background: radial-gradient(circle at center,
        var(--blue) 0 calc(var(--s1) * 0.625 - var(--t2)),
        var(--white) calc(var(--s1) * 0.625 - var(--t2)) calc(var(--s1) * 0.625),
        transparent calc(var(--s1) * 0.625));
    }
    .stream-control.muted input[type="range"]::-webkit-slider-thumb {
      background: radial-gradient(circle at center,
        var(--grey) 0 calc(var(--s1) * 0.625),
        transparent calc(var(--s1) * 0.625));
    }
  }
}