/* Release 318: "How the odds moved this week" (static/js/odds_week.js). Light home palette; one blue for the chosen book. */
.ow { --ow-ink: #18181b; --ow-text: #52525b; --ow-muted: #a1a1aa; --ow-line: #e4e4e7; --ow-accent: #3030ff; --ow-card: #fff; --ow-pale: #f4f4f5; }
.ow { padding: var(--sx-section, 6rem) 0 0; }
.ow-head { display: grid; gap: .75rem; max-width: 46rem; }
.ow-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ow-accent); margin: 0; }
.ow-head p.ow-lede { margin: 0; color: var(--ow-text); font-size: 1.0625rem; line-height: 1.6; }
.ow-card { margin-top: 2rem; background: var(--ow-card); border: 1px solid var(--ow-line); border-radius: 16px; padding: clamp(1rem, 2.5vw, 1.75rem); box-shadow: 0 1px 2px rgba(24,24,27,.04); }
.ow-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; }
.ow-game h3 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--ow-ink); letter-spacing: -.01em; }
.ow-game p { margin: .25rem 0 0; color: var(--ow-text); font-size: .9375rem; }
.ow-badge { display: inline-block; font-size: .75rem; font-weight: 600; color: var(--ow-text); background: var(--ow-pale); border-radius: 999px; padding: .3rem .7rem; white-space: nowrap; }
.ow-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--ow-pale); border-radius: 10px; padding: 3px; }
.ow-seg button { font: inherit; font-size: .875rem; font-weight: 500; color: var(--ow-ink); background: transparent; border: 0; border-radius: 8px; padding: .45rem .8rem; cursor: pointer; }
.ow-seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(24,24,27,.12); font-weight: 600; }
.ow-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1.25rem; }
.ow-stats > div { border: 1px solid var(--ow-line); border-radius: 12px; padding: .8rem 1rem; display: grid; gap: .15rem; min-width: 0; }
.ow-stats span { font-size: .8125rem; color: var(--ow-text); }
.ow-stats strong { font-size: 1.5rem; font-weight: 700; color: var(--ow-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ow-stats small { font-size: .8125rem; color: var(--ow-text); line-height: 1.4; }
.ow-stats .is-gap { background: #eef2ff; border-color: #e0e7ff; }
.ow-stats .is-gap strong { color: var(--ow-accent); }
.ow-books { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.ow-books::before { content: "Highlight a sportsbook"; flex-basis: 100%; font-size: .8125rem; color: var(--ow-text); }
.ow-books button { font: inherit; font-size: .8125rem; color: var(--ow-ink); background: #fff; border: 1px solid var(--ow-line); border-radius: 999px; padding: .3rem .7rem; cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; }
.ow-books button em { font-style: normal; color: var(--ow-text); font-variant-numeric: tabular-nums; }
.ow-books button[aria-pressed="true"] { border-color: var(--ow-accent); color: var(--ow-accent); background: #eef2ff; }
.ow-books button[aria-pressed="true"] em { color: var(--ow-accent); }
.ow-seg button:focus-visible, .ow-books button:focus-visible { outline: 2px solid var(--ow-accent); outline-offset: 2px; }
.ow-chart { position: relative; margin-top: 1rem; min-height: 300px; }
.ow-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ow-chart .ow-grid { stroke: #0000000f; }
.ow-chart .ow-axis { stroke: #d4d4d8; }
.ow-chart .ow-tick { fill: var(--ow-text); font-size: 11px; font-variant-numeric: tabular-nums; }
.ow-chart .ow-ylab { fill: var(--ow-text); font-size: 11px; font-weight: 600; }
.ow-chart .ow-line { fill: none; stroke: var(--ow-muted); stroke-width: 1.5; stroke-opacity: .85; stroke-linejoin: round; stroke-linecap: round; }
.ow-chart .ow-line.is-on { stroke: var(--ow-accent); stroke-width: 3; stroke-opacity: 1; }
.ow-chart .ow-median { fill: none; stroke: var(--ow-ink); stroke-width: 1.6; stroke-dasharray: 5 4; stroke-opacity: .8; }
.ow-chart .ow-dot { fill: var(--ow-accent); stroke: #fff; stroke-width: 2; }
.ow-chart .ow-end { font-size: 12px; fill: var(--ow-ink); font-variant-numeric: tabular-nums; }
.ow-chart .ow-end.is-on { fill: var(--ow-accent); font-weight: 600; }
.ow-chart .ow-end .ow-end-name { font-weight: 600; }
.ow-chart .ow-cross { stroke: var(--ow-ink); stroke-opacity: .3; }
.ow-tip { position: absolute; z-index: 2; pointer-events: none; min-width: 210px; background: #fff; border: 1px solid var(--ow-line); border-radius: 10px; padding: .6rem .75rem; box-shadow: 0 10px 30px -12px rgba(24,24,27,.3); font-size: .8125rem; display: grid; gap: .2rem; }
.ow-tip b { font-weight: 600; margin-bottom: .2rem; }
.ow-tip span { display: flex; justify-content: space-between; gap: 1rem; color: var(--ow-text); }
.ow-tip span em { font-style: normal; color: var(--ow-ink); font-variant-numeric: tabular-nums; }
.ow-tip span.is-on, .ow-tip span.is-on em { color: var(--ow-accent); font-weight: 600; }
.ow-tip span.is-med { border-top: 1px dashed var(--ow-line); padding-top: .2rem; margin-top: .1rem; }
.ow-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: .5rem 0 0; font-size: .8125rem; color: var(--ow-text); }
.ow-legend > span { display: inline-flex; align-items: center; gap: .45rem; }
.ow-legend .ow-sw { flex: none; }
.ow-legend .ow-sw path { fill: none; stroke-linecap: round; }
.ow-legend .ow-sw .is-on { stroke: var(--ow-accent); stroke-width: 3; }
.ow-legend .ow-sw .is-grey { stroke: var(--ow-muted); stroke-width: 1.5; }
.ow-legend .ow-sw .is-med { stroke: var(--ow-ink); stroke-width: 1.6; stroke-dasharray: 4 3; stroke-linecap: butt; }
.ow-note { margin: .75rem 0 0; font-size: .8125rem; color: var(--ow-text); line-height: 1.5; }
.ow-more { margin-top: .5rem; font-size: .875rem; }
.ow-more summary { cursor: pointer; color: var(--ow-ink); font-weight: 500; }
.ow-table { overflow-x: auto; margin-top: .5rem; }
.ow-table table { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.ow-table th, .ow-table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--ow-line); white-space: nowrap; }
.ow-table thead th { color: var(--ow-text); font-weight: 500; }
.ow-table td small { display: block; color: var(--ow-text); font-size: .75rem; }
.ow-table tr.is-on th, .ow-table tr.is-on td { color: var(--ow-accent); font-weight: 600; }
.ow-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; }
.ow-go { margin-top: 0; padding-top: 1.75rem; }
.ow-indep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.ow-indep > div { display: grid; gap: .3rem; align-content: start; }
.ow-indep strong { font-size: .9375rem; color: var(--ow-ink); }
.ow-indep span { font-size: .875rem; color: var(--ow-text); line-height: 1.5; }
.ow.is-empty .ow-card { display: none; }
.ow .ow-fallback { display: none; margin-top: 1.5rem; color: var(--ow-text); }
.ow.is-empty .ow-fallback, .ow.is-failed .ow-fallback { display: block; }
@media (max-width: 767px) {
  .ow-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .ow-stats > div { padding: .65rem .75rem; }
  .ow-stats .is-gap { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .6rem; }
  .ow-stats .is-gap small { grid-column: 1 / -1; }
  .ow-stats strong { font-size: 1.25rem; }
  .ow-stats small { font-size: .75rem; }
  .ow-indep { grid-template-columns: minmax(0, 1fr); }
}
.ow-tip[hidden] { display: none; }
/* release 318 (owner: "for the phone version maybe we don't need the map on top; bettors should grasp the idea quickly"): on
   phones the dot map is hidden and the odds chart follows the hero buttons directly. */
@media (max-width: 767px) {
  body.sx .intro-hero .hero-map { display: none !important; }
  body.sx .ow { padding-top: 2.25rem; }
  body.sx .ow-head { gap: .5rem; }
  body.sx .ow-card { margin-top: 1.25rem; }
}