/* stats-box.css
   Shared "site-wide persistent stats box" — Win / Win in top 4 / Tri / F4,
   used identically by races.html, meeting.html and race.html. One
   implementation, not three separately-maintained copies -- Andrew, 2026-07-12.
   Odds refresh ring (Authenticator-style) — Andrew, 2026-07-14.
*/
.stats-box{
  padding:.55rem .85rem .55rem 1rem;
  font-size:.76rem; min-width:320px;
  margin-top:45px; /* 48px minus a further 3px, per Andrew's feedback */
}
.stats-box-inner{
  display:flex; align-items:center; gap:.75rem;
}
.stats-box-main{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:.3rem;
}
/* Whole box is the entry point to statistics.html (races/meeting/race) */
.stats-box.stats-box-link{
  cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}
.stats-box.stats-box-link:hover{
  box-shadow:0 4px 18px rgba(11,26,43,.14);
  transform:translateY(-1px);
}
.stats-box.stats-box-link:focus-visible{
  outline:2px solid var(--green, #48dc64);
  outline-offset:3px;
}
.stats-box .row{ display:flex; align-items:baseline; gap:.5rem; }
.stats-box .row-label{
  width:28px; flex-shrink:0; font-weight:700; text-transform:uppercase;
  font-size:.68rem; letter-spacing:.04em; opacity:.75;
}
.stats-box .row-label.small{ width:auto; font-size:.64rem; margin-left:.6rem; }
.stats-box .win-num{ font-variant-numeric:tabular-nums; font-weight:700; font-size:.95rem; }
.stats-box .win-top4-num{ font-variant-numeric:tabular-nums; font-weight:700; font-size:.85rem; opacity:.85; }
.stats-box .tier{ font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:.2rem; }
.stats-box .tier .v{ font-weight:700; font-size:1rem; }
.stats-box .tier.GREEN .v{ color:var(--green); }
.stats-box .tier.AMBER .v{ color:#a97a00; }
.stats-box .tier.RED .v{ color:var(--red); }
.stats-box .stat-meta{ font-size:.66rem; opacity:.55; font-style:italic; margin-top:.1rem; }

/* Session strategy: one compact horizontal line — "Strategy" then colour ball */
.stats-box .stats-strategy-row{
  margin:0; padding:0; min-height:0;
  flex-direction:row;
  align-items:center;
  flex-wrap:nowrap;
}
.stats-box .stats-strategy-btn{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:0.4rem !important;
  margin:0; padding:0.05rem 0;
  border:none; background:transparent;
  font:inherit; color:inherit; cursor:pointer;
  max-width:100%; line-height:1.15;
  border-radius:4px;
  height:auto; min-height:0;
}
.stats-box .stats-strategy-btn:hover{
  opacity:1;
}
.stats-box .stats-strategy-btn:focus-visible{
  outline:2px solid var(--green, #48dc64);
  outline-offset:2px;
}
/* Override .row-label width:28px which forced "Strategy" to wrap vertically */
.stats-box .stats-strategy-btn .row-label{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  line-height:1.15 !important;
}
.stats-box .stats-strategy-dot{
  display:inline-block !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  flex:0 0 auto !important;
  box-shadow:0 0 0 1.5px rgba(11,26,43,.18);
  background:rgba(11,26,43,.25);
  vertical-align:middle;
}
.stats-box .stats-strategy-dot[hidden]{ display:none !important; }
/* Two dots when both TRI + F4 strategies are on */
.stats-box .stats-strategy-btn .stats-strategy-dot + .stats-strategy-dot{
  margin-left:0.05rem;
}
.stats-box .stats-strategy-short[hidden]{ display:none !important; }
/* Golden Strategy: independent element beside the colour dots (Andrew,
   2026-08-06: folding it into the dot's own slot made the whole row hide
   itself whenever Golden was the only active thing -- back to standalone,
   visibility tied only to isGoldenTrifectaActive(), nothing else). */
.stats-box .stats-golden-star{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  margin:0 0 0 0.35rem; padding:0; border:none; background:transparent;
  font-size:.95rem; line-height:1; color:#d9b44a; cursor:pointer;
  flex:0 0 auto;
}
.stats-box .stats-golden-star:hover{ color:#f0d878; }
.stats-box .stats-golden-star:focus-visible{
  outline:2px solid #d9b44a; outline-offset:2px; border-radius:3px;
}
.stats-box .stats-golden-star[hidden]{ display:none !important; }

/* ── Live odds refresh countdown (Authenticator-style ring) ── */
.odds-refresh{
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.12rem;
  min-width:2.6rem;
  user-select:none;
  pointer-events:none; /* clicks still go to stats link on parent */
}
.odds-refresh-ring-wrap{
  width:2.35rem; height:2.35rem; position:relative;
}
.odds-refresh-svg{
  width:100%; height:100%; display:block;
  transform:rotate(-90deg); /* start arc at 12 o'clock */
}
.odds-refresh-track{
  fill:none;
  stroke:rgba(11,26,43,.1);
  stroke-width:3.2;
}
.odds-refresh-prog{
  fill:none;
  stroke:#5eb8e8; /* light blue */
  stroke-width:3.2;
  stroke-linecap:round;
  transition:stroke-dashoffset .9s linear, stroke .2s ease;
}
.odds-refresh.urgent .odds-refresh-prog{
  stroke:#3aa0d8;
}
.odds-refresh.due .odds-refresh-prog{
  stroke:#8ec8e8;
  opacity:.55;
}
.odds-refresh.closed .odds-refresh-prog{
  stroke:rgba(11,26,43,.2);
}
.odds-refresh-time{
  font-size:.62rem; font-weight:800; font-variant-numeric:tabular-nums;
  color:#2a7aa8; letter-spacing:.02em; line-height:1;
}
.odds-refresh.urgent .odds-refresh-time{ color:#1a6a96; }
.odds-refresh.closed .odds-refresh-time,
.odds-refresh.due .odds-refresh-time{ color:rgba(11,26,43,.45); }
.odds-refresh-lab{
  font-size:.52rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:rgba(42,122,168,.75); line-height:1;
}
.odds-refresh.closed .odds-refresh-lab{ color:rgba(11,26,43,.4); }