/* FP3 · HOME POLISH · v11.21 · 10/09/2026
   Solo rifiniture visive, additive. Nessun blocco spostato, nessun dato toccato.
   Il primo blocco (#fp3mux-top) resta com'è.
   1 · colonna unica: i blocchi da 640px si allineano alla colonna da 760px
   2 · spina dorsale: filo dorato dietro la colonna (desktop) → i blocchi appaiono cuciti
   3 · superfici: hover/focus uniforme su tutte le card della home
   4 · Sport Desk: dissolvenze sui bordi delle strisce, KPI più leggibili, pulsante di stato animato
   5 · piede: pulsanti coerenti con il resto */

/* ---------- 1 · colonna unica ---------- */
@media (min-width: 720px) {
  html body > #fp3radio-card,
  html body > .fp3-paper-card,
  html body > #fp3MonthlyWide,
  html body main.stage .stage-inner > [style*="width:min(640px"],
  html body main.stage .stage-inner > [style*="width: min(640px"],
  html body main.stage .stage-inner > .fp3cop-w,
  html body main.stage .stage-inner > .nxtk {
    width: min(760px, calc(100vw - 16px)) !important;
    max-width: min(760px, calc(100vw - 16px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------- 2 · spina dorsale ---------- */
@media (min-width: 960px) {
  html body::before {
    content: "";
    position: fixed;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: repeating-linear-gradient(180deg, rgba(197,162,88,.16) 0 6px, transparent 6px 14px);
    pointer-events: none;
    z-index: -1;
  }
}

/* ---------- 3 · superfici coerenti ---------- */
html body > section:not(#fp3mux-top):not(#fp3sr):not(#fp3fab),
html body > .fp3-paper-card,
html body > #fp3MonthlyWide,
html body main.stage .stage-inner > section,
html body main.stage .stage-inner > a[href$=".html"],
html body #fp3spd .kpi a,
html body #fp3spd .doors a,
html body #fp3spd .ld,
html body #fp3spd .sc {
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease, background-color .28s ease;
}
html body > section:not(#fp3mux-top):not(#fp3sr):not(#fp3fab):hover,
html body > #fp3MonthlyWide:hover,
html body main.stage .stage-inner > section:hover,
html body main.stage .stage-inner > a[href$=".html"]:hover {
  box-shadow: 0 0 0 1px rgba(197,162,88,.28), 0 18px 48px -26px rgba(197,162,88,.45);
}
html body > .fp3-paper-card:hover {
  box-shadow: 0 0 0 1px rgba(197,162,88,.45), 0 22px 60px -28px rgba(0,0,0,.9);
}
html body main.stage .stage-inner > a[href$=".html"]:focus-visible,
html body > section:focus-within {
  box-shadow: 0 0 0 1px rgba(197,162,88,.55);
}

/* etichette di sezione: stesso respiro sopra ogni blocco */
html body > section:not(#fp3mux-top):not(#fp3sr):not(#fp3fab) + section,
html body > #fp3MonthlyWide + #fp3spd {
  margin-top: 18px !important;
}

/* ---------- 4 · Sport Desk ---------- */
html body #fp3spd {
  border-color: rgba(108,194,138,.34) !important;
  box-shadow: inset 0 1px 0 rgba(108,194,138,.12), 0 0 0 1px rgba(0,0,0,.6);
  border-radius: 0 0 2px 2px;
}
html body #fp3spd:hover { box-shadow: inset 0 1px 0 rgba(108,194,138,.2), 0 0 0 1px rgba(108,194,138,.22), 0 20px 50px -30px rgba(108,194,138,.35); }

/* pallino di stato: respira quando il desk è vivo */
@keyframes fp3spdBreath { 0%,100% { box-shadow: 0 0 6px var(--sc, #6cc28a); opacity: 1 } 50% { box-shadow: 0 0 14px var(--sc, #6cc28a); opacity: .55 } }
html body #fp3spd .hd > i { animation: fp3spdBreath 2.6s ease-in-out infinite; }
html body #fp3spd .st { border-radius: 999px; padding: 3px 8px; letter-spacing: .14em; }

/* striscia cifre: dissolvenza ai bordi, niente taglio netto */
html body #fp3spd .tk {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
html body #fp3spd .tk button { padding: 9px 16px; font-size: 9.5px; }
html body #fp3spd .tk button b { font-weight: 600; }

/* vetrina dossier: barra dorata a sinistra, come le altre card della home */
html body #fp3spd .sc {
  border-left: 3px solid #C5A258 !important;
  background: linear-gradient(135deg, rgba(230,201,122,.07), rgba(230,201,122,.02) 60%) !important;
}
html body #fp3spd .sc .pb { height: 3px; box-shadow: 0 0 8px rgba(197,162,88,.55); }
html body #fp3spd .dz .t { font-size: 16px; letter-spacing: -.005em; }

/* KPI: numeri più presenti, etichette leggibili, hover */
html body #fp3spd .kpi { gap: 8px; margin: 14px 0 6px; }
html body #fp3spd .kpi a { padding: 12px 13px 11px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
html body #fp3spd .kpi a > span { font-size: 8px; color: #9d998d; }
html body #fp3spd .kpi b { font-size: 23px; }
html body #fp3spd .kpi a:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.22); box-shadow: 0 10px 26px -18px rgba(0,0,0,.9); }

/* tabella in scorrimento: dissolvenza anche in alto, così la prima riga tagliata non sembra un errore */
html body #fp3spd .wl .vp::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 1;
  background: linear-gradient(180deg, #0b0b0d, rgba(11,11,13,0)); pointer-events: none;
}
html body #fp3spd .wl .vp::after { height: 44px; }
html body #fp3spd .wl .r { font-size: 9.5px; }
html body #fp3spd .wl .r:hover { background: rgba(255,255,255,.03); }

/* porte di sezione: hover pieno */
html body #fp3spd .doors { gap: 8px; }
html body #fp3spd .doors a { padding: 10px 6px; letter-spacing: .14em; }
html body #fp3spd .doors a:hover { background: rgba(108,194,138,.12); color: #f0ebe0; border-color: rgba(108,194,138,.7); }

/* piede: nota fonti e CTA */
html body #fp3spd .fn { font-size: 8.5px; }
html body #fp3spd .cta { border-radius: 2px; transition: filter .2s, transform .2s; }
html body #fp3spd .cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  html body #fp3spd .hd > i { animation: none; }
  html body *, html body *::before, html body *::after { transition-duration: 0s !important; }
}

/* ---------- 5 · piede della home ---------- */
html body nav[aria-label*="quick navigation"] a,
html body nav[aria-label*="quick navigation"] button {
  transition: background-color .2s, color .2s, border-color .2s;
}
html body nav[aria-label*="quick navigation"] a:hover,
html body nav[aria-label*="quick navigation"] button:hover {
  background: rgba(197,162,88,.10);
  border-color: rgba(197,162,88,.7);
}