/* The Golden Derby tape — the strip across the very top of the page.
   Read from foxbusiness.com 2026-10-05: dark ground, symbol in caps, value, then an arrow with the
   point change and the percent, green up / red down. Brand palette, not Fox's blue. */
/* THE TAPE TRAVELS WITH THE HEADER. KB, 2026-10-05: "i want the ticker at the top to scroll with
   the header too... as soon as you scroll you loose the ticker." The site nav is already
   position:sticky;top:0;z-index:20 in css/style.css, so the tape scrolled away underneath it and
   the one thing he wanted permanently on screen was the first thing gone.
   The nav rule is GLOBAL — every page uses it — so the offset is scoped with a sibling selector
   instead of being edited there. A page with no tape keeps its nav flush at the top, which is
   right; only a page that HAS the tape pushes the nav below it. */
.dt { position: sticky; top: 0; z-index: 21;          /* above the nav's 20, so the tape wins */
      background: #0B0B0C; border-bottom: 1px solid rgba(201,162,39,.30);
      font-variant-numeric: tabular-nums; overflow: hidden; }
.dt ~ nav { top: 34px; }                               /* exactly .dt-rail's height */
.dt-rail { display: flex; align-items: stretch; height: 34px; }

/* the fixed label on the left, the way a network brands its own tape */
.dt-badge { flex: 0 0 auto; display: flex; align-items: center; padding: 0 14px;
            background: #C9A227; color: #0B0B0C; font-size: 10.5px; font-weight: 800;
            letter-spacing: .14em; white-space: nowrap; }

.dt-tape { flex: 1 1 auto; position: relative; overflow: hidden; }
.dt-run { display: inline-flex; align-items: center; height: 100%; white-space: nowrap;
          will-change: transform; animation: dt-scroll 70s linear infinite; }
.dt-tape:hover .dt-run { animation-play-state: paused; }   /* let someone actually read a line */
@keyframes dt-scroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

.dt-item { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 20px;
           border-right: 1px solid rgba(244,241,234,.09); }
.dt-sym { font-size: 11.5px; letter-spacing: .1em; color: rgba(244,241,234,.72); font-weight: 700; }
/* BOTH numbers coloured — the season leads at full size, the week sits beside it smaller.
   The index value itself came off the tape: with everything starting at 100.00 it said the same
   thing as the season percentage, in a second format, and took the width that labelling needed. */
.dt-idx { font-size: 15px; font-weight: 800; color: #F4F1EA; }   /* the score — where it stands */
.dt-tot, .dt-wk { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 700; }
.dt-tot { font-size: 14px; }
.dt-wk  { font-size: 12px; opacity: .9; }
.dt-lbl { font-size: 9px; font-style: normal; letter-spacing: .06em; opacity: .5;
          font-weight: 600; text-transform: lowercase; }
.up { color: #3FD07E; } .dn { color: #FF5A47; } .fl { color: rgba(244,241,234,.55); }
.dt-machine .dt-sym { color: #E8C04A; }

.dt-asof { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 14px;
           font-size: 10.5px; letter-spacing: .06em; color: rgba(244,241,234,.5);
           border-left: 1px solid rgba(244,241,234,.12); white-space: nowrap; }
.dt-stale { color: #E0A200; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .dt-run { animation: none; } }
@media (max-width: 760px) { .dt-asof { display: none; } .dt-badge { padding: 0 10px; font-size: 9.5px; } }