/* Horse Racing. Everything here sits inside the kit's dark product screen. Prefix: hr- */

.hr-screen { display: grid; grid-template-columns: 350px minmax(0, 1fr) 288px; grid-template-areas: "card center rail"; gap: 14px; align-items: stretch; }
.hr-card { grid-area: card; display: flex; flex-direction: column; }
#hrRows { flex: 1; display: flex; flex-direction: column; }
#hrRows .hr-row { flex: 1; }
.hr-center { grid-area: center; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hr-rail { grid-area: rail; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hr-card, .hr-track, .hr-tote, .hr-acct, .hr-slip, .hr-tix { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 12px; }
.hr-ph { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 12px 9px; }
.hr-ph-r { font: 600 11px 'IBM Plex Mono', monospace; color: var(--s-dim); white-space: nowrap; }

/* saddle cloths and silks */
.hr-cloth { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 28px; border-radius: 4px; background: var(--bg); color: var(--fg); font: 800 13px Inter, sans-serif; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.hr-cloth.sm { width: 20px; height: 20px; font-size: 11px; }
.hr-silk { width: 26px; height: 24px; display: block; flex: none; }

/* race card */
.hr-cardh, .hr-row { display: grid; grid-template-columns: 24px 26px minmax(0, 1fr) 92px 48px; gap: 8px; align-items: center; }
.hr-cardh { padding: 0 12px 6px; font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--s-faint); }
.hr-cardh span:last-child { text-align: right; }
.hr-row { position: relative; padding: 8px 12px; border-top: 1px solid var(--s-line); cursor: pointer; transition: background .15s; }
.hr-row:hover { background: rgba(255,255,255,.025); }
.hr-row:focus-visible { outline: 2px solid var(--you); outline-offset: -2px; }
.hr-row.on { background: color-mix(in srgb, var(--you) 9%, transparent); box-shadow: inset 3px 0 0 var(--you); }
.hr-row.out { opacity: .45; }
.hr-row.fin .hr-od small { color: var(--you); font-weight: 700; }
.hr-nm { min-width: 0; }
.hr-nm b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.hr-nm small { display: block; font-size: 10.5px; color: var(--s-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
.hr-nm small + small { color: var(--s-faint); }
.hr-stats { display: grid; gap: 3px; }
.hr-st { display: grid; grid-template-columns: 21px 1fr 16px; gap: 4px; align-items: center; font: 600 9px 'IBM Plex Mono', monospace; }
.hr-st i { font-style: normal; color: var(--s-faint); }
.hr-st u { display: block; height: 4px; border-radius: 2px; background: var(--s-line); overflow: hidden; }
.hr-st s { display: block; height: 100%; background: var(--s-dim); border-radius: 2px; }
.hr-st em { font-style: normal; color: var(--s-text); text-align: right; }
.hr-od { text-align: right; }
.hr-od b { display: block; font: 700 17px 'IBM Plex Mono', monospace; color: var(--you); border-radius: 4px; }
.hr-od small { display: block; font: 500 9.5px 'IBM Plex Mono', monospace; color: var(--s-faint); }
.hr-pk { position: absolute; left: 9px; bottom: 5px; font: 700 9px 'IBM Plex Mono', monospace; letter-spacing: .06em; background: var(--you); color: var(--you-ink); padding: 1px 5px; border-radius: 4px; }
.hr-legend { padding: 9px 12px 11px; border-top: 1px solid var(--s-line); font-size: 10.5px; line-height: 1.45; color: var(--s-faint); }

/* odds flashes: green when money comes in and the price shortens, red when it drifts */
.fl-in { animation: hrIn 1.1s ease-out; }
.fl-out { animation: hrOut 1.1s ease-out; }
@keyframes hrIn { 0% { background: color-mix(in srgb, var(--up) 20%, transparent); color: var(--up); } 100% { background: transparent; } }
@keyframes hrOut { 0% { background: color-mix(in srgb, var(--down) 16%, transparent); color: var(--down); } 100% { background: transparent; } }

/* track */
.hr-rh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px 0; }
.hr-rh-l { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hr-rh-l b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.hr-rh-l span { font: 500 11px 'IBM Plex Mono', monospace; color: var(--s-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-chip { flex: none; font: 700 10px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--s-line); color: var(--s-dim); }
.hr-chip.betting { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.hr-chip.loading, .hr-chip.running { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 45%, transparent); }
.hr-chip.review { color: var(--s-text); }
.hr-chip.photo { color: var(--hot); border-color: var(--hot); }
.hr-chip.official { color: var(--you); border-color: color-mix(in srgb, var(--you) 50%, transparent); }
.hr-oval-wrap { padding: 4px 8px 0; }
#hrOval { display: block; width: 100%; height: auto; overflow: visible; }
.hr-surf.dirt { stroke: #3b2e23; }
.hr-surf.turf { stroke: #1c3a26; }
.hr-infield { fill: #0f1417; }
.hr-rail { fill: none; stroke: #e9e6de; stroke-width: 1.6; }
.hr-rail.out { stroke-opacity: .45; stroke-width: 1.1; }
.hr-pole.q { stroke: #e04a4a; stroke-width: 2.4; }
.hr-pole.e { stroke: #3fbf6f; stroke-width: 1.7; }
.hr-polet { font: 600 8.5px 'IBM Plex Mono', monospace; fill: var(--s-faint); text-anchor: middle; }
.hr-polet.fin { fill: var(--s-text); }
.hr-polet.st { fill: var(--s-dim); }
.hr-finish { stroke: #ffffff; stroke-width: 2.6; }
.hr-gate { stroke: #9aa1b2; stroke-width: 5; stroke-opacity: .5; }
.hr-ifs { font: 700 9px Inter, sans-serif; letter-spacing: .22em; text-transform: uppercase; fill: var(--s-dim); text-anchor: middle; }
.hr-ifb { font: 600 42px 'IBM Plex Mono', monospace; fill: var(--s-text); text-anchor: middle; letter-spacing: -.02em; }
.hr-ifb.sm { font-size: 30px; }
.hr-ifb.hot { fill: var(--hot); }
.hr-ifb.gold { fill: var(--you); }
.hr-iff { font: 600 10.5px 'IBM Plex Mono', monospace; fill: var(--s-dim); text-anchor: middle; white-space: pre; }
.hr-chic text { font-family: Inter, sans-serif; font-weight: 800; text-anchor: middle; }
.hr-chic .body { stroke: rgba(0,0,0,.75); stroke-width: 1.2; }
.hr-chic .ring { fill: none; stroke: var(--you); stroke-width: 2; opacity: 0; }
.hr-chic.mine .ring { opacity: 1; }
.hr-order { display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; }
.hr-order-l { flex: none; width: 56px; font: 700 9.5px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--s-faint); }
.hr-order-r { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.hr-oi { display: inline-flex; align-items: center; gap: 5px; }
.hr-oi em { font: 600 10.5px 'IBM Plex Mono', monospace; font-style: normal; color: var(--s-dim); min-width: 30px; }

/* tote board */
.hr-tote .hr-ph { padding-bottom: 6px; }
.hr-toteseg button:disabled { opacity: .4; cursor: default; }
.hr-tscroll { overflow-x: auto; }
.hr-tt { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.hr-tt col.c-l { width: 66px; }
.hr-tt col.c-t { width: 96px; }
.hr-tt th, .hr-tt td { text-align: center; padding: 4px 3px; font: 600 12px 'IBM Plex Mono', monospace; white-space: nowrap; }
.hr-tt thead th { padding: 2px 3px 7px; }
.hr-tt tbody th { text-align: left; padding-left: 12px; font: 700 9.5px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--s-dim); }
.hr-tt tbody tr + tr { border-top: 1px solid rgba(36,40,51,.75); }
.hr-tc { appearance: none; border: 0; width: 26px; height: 26px; border-radius: 5px; background: var(--bg); color: var(--fg); font: 800 13px Inter, sans-serif; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.hr-tc.on { outline: 2px solid var(--you); outline-offset: 2px; }
.hr-tt .r-odds td { font-size: 19px; font-weight: 700; color: var(--you); padding: 7px 3px; border-radius: 6px; }
.hr-tt .r-odds td.fav { box-shadow: inset 0 -2px 0 var(--you); }
.hr-tt .r-ml td { font-size: 10.5px; font-weight: 500; color: var(--s-faint); }
.hr-tt .r-pool td { color: #cfd3dc; }
.hr-tt .t-tot { text-align: right; padding-right: 12px; color: var(--s-text); font-weight: 700; }
.hr-mtp { display: block; font: 700 24px 'IBM Plex Mono', monospace; color: var(--you); line-height: 1; }
.hr-mtp.off { color: var(--hot); font-size: 17px; }
.hr-tt .t-tot small { display: block; font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--s-faint); margin-top: 3px; }
.hr-tt .r-tr td { padding: 5px 7px 8px; }
.hr-spark { display: block; width: 100%; height: 20px; overflow: visible; }
.hr-spark polyline { fill: none; stroke: var(--s-dim); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hr-spark polyline.up { stroke: var(--up); }
.hr-spark polyline.dn { stroke: var(--down); }
.hr-pct { display: block; font: 600 10px 'IBM Plex Mono', monospace; color: var(--s-dim); margin-top: 2px; }
.hr-trl { font: 500 9.5px 'IBM Plex Mono', monospace; color: var(--s-faint); }
.hr-tfoot { border-top: 1px solid var(--s-line); padding: 8px 12px 10px; display: grid; gap: 7px; }
.hr-pools { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 11px; color: var(--s-dim); }
.hr-pools b { font: 600 11.5px 'IBM Plex Mono', monospace; color: var(--s-text); }
.hr-stream { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hr-stream-l { flex: none; font: 700 9.5px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--s-faint); }
#hrStream { display: flex; gap: 6px; overflow: hidden; white-space: nowrap; min-width: 0; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
#hrStream span { font: 600 10.5px 'IBM Plex Mono', monospace; padding: 3px 7px; border: 1px solid var(--s-line); border-radius: 6px; color: var(--s-dim); }
#hrStream span b { color: var(--s-text); }
#hrStream span.big { border-color: color-mix(in srgb, var(--you) 60%, transparent); color: var(--you); }
#hrStream span.big b { color: var(--you); }
#hrStream span:first-child { animation: dkfeed .45s cubic-bezier(.2,.9,.3,1); }

.hr-pt { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.hr-pt th, .hr-pt td { text-align: center; padding: 4px 2px; font: 600 11px 'IBM Plex Mono', monospace; border: 1px solid rgba(36,40,51,.8); color: var(--s-dim); white-space: nowrap; }
.hr-pt thead th, .hr-pt tbody th { border-color: transparent; }
.hr-pt .hr-pt-c { font: 600 9px 'IBM Plex Mono', monospace; color: var(--s-faint); width: 66px; }
.hr-pt td.lo { color: var(--s-text); }
.hr-pt td.x { color: var(--s-faint); }
.hr-pt td.on { background: var(--you); color: var(--you-ink); }
.hr-pt { margin: 0 12px; width: calc(100% - 24px); }
.hr-pnote { font-size: 10.5px; color: var(--s-faint); padding: 8px 12px 11px; }

.hr-rt { width: calc(100% - 24px); margin: 0 12px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hr-rt th { font: 700 9px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--s-faint); text-align: left; padding: 3px 5px 6px; }
.hr-rt td { font: 600 12px 'IBM Plex Mono', monospace; padding: 5px; border-top: 1px solid var(--s-line); white-space: nowrap; color: #cfd3dc; }
.hr-rt .c { text-align: center; }
.hr-rt .r { text-align: right; }
.hr-rt td.hn { display: flex; align-items: center; gap: 7px; }
.hr-rt td.hn span { font: 600 12.5px Inter, sans-serif; color: var(--s-text); overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.hr-rt sup { font-size: 8.5px; color: var(--s-faint); margin-left: 2px; }
.hr-rt tr.itm td.r { color: var(--you); }
.hr-rt tr.itm td:first-child { color: var(--you); }
.hr-rfoot { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 9px 12px 11px; font-size: 11px; color: var(--s-dim); border-top: 1px solid var(--s-line); margin-top: 6px; }
.hr-rfoot b { font: 600 11.5px 'IBM Plex Mono', monospace; color: var(--s-text); white-space: pre; }
.hr-rfoot .dim { color: var(--s-faint); }

/* rail: account, slip, tickets */
.hr-acct { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 10px; padding: 11px 14px 12px; }
.hr-acct .s-label { grid-column: 1 / -1; }
.hr-acct b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.hr-sess { font: 600 11px 'IBM Plex Mono', monospace; color: var(--s-dim); text-align: right; padding-bottom: 4px; }
.hr-slip { padding: 0 12px 12px; }
.hr-slip .hr-ph { padding: 11px 0 9px; }
.hr-types { display: flex; width: 100%; }
.hr-types button { flex: 1; }
.hr-sel { display: grid; gap: 6px; margin: 10px 0; }
.hr-slot { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 10px; border: 1px solid var(--s-line); border-radius: 9px; background: var(--s-panel2); font-size: 13px; font-weight: 600; }
.hr-slot i { flex: none; width: 24px; font: 700 9.5px 'IBM Plex Mono', monospace; font-style: normal; text-transform: uppercase; color: var(--s-faint); }
.hr-slot .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-slot b { font: 700 13px 'IBM Plex Mono', monospace; color: var(--you); }
.hr-slot.empty { border-style: dashed; color: var(--s-faint); font-weight: 500; font-size: 12px; background: transparent; }
.hr-box { display: flex; width: 100%; }
.hr-box button { flex: 1; }
.hr-stakes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.hr-stakes button { appearance: none; border: 1px solid var(--s-line); background: var(--s-panel2); color: var(--s-dim); font: 600 12px 'IBM Plex Mono', monospace; padding: 7px 0; border-radius: 7px; cursor: pointer; }
.hr-stakes button:hover { color: var(--s-text); }
.hr-stakes button.on { border-color: var(--you); color: var(--you); background: color-mix(in srgb, var(--you) 12%, var(--s-panel2)); }
.hr-est { display: grid; gap: 5px; margin: 11px 0; }
.hr-est div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; color: var(--s-dim); }
.hr-est b { font: 700 13px 'IBM Plex Mono', monospace; color: var(--s-text); white-space: nowrap; }
.hr-go { width: 100%; }
.hr-note { margin-top: 9px; font-size: 10.5px; line-height: 1.45; color: var(--s-faint); }
.hr-next { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px 9px 13px; border: 1px solid color-mix(in srgb, var(--you) 55%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--you) 8%, var(--s-panel)); font: 600 12.5px 'IBM Plex Mono', monospace; }
.hr-next[hidden] { display: none; }
.hr-tix { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 12px 6px; }
@media (min-width: 1121px) { .hr-rail { contain: size; } }
.hr-tix .hr-ph { padding: 11px 0 6px; }
.hr-tk { border-top: 1px solid var(--s-line); padding: 8px 0; }
.hr-tk div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.hr-tk div + div { margin-top: 2px; }
.hr-tk div b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-tk div span { font: 600 11.5px 'IBM Plex Mono', monospace; color: var(--s-dim); }
.hr-tk div:last-child { justify-content: flex-end; font: 600 11.5px 'IBM Plex Mono', monospace; }
.hr-tk div:last-child b { font-family: 'IBM Plex Mono', monospace; }
.hr-tk.won { box-shadow: inset 2px 0 0 var(--up); padding-left: 8px; }
.hr-empty { font-size: 11.5px; line-height: 1.45; color: var(--s-faint); padding: 2px 0 8px; }

@media (max-width: 1280px) {
  .hr-screen { grid-template-columns: 322px minmax(0, 1fr) 270px; }
  .hr-cardh, .hr-row { grid-template-columns: 24px 24px minmax(0, 1fr) 82px 46px; gap: 7px; }
}
@media (max-width: 1120px) {
  .hr-screen { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "center center" "card rail"; }
}
@media (max-width: 760px) {
  .hr-screen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "center" "card" "rail"; }
  .hr-tt { min-width: 620px; }
  .hr-pt, .hr-rt { min-width: 600px; }
  .hr-rh { flex-wrap: wrap; }
  .hr-rh-l { flex-wrap: wrap; row-gap: 2px; }
  .hr-rh-l span { white-space: normal; }
}
@media (max-width: 640px) {
  .hr-screen { gap: 10px; }
  .dk-screen.hr-screen { padding: 10px; }
  .hr-cardh, .hr-row { grid-template-columns: 22px 22px minmax(0, 1fr) 76px 44px; gap: 6px; padding-left: 10px; padding-right: 10px; }
  .hr-order { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hr-tote .hr-ph { flex-direction: column; align-items: flex-start; }
  .dk-bar-r .s-btn.sm { padding: 6px 9px; }
}