/* SAE Salute — lettore dei podcast (barra fissa in basso e vista a tutto schermo).
   Identità SAE (docs/analisi/design.md §2.16): fondo navy #062f52, testo bianco, barra di avanzamento bianca con cursore bordato d'azzurro, focus giallo (11:1 sul
   navy), Charis SIL. Comandi sotto la barra dei minuti, larghi quanto la barra. Colori espliciti, uguali ovunque. */

.pd-player [hidden], .pd-player[hidden] { display: none !important; }

.pd-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  font-family: var(--font-display, system-ui, sans-serif); font-size: 1rem; line-height: 1.4; color: #fff;
}
/* Spazio in fondo alla pagina per la barra (altezza misurata da podcast.js) */
body.pd-has-player { padding-bottom: var(--pd-player-h, 88px); }
/* L'elemento che riceve il focus non finisce sotto la barra (né sotto i sottotitoli sovraimpressi): WCAG 2.4.11.
   --pd-player-cover = barra + sottotitoli, misurata da podcast.js */
html:has(body.pd-has-player) { scroll-padding-bottom: calc(var(--pd-player-cover, var(--pd-player-h, 88px)) + 8px); }

/* Focus sempre giallo sul blu notte */
.pd-player :focus-visible { outline: 3px solid #f2be3a; outline-offset: 3px; box-shadow: none; }

/* ---------- Sottotitoli sovraimpressi sopra la barra ---------- */
.pd-cap { display: flex; justify-content: center; padding: 0 16px 10px; pointer-events: none; }
.pd-cap span {
  max-width: 900px; padding: 6px 14px; border-radius: 6px; background: rgba(4, 31, 55, .9); color: #fff;
  /* gli a capo del file dei sottotitoli non contano: il testo va a capo solo dove serve (niente parole sole su una riga) */
  text-align: center; white-space: normal; font-weight: 600; line-height: 1.35; font-size: 1.25rem;
}
.pd-cap[data-size="s"] span { font-size: 1rem; }
.pd-cap[data-size="l"] span { font-size: 1.6rem; }

/* ---------- Barra ---------- */
.pd-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 16px;
  min-height: 88px; padding: 0 16px env(safe-area-inset-bottom, 0px);
  background: #062f52; color: #fff; box-shadow: 0 -4px 20px rgba(0, 0, 0, .2);
}
/* Sopra i 760px la colonna di destra (velocità, CC, volume, dimensione, tutto schermo, chiudi) è larga almeno quanto
   il suo contenuto: altrimenti sconfinerebbe sulla barra dei minuti; si stringe la colonna centrale */
