/* PALLINI WEATHER V65 — only true LIVE indicators move */

/* All text and banner labels stay still. */
.live-pill,
.nav-status span,
#heroKicker,
.hero-live-strip strong,
.current-measurements-head .eyebrow,
#panel-wind .section-title-row .eyebrow,
.tab[data-tab="now"]{
  animation:none!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}

.live-pill,
.nav-status span,
.hero-live-strip strong{
  color:#78efaa;
  text-shadow:0 0 6px rgba(105,229,166,.25);
}
.tab[data-tab="now"]{text-shadow:none!important}

/* Slightly larger, brighter and faster green live indicator. */
.live-pill i,
.nav-status i,
.tab[data-tab="now"] i,
.hero-live-strip i,
.live-dot-only{
  display:inline-block;
  width:10px!important;
  height:10px!important;
  min-width:10px;
  min-height:10px;
  border-radius:50%;
  background:#69e5a6!important;
  box-shadow:0 0 8px rgba(105,229,166,.75);
  animation:pnwV65DotPulse .78s ease-in-out infinite!important;
}

#heroKicker{display:flex;align-items:center;gap:7px}

/* Only LIVE flashes in the Gerakas station heading. */
.current-measurements-head .live-word-only{
  color:#78efaa;
  font-weight:900;
  animation:pnwV65LiveWord .88s ease-in-out infinite!important;
}

/* Wind-direction LIVE deliberately remains a text pulse. */
.compass-title b{
  color:#78efaa;
  text-shadow:0 0 11px rgba(105,229,166,.54);
  animation:pnwV65LiveWord .88s ease-in-out infinite!important;
}

@keyframes pnwV65DotPulse{
  0%,100%{opacity:.55;transform:scale(.88);box-shadow:0 0 5px rgba(105,229,166,.55)}
  50%{opacity:1;transform:scale(1.22);box-shadow:0 0 0 5px rgba(105,229,166,.10),0 0 15px rgba(105,229,166,.95)}
}
@keyframes pnwV65LiveWord{
  0%,100%{opacity:.64;filter:brightness(.95)}
  50%{opacity:1;filter:brightness(1.24)}
}

/* Back-to-home is now a full menu item, aligned with the weather tabs. */
.nav-tabs .tab-home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 15px;
  margin-left:6px;
  border-left:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  white-space:nowrap;
  color:#c1d5dd;
  font-weight:850;
  font-size:10px;
  letter-spacing:.22px;
}
.nav-tabs .tab-home:hover{color:#effaf5;background:rgba(99,215,255,.07)}
.site-return{display:none!important}

@media(max-width:980px){
  .nav-tabs .tab-home{padding:0 10px;font-size:9px}
}
@media(max-width:700px){
  .nav-tabs .tab-home{
    min-height:34px;
    max-width:132px;
    padding:0 8px;
    white-space:normal;
    line-height:1.05;
    text-align:center;
  }
}
@media(prefers-reduced-motion:reduce){
  .live-pill i,
  .nav-status i,
  .tab[data-tab="now"] i,
  .hero-live-strip i,
  .live-dot-only,
  .current-measurements-head .live-word-only,
  .compass-title b{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* PALLINI WEATHER V64 — UI explanations / LIVE emphasis */

/* Tiny explanatory line below each chart */
.chart-mini-note{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin:6px 3px 0;
  padding-top:5px;
  border-top:1px solid rgba(255,255,255,.045);
  color:#708996;
  font-size:8.5px;
  line-height:1.35;
  font-weight:500;
}

.chart-mini-note img{
  width:11px;
  height:11px;
  flex:0 0 11px;
  object-fit:contain;
  opacity:.48;
  margin-top:1px;
}

.chart-mini-note span{max-width:96%}

/* Clickable measurement cards */
.metric,
.wind-summary-grid article,
.attica-latest:not(.loading){
  cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}

.metric:hover,
.wind-summary-grid article:hover,
.attica-latest:not(.loading):hover{
  border-color:rgba(99,215,255,.18);
  box-shadow:inset 0 0 0 1px rgba(99,215,255,.045);
}

.metric:active,
.wind-summary-grid article:active,
.attica-latest:not(.loading):active{
  transform:translateY(1px);
}

/* Reference station/source emphasis */
.attica-context-note b,
.attica-source-stations b{
  color:#dcebf1;
  font-weight:900;
}

.attica-source-stations{
  margin:5px 0 0!important;
  color:#8da5b0!important;
  font-size:10px!important;
}

/* Keep these tiny notes really tiny on mobile too */
@media(max-width:700px){
  .chart-mini-note{font-size:8px;gap:5px}
  .chart-mini-note img{width:10px;height:10px;flex-basis:10px}
}