/* ovmodern.css - shared modern type + tokens, scoped to .ui-modern.
   Loaded on racecards.html and app.html so they match the modern homepage.
   The homepage carries its own inline version. 2026-09-20. */

/* Modern grotesk on the serif headings (brand logo stays serif in each page's own CSS). */
.ui-modern h1.serif,
.ui-modern .day-heading,
.ui-modern .feat .pb h3,
.ui-modern .fr-head b,
.ui-modern .acc-bar .acc-crs,
.ui-modern .rlbanner h2,
.ui-modern .angle-board .ab-name,
.ui-modern .angle-board .ab-overline,
.ui-modern .angle-board .ab-score,
.ui-modern .angle-board .ab-empty-head,
.ui-modern .ie-edge-head h3,
.ui-modern .sat-out-hero .nap-empty-head,
.ui-modern .sat-stat .v,
.ui-modern .sc-results-title .srm-name,
.ui-modern .tr-big,
.ui-modern .tr-phead h4,
.ui-modern .tr-today-sc,
.ui-modern .vh-edge,
.ui-modern .vp-pop-rich .vp-pop-title-horse,
.ui-modern #glanceHome .gl-title,
.ui-modern .d2r-title,
.ui-modern .gl-title,
.ui-modern .bestbet,
.ui-modern .rs-detail,
.ui-modern .rs-call {
  font-family: 'Space Grotesk', 'DM Sans', Arial, sans-serif !important;
  letter-spacing: -0.01em;
}

/* Softer, more tactile panels + a bit of lift on racecards feature blocks. */
.ui-modern .feat,
.ui-modern .rlbanner { border-radius: 14px; }

.ui-modern .race .rtop { transition: background .15s ease; }

/* Tabular figures for odds so numbers align like a modern book. */
.ui-modern .od,
.ui-modern .odds { font-variant-numeric: tabular-nums; }

/* ---- racecards fuller pass (these classes are racecards-only) ---- */
/* meeting accordions become lifted cards */
.ui-modern .acc { border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(18,54,31,.07); transition: box-shadow .16s ease, transform .16s ease; }
.ui-modern .acc:hover { box-shadow: 0 14px 30px rgba(18,54,31,.13); }
/* bet-style odds buttons in the runner table */
.ui-modern .odbtn { display: inline-block; background: linear-gradient(180deg,#ffffff,#eef5ee); border: 1px solid #d3e5d6; border-radius: 8px; padding: 4px 11px; box-shadow: 0 1px 4px rgba(18,54,31,.10); color: #0f3b22; font-weight: 800; font-variant-numeric: tabular-nums; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.ui-modern tr:hover .odbtn { border-color: var(--gold); box-shadow: 0 4px 12px rgba(18,54,31,.16); transform: translateY(-1px); }
/* Race Lab banner: photo sits behind, gradient keeps copy legible (image set by ovmodern.js) */
.ui-modern .rlbanner { background-size: cover; background-position: center 34%; }
/* scroll reveal */
@media (prefers-reduced-motion: no-preference){
  .ui-modern .ovrv { opacity: 0; transform: translateY(15px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
  .ui-modern .ovrv.ovrv-in { opacity: 1; transform: none; }
}

/* ---- Race Lab signature: best-bet rating as a compact ring gauge ---- */
.ui-modern .bestbet .bb-score.ovg {
  margin-left: auto;
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
  background:
    radial-gradient(closest-side, #0f2b1a 72%, transparent 73%),
    conic-gradient(from -90deg, #69BE28, #E3C079 calc(var(--v,60) * 1%), rgba(255,255,255,.16) 0);
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}