@media (min-width: 761px) {
  .pd-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(max-content, 1fr); }
}
.pd-bar-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pd-bar-cover {
  display: block; flex: none; width: 56px; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; text-decoration: none;
  /* ripiego finché la copertina non è disegnata */
  background: linear-gradient(135deg, var(--c, #145ead) 0%, #062f52 100%);
}
.pd-bar-text { min-width: 0; }
.pd-bar-title {
  display: block; color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-bar-title:hover { color: #fff; text-decoration: underline; }
.pd-bar-sub { margin-top: 2px; font-size: .8125rem; color: #c9dcee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-bar-channel[data-pd-error] { color: #ffd5db; font-weight: 700; }
.pd-bar-jingle {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 3px;
  background: #fff; color: #062f52; font-weight: 700; font-size: .75rem; line-height: 1.6; vertical-align: 1px;
}
.pd-bar-live {
  display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; padding: 0 6px; border-radius: 3px;
  background: #d52b3a; color: #fff; font-weight: 700; font-size: .75rem; line-height: 1.6; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px;
}
.pd-bar-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pd-bar-pulse 1.6s ease-in-out infinite; }
@keyframes pd-bar-pulse { 50% { opacity: .3; } }

/* I comandi stanno sotto la barra dei minuti e ne occupano tutta la larghezza (il primo allineato al tempo trascorso,
   l'ultimo alla durata). Nel DOM i pulsanti vengono prima: la linea del tempo va sopra con l'ordine */
.pd-bar-controls { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.pd-bar-controls > .pd-time { order: -1; }
.pd-bar-buttons { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 720px; }
.pd-bar-extra { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }

.pd-ctl {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #dce7f2; font: inherit; cursor: pointer;
}
.pd-ctl:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .12); }
.pd-ctl:disabled { opacity: .35; cursor: default; }
.pd-ctl .pd-ctl-i { width: 22px; height: 22px; vertical-align: 0; }
.pd-ctl-skip .pd-ctl-i { width: 28px; height: 28px; }
.pd-ctl-sm { width: 36px; height: 36px; }
.pd-ctl-sm .pd-ctl-i { width: 20px; height: 20px; }
.pd-ctl[data-pd-cc][aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 2px #9cc9f5; }
.pd-ctl-main { width: 44px; height: 44px; background: #fff; color: #062f52; }
.pd-ctl-main:hover:not(:disabled) { background: #fff; color: #062f52; transform: scale(1.05); }

/* Play/pausa (stato scritto da podcast.js) e spinner durante il caricamento */
.pd-ctl-i-pause { display: none; }
.pd-ctl[data-pd-state="playing"] .pd-ctl-i-play { display: none; }
.pd-ctl[data-pd-state="playing"] .pd-ctl-i-pause { display: inline-block; }
.pd-ctl-spin {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(6, 47, 82, .25); border-top-color: #062f52; animation: pd-ctl-spin .8s linear infinite;
}
.pd-ctl[data-pd-busy] .pd-ctl-spin { display: block; }
.pd-ctl[data-pd-busy] .pd-ctl-i { display: none !important; }
@keyframes pd-ctl-spin { to { transform: rotate(360deg); } }

/* Volume: altoparlante o muto */
.pd-ctl-i-mute { display: none; }
.pd-player[data-pd-muted] .pd-ctl-i-vol { display: none; }
.pd-player[data-pd-muted] .pd-ctl-i-mute { display: inline-block; }
.pd-vol { display: flex; align-items: center; gap: 2px; }
.pd-vol-mobile { display: none; position: relative; }
.pd-vol-pop {
  position: absolute; right: -8px; bottom: calc(100% + 10px); display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: #062f52; border: 1px solid rgba(255, 255, 255, .25); border-radius: 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.pd-vol-pop .pd-range-vol { width: 140px; }

.pd-bar-select, .pd-fs-select {
  height: 32px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 2px;
  background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
}
.pd-bar-select:hover, .pd-fs-select:hover { border-color: #fff; }
.pd-bar-select option, .pd-fs-select option { color: #1a1a1a; background: #fff; }
.pd-bar-select:disabled, .pd-fs-select:disabled { opacity: .45; cursor: default; }

/* ---------- Linea del tempo ---------- */
.pd-time { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 720px; }
.pd-time-cur, .pd-time-dur { flex: none; min-width: 40px; font-size: .8125rem; color: #c9dcee; font-variant-numeric: tabular-nums; }
.pd-time-cur { text-align: left; }
.pd-time-dur { text-align: right; }

/* Barra dei minuti ben visibile: area cliccabile di 24px, traccia di 6px (8px con hover o focus), riempimento bianco
   fino al centro del cursore (--f = frazione 0..1), cursore bianco con anello azzurro.
   Stessa resa in Chrome/Safari (-webkit-) e Firefox (-moz-) */
.pd-range {
  --pd-th: 6px;
  flex: 1 1 auto; width: 100%; min-width: 60px; height: 24px; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 999px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.pd-range:hover, .pd-range:focus-visible { --pd-th: 8px; }
.pd-range::-webkit-slider-runnable-track {
  height: var(--pd-th); border-radius: 999px;
  background: linear-gradient(90deg, #fff calc(9px + (100% - 18px) * var(--f, 0)), rgba(255, 255, 255, .3) 0);
}
.pd-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 18px; height: 18px; margin-top: calc((var(--pd-th) - 18px) / 2); border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px #6fb1ee, 0 1px 5px rgba(0, 0, 0, .45);
}
.pd-range::-moz-range-track { height: var(--pd-th); border: 0; border-radius: 999px; background: rgba(255, 255, 255, .3); }
.pd-range::-moz-range-progress { height: var(--pd-th); border-radius: 999px; background: #fff; }
.pd-range::-moz-range-thumb {
  box-sizing: border-box; width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px #6fb1ee, 0 1px 5px rgba(0, 0, 0, .45);
}
.pd-range:disabled { cursor: default; opacity: .6; }
.pd-player .pd-range:focus-visible { outline: 3px solid #f2be3a; outline-offset: 3px; border-radius: 6px; }

/* Volume: stessa resa, più piccolo */
.pd-range-vol { --pd-th: 4px; flex: none; width: 80px; min-width: 0; }
.pd-range-vol:hover, .pd-range-vol:focus-visible { --pd-th: 6px; }
.pd-range-vol::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #fff calc(7px + (100% - 14px) * var(--f, 0)), rgba(255, 255, 255, .3) 0);
}
.pd-range-vol::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: calc((var(--pd-th) - 14px) / 2); box-shadow: 0 0 0 2px #6fb1ee; }
.pd-range-vol::-moz-range-thumb { width: 14px; height: 14px; box-shadow: 0 0 0 2px #6fb1ee; }

/* Tra 761 e 1100 px: volume, velocità e dimensione dei sottotitoli restano solo a tutto schermo */
@media (min-width: 761px) and (max-width: 1100px) {
  .pd-bar-wide { display: none !important; }
}

/* ---------- Telefono: la riga dei comandi è larga quanto la barra dei minuti ----------
   riga 1: copertina, titolo, CC, volume, tutto schermo, chiudi; riga 2: linea del tempo; riga 3: pulsanti da bordo a bordo */
@media (max-width: 760px) {
  .pd-bar {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 6px; min-height: 0;
    padding: 8px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .pd-bar-now { grid-column: 1; grid-row: 1; gap: 10px; }
  .pd-bar-extra { grid-column: 2; grid-row: 1; gap: 0; }
  .pd-bar-controls { grid-column: 1 / -1; grid-row: 2; align-items: stretch; gap: 0; }
  .pd-bar-controls > .pd-time, .pd-bar-buttons { max-width: none; }
  .pd-bar-cover { width: 44px; border-radius: 6px; }
  .pd-ctl, .pd-ctl-sm { width: 44px; height: 44px; }
  .pd-ctl-main { width: 48px; height: 48px; }
  .pd-bar-wide, .pd-vol { display: none !important; }
  .pd-vol-mobile { display: block; }
  /* Con un'etichetta (In diretta, Sigla) il nome del canale va sulla riga sotto */
  .pd-bar-sub[data-pd-tagged] { white-space: normal; }
  .pd-bar-sub[data-pd-tagged] .pd-bar-channel { display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-cap { padding: 0 12px 8px; }
  .pd-cap span { font-size: 1.05rem; }
  .pd-cap[data-size="s"] span { font-size: .9rem; }
  .pd-cap[data-size="l"] span { font-size: 1.3rem; }
}

/* ---------- Tutto schermo ---------- */
.pd-fs {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; overflow: hidden;
  background: #041f37; color: #fff;
}
.pd-fs::backdrop { background: #041f37; }
.pd-fs-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; transform: scale(1.1); }
.pd-fs-bg[data-image] { filter: blur(40px) brightness(.45); }
.pd-fs-top, .pd-fs-spacer, .pd-fs-main, .pd-fs-cap, .pd-fs-bottom { position: relative; }
.pd-fs-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; }
.pd-fs-channel { margin: 0; min-width: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #e4ecf4; }
.pd-fs-channel .pd-bar-live { margin-right: 10px; font-size: .72rem; padding: 2px 8px; letter-spacing: .06em; }
.pd-fs-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.pd-fs-spacer { flex: 1 1 0; min-height: 0; }
.pd-fs-main { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 24px; }
/* La copertina si riduce sugli schermi bassi: titolo, sottotitoli e comandi restano sempre visibili (~400px) */
.pd-fs-cover {
  width: max(120px, min(52vh, 80vw, 520px, calc(100vh - 400px)));
  width: max(120px, min(52dvh, 80vw, 520px, calc(100dvh - 400px)));
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
/* Sottotitoli attivi (data-pd-cc-on, scritto da podcast.js): la copertina lascia altri 6em ai sottotitoli, che prendono
   quasi tutto lo spazio libero. Legato al pulsante CC e non alla frase in corso, così la copertina non salta tra una frase e l'altra */
.pd-fs[data-pd-cc-on] .pd-fs-cover {
  width: max(96px, min(52vh, 80vw, 520px, calc(100vh - 400px - 6em)));
  width: max(96px, min(52dvh, 80vw, 520px, calc(100dvh - 400px - 6em)));
}
.pd-fs[data-pd-cc-on] .pd-fs-spacer { flex-grow: .25; }
.pd-fs-text { max-width: 820px; text-align: center; }
.pd-fs-text .pd-bar-jingle { font-size: .75rem; padding: 1px 8px; margin: 0; }
.pd-fs-title { margin: 6px 0 0; color: #fff; font-family: inherit; font-size: clamp(1.2rem, 2.4vw, 1.9rem); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
/* I sottotitoli restano nel loro spazio: mai sopra il titolo o la barra dei minuti (se proprio non ci stanno si taglia
   la fine, non l'inizio) */
.pd-fs-cap {
  flex: 1 1 0; min-height: 5.5em; display: flex; align-items: center; align-items: safe center; justify-content: center;
  padding: 12px 24px; overflow: hidden; text-align: center; pointer-events: none;
}
.pd-fs-cap span {
  display: inline-block; max-width: 900px; padding: 8px 16px; border-radius: 8px; background: rgba(4, 31, 55, .78); color: #fff;
  font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.35; white-space: normal;
}
.pd-fs-cap[data-size="s"] span { font-size: clamp(.95rem, 1.5vw, 1.2rem); }
.pd-fs-cap[data-size="l"] span { font-size: clamp(1.4rem, 2.8vw, 2.2rem); }
.pd-fs-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 24px calc(32px + env(safe-area-inset-bottom, 0px)); }
.pd-fs-time { max-width: 760px; gap: 12px; }
.pd-fs-time .pd-time-cur, .pd-fs-time .pd-time-dur { min-width: 44px; font-size: .85rem; color: #d3dde8; }
/* la riga dei pulsanti è larga quanto la linea del tempo, pulsanti da bordo a bordo */
.pd-fs-buttons { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 760px; }
.pd-fs-icon { width: 48px; height: 48px; color: #e4ecf4; }
.pd-fs-icon .pd-ctl-i { width: 26px; height: 26px; }
.pd-fs-icon.pd-ctl-skip .pd-ctl-i { width: 32px; height: 32px; }
.pd-fs-play { width: 64px; height: 64px; background: #fff; color: #062f52; }
.pd-fs-play:hover:not(:disabled) { background: #fff; color: #062f52; transform: scale(1.05); }
.pd-fs-play .pd-ctl-i { width: 30px; height: 30px; }
.pd-fs-play .pd-ctl-spin { width: 24px; height: 24px; }
@media (max-width: 600px) {
  .pd-fs-top { padding: 12px 16px; }
  .pd-fs-main, .pd-fs-cap { padding-left: 16px; padding-right: 16px; }
  .pd-fs-bottom { padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .pd-fs-cover { width: max(120px, min(42vh, 80vw, calc(100vh - 380px))); width: max(120px, min(42dvh, 80vw, calc(100dvh - 380px))); }
  .pd-fs[data-pd-cc-on] .pd-fs-cover {
    width: max(96px, min(42vh, 80vw, calc(100vh - 380px - 6em)));
    width: max(96px, min(42dvh, 80vw, calc(100dvh - 380px - 6em)));
  }
  .pd-fs-icon { width: 44px; height: 44px; }
  .pd-fs-icon .pd-ctl-i { width: 24px; height: 24px; }
  .pd-fs-icon.pd-ctl-skip .pd-ctl-i { width: 28px; height: 28px; }
  .pd-fs-play { width: 56px; height: 56px; }
}
/* Telefoni stretti (320px): sei pulsanti da 40 e il play da 48 stanno nella riga senza tagliare l'ultimo */
@media (max-width: 359px) {
  .pd-fs-bottom { padding-left: 12px; padding-right: 12px; }
  .pd-fs-icon { width: 40px; height: 40px; }
  .pd-fs-play { width: 48px; height: 48px; }
}
/* Schermi bassi (telefono in orizzontale): niente copertina e titolo su una riga, così titolo, sottotitoli e barra
   dei minuti restano separati */
@media (max-height: 480px) {
  .pd-fs-top { padding-top: 8px; padding-bottom: 8px; }
  .pd-fs-cover { display: none; }
  .pd-fs-main { gap: 0; }
  .pd-fs-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
  .pd-fs-bottom { gap: 6px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* Contrasto elevato di Windows (forced colors): la sfumatura della traccia e il cursore bianco con ombra sparirebbero.
   Colori di sistema; regole -webkit- e -moz- separate (un selettore sconosciuto annullerebbe tutta la regola) */
@media (forced-colors: active) {
  .pd-range { forced-color-adjust: none; }
  .pd-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, Highlight calc(9px + (100% - 18px) * var(--f, 0)), GrayText 0); }
  .pd-range-vol::-webkit-slider-runnable-track { background: linear-gradient(90deg, Highlight calc(7px + (100% - 14px) * var(--f, 0)), GrayText 0); }
  .pd-range::-webkit-slider-thumb { background: ButtonText; box-shadow: none; border: 2px solid Canvas; }
  .pd-range::-moz-range-track { background: GrayText; }
  .pd-range::-moz-range-progress { background: Highlight; }
  .pd-range::-moz-range-thumb { background: ButtonText; box-shadow: none; border: 2px solid Canvas; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-bar-dot, .pd-ctl-spin { animation: none; }
  .pd-ctl-main:hover:not(:disabled), .pd-fs-play:hover:not(:disabled) { transform: none; }
}

@media print {
  .pd-player { display: none !important; }
  body.pd-has-player { padding-bottom: 0; }
}