/* ═══════════════════════════════════════════════════════════════════
   Fox Signals, design v2
   ───────────────────────────────────────────────────────────────────
   The shell wears the meeting page's design: it loads meeting.css
   first and carries its body class, so the paper, the ink, the gold,
   the masthead and the filter chips are that stylesheet's. This one
   adds what is Fox Signals' own:

     1. the frame and the masthead's two sizes
     2. the room pills, pinned under the navigation
     3. the other rooms: the terminal's markup, on the paper
     4. the Board: tools, list, rows
     5. the Board at laptop, tablet and phone widths
     6. the site's type (Playfair for titles and prices), and the
        Board's tools as a strip of tabs
     7. the other rooms (Race Trace's list, Alerts, a runner, Settings)
        in the Board's language, and as cards on a phone

   The wrapper is .fxv-wrap, not .mf-wrap: that one recolours every
   link inside it, and the v1 rooms that still render here have link
   colours of their own.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Frame and masthead ───────────────────────────────────────── */

/* The Board reads best in a 1280px column, so on these pages the
   site's frame (navigation, tour strip, footer) takes that column,
   as it takes the meeting page's 1520px there. */
body.page-fox-signals {
  --max-w: 1280px;
  --fxv-gutter: 24px;
  --page-gutter: var(--fxv-gutter);
}

.fxv-wrap {
  color-scheme: light;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--fxv-gutter) 56px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mfr-ink);
}

.fxv-wrap :focus-visible {
  outline: 2px solid var(--mfr-gold-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* :where() keeps this under every rule below that spaces a paragraph. */
:where(.fxv-wrap) p { margin: 0; }

/* The Board's masthead is the LLaMa Index's: the meeting page's,
   shorter, with room along its foot for the course (see the evening
   below). */
.fxv-hero.mf-hero {
  --fxv-turf: 14px;
  --fxv-runner: 46px;
  --fxv-lamp: 132px;
  --fxv-sun-x: 50%;
  min-height: 0;
  padding-top: 36px;
  padding-bottom: 58px;
}

/* The rooms that keep their own heading get a band, not a title. */
.fxv-hero--slim.mf-hero {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 16px;
  padding-top: 20px;
  padding-bottom: 40px;
}

.fxv-hero--slim .mf-hero__eyebrow { margin-bottom: 0; }

.fxv-hero__room {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mfr-white);
  text-shadow: 0 2px 22px rgb(7 9 16 / 80%);
}

/* The masthead's picture: an evening at the races, drawn for these
   pages. meeting.css's photograph (a square, made for its 300 to 500px
   masthead) showed only the rider's face in these shorter ones; this is
   drawn to the window's width, so nothing in it is cut and it is not to
   one side. The night sky, with the Fox's signals traced across it in
   gold and faded behind the words; the sun gone down behind the words;
   floodlights at each side; and along the foot, below the figures, the
   field in running past the rail, the site's own horse. The drawings are
   data, so nothing is fetched and the stylesheet still goes back as it
   is. The sky is the band (::before); the course is over it (::after). */
.fxv-hero {
  --fxv-signals: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 220'%3E%3Cdefs%3E%3ClinearGradient id='f'%3E%3Cstop offset='0' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='0.06' stop-color='white' stop-opacity='1'/%3E%3Cstop offset='0.3' stop-color='white' stop-opacity='1'/%3E%3Cstop offset='0.42' stop-color='white' stop-opacity='0.22'/%3E%3Cstop offset='0.58' stop-color='white' stop-opacity='0.22'/%3E%3Cstop offset='0.7' stop-color='white' stop-opacity='1'/%3E%3Cstop offset='0.94' stop-color='white' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='1600' height='220' fill='url%28%23f%29'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url%28%23m%29'%3E%3Cpolyline points='0,112 120,104 190,120 260,92 340,98 420,70 520,84 640,76 760,92 880,80 1000,96 1120,70 1210,78 1290,52 1380,60 1470,38 1600,46' fill='none' stroke='%23E2B84A' stroke-opacity='0.24' stroke-width='1.3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='260' cy='92' r='7' fill='%23F5D76E' fill-opacity='0.2'/%3E%3Ccircle cx='260' cy='92' r='2.2' fill='%23F5D76E' fill-opacity='0.8'/%3E%3Ccircle cx='420' cy='70' r='7' fill='%23F5D76E' fill-opacity='0.2'/%3E%3Ccircle cx='420' cy='70' r='2.2' fill='%23F5D76E' fill-opacity='0.8'/%3E%3Ccircle cx='1290' cy='52' r='7' fill='%23F5D76E' fill-opacity='0.2'/%3E%3Ccircle cx='1290' cy='52' r='2.2' fill='%23F5D76E' fill-opacity='0.8'/%3E%3Ccircle cx='1470' cy='38' r='7' fill='%23F5D76E' fill-opacity='0.2'/%3E%3Ccircle cx='1470' cy='38' r='2.2' fill='%23F5D76E' fill-opacity='0.8'/%3E%3Cpolyline points='0,150 110,158 230,140 330,152 450,128 560,142 700,132 840,146 980,134 1100,150 1230,124 1330,132 1450,112 1600,118' fill='none' stroke='%23E2B84A' stroke-opacity='0.15' stroke-width='1.3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='230' cy='140' r='7' fill='%23F5D76E' fill-opacity='0.1'/%3E%3Ccircle cx='230' cy='140' r='2.2' fill='%23F5D76E' fill-opacity='0.5'/%3E%3Ccircle cx='450' cy='128' r='7' fill='%23F5D76E' fill-opacity='0.1'/%3E%3Ccircle cx='450' cy='128' r='2.2' fill='%23F5D76E' fill-opacity='0.5'/%3E%3Ccircle cx='1230' cy='124' r='7' fill='%23F5D76E' fill-opacity='0.1'/%3E%3Ccircle cx='1230' cy='124' r='2.2' fill='%23F5D76E' fill-opacity='0.5'/%3E%3Ccircle cx='1450' cy='112' r='7' fill='%23F5D76E' fill-opacity='0.1'/%3E%3Ccircle cx='1450' cy='112' r='2.2' fill='%23F5D76E' fill-opacity='0.5'/%3E%3Cpolyline points='0,60 160,48 300,58 470,36 640,46 820,30 990,42 1160,26 1330,36 1500,20 1600,28' fill='none' stroke='%23E2B84A' stroke-opacity='0.09' stroke-width='1.3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='470' cy='36' r='7' fill='%23F5D76E' fill-opacity='0.1'/%3E%3Ccircle cx='470' cy='36' r='2.2' fill='%23F5D76E' fill-opacity='0.3'/%3E%3Ccircle cx='1500' cy='20' r='7' fill='%23F5D76E' fill-opacity='0.1'/%3E%3Ccircle cx='1500' cy='20' r='2.2' fill='%23F5D76E' fill-opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
  --fxv-signals-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 190'%3E%3Cdefs%3E%3ClinearGradient id='f'%3E%3Cstop offset='0' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='white' stop-opacity='0.15'/%3E%3Cstop offset='0.7' stop-color='white' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='1'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='400' height='190' fill='url%28%23f%29'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url%28%23m%29'%3E%3Cpolyline points='0,120 70,112 130,124 190,100 250,104 310,76 360,82 400,60' fill='none' stroke='%23E2B84A' stroke-opacity='0.26' stroke-width='1.3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='250' cy='104' r='7' fill='%23F5D76E' fill-opacity='0.2'/%3E%3Ccircle cx='250' cy='104' r='2.2' fill='%23F5D76E' fill-opacity='0.8'/%3E%3Ccircle cx='360' cy='82' r='7' fill='%23F5D76E' fill-opacity='0.2'/%3E%3Ccircle cx='360' cy='82' r='2.2' fill='%23F5D76E' fill-opacity='0.8'/%3E%3Cpolyline points='0,160 80,152 150,162 220,140 290,146 340,126 380,130 400,118' fill='none' stroke='%23E2B84A' stroke-opacity='0.16' stroke-width='1.3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='290' cy='146' r='7' fill='%23F5D76E' fill-opacity='0.1'/%3E%3Ccircle cx='290' cy='146' r='2.2' fill='%23F5D76E' fill-opacity='0.5'/%3E%3Ccircle cx='380' cy='130' r='7' fill='%23F5D76E' fill-opacity='0.1'/%3E%3Ccircle cx='380' cy='130' r='2.2' fill='%23F5D76E' fill-opacity='0.5'/%3E%3Cpolyline points='0,60 100,50 200,58 280,40 330,46 400,30' fill='none' stroke='%23E2B84A' stroke-opacity='0.1' stroke-width='1.3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='330' cy='46' r='7' fill='%23F5D76E' fill-opacity='0.1'/%3E%3Ccircle cx='330' cy='46' r='2.2' fill='%23F5D76E' fill-opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
  --fxv-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 64'%3E %3Cdefs%3E%3Csymbol id='h' viewBox='0 0 183 145'%3E%3Cpath fill-rule='evenodd' d='M22 141c0-1-2-2-3-3-1-2-2-4-3-5-2 0-2-1-2-2 0-1 2-6 3-7 1 0 2-2 2-3 2-6 6-10 9-12 4-2 7-5 8-9 2-4 2-3-2-12-2-5-3-10-2-17 0-3 0-4-1-5 0-1-2-1-3 0 0 1-2 2-3 3-2 3-5 6-6 9 0 0-1 2-3 4-2 2-3 3-6 3-5 2-5 2-6 1-2-2-2-3 1-6 1-2 2-4 3-5 1-3 5-8 7-9 2-1 10-3 16-4 6-1 8-1 12-3 1-1 2-2 3-2 0 0 3-1 5-2 5-1 5-1 14-1 11 0 12 0 11-5-1-3 1-4 3-4 5 0 5-2 1-4-2-1-3-2-3-2 0 0-2-1-3-2-4-1-7-4-8-7-1-2-1-2 1-5 1-3 4-7 6-8 1-1 3-2 3-2 1-1 3-2 4-2 2-1 4-2 5-2 3-2 15-2 19-1 2 1 3 1 3-2 2-4 8-6 13-3 3 3 5 9 2 11-1 1-2 2-3 3-1 2-1 2-7 2-3 0-4 1-5 2-1 0-3 1-3 1-1 0-1 0-1 2 0 1 0 2 3 4 1 2 3 3 3 3 1 0 2 1 3 1 2 2 4 2 5 0 1-1 6-5 8-6 1 0 2 0 3 0 2 0 4-1 6-1 2-1 3-1 7-1 5 0 7-1 9-3 4-3 8-2 10 3 0 2 1 4 4 6 5 5 5 6 5 9-1 2 0 3 1 4 1 1 2 3 3 5 1 1 3 3 4 4 4 4 3 9-1 11-3 1-6 1-8-1-1-1-3-3-4-3-1-1-3-2-4-3-1-1-3-2-5-2-2-1-5-2-6-3-1 0-2-1-3-1-1 0-6 5-6 7 0 0-1 2-2 3-2 4-2 5 0 9 1 4 1 6-1 11-2 3-2 5-2 5 0 1 5 6 6 6 1 0 2 1 3 1 1 1 2 2 3 3 2 1 4 3 4 5 1 1 2 3 2 4 1 1 3 3 4 5l2 4-1 1c-1 1-2 2-2 3-1 1-2 3-3 4 0 1-2 3-2 4-1 1-5 3-8 3-1 0-3-2-3-3 0-1 2-3 5-5 3-2 6-6 6-7 0-1-1-3-1-4-1-1-2-3-3-4 0-1-1-2-2-3-1 0-2-1-2-1 0-1-4-2-13-2l-9 0-2 2c-1 1-3 4-3 5-1 3-4 5-8 10-7 7-8 8-8 11 0 3-1 6-2 6-2 1-7-3-7-5 0-4 6-11 10-14 1 0 2-1 2-1 0 0 1-2 2-2 2-3 3-5 3-10 0-8-1-9-15-9-11 0-18-1-21-3-3-1-4 0-5 3-1 3-3 7-5 10-2 2-3 4-3 8 0 4 0 3 5 9 1 1 3 4 5 6 2 1 4 3 5 4 1 1 4 3 5 5 4 3 5 3 3 5-2 2-6 0-9-3-1-1-2-3-2-3 0 0-1-1-2-1-1-1-3-2-4-4-4-4-6-6-10-11-5-5-6-6-6-10 1-3 0-4-3-4-1 0-2 0-3 2 0 1-1 2-1 2-1 0-2 1-3 2-1 0-3 2-4 2-6 3-13 12-13 16 0 2 1 3 4 7 1 1 3 3 3 3 0 2-4 3-7 2zM94 52c1-1 1-2 0-2-2 0-4 1-3 2 0 1 1 1 3 0zM99 47c2-2 0-4-2-1-1 0-1 1-1 2 0 1 2 1 3-1zM104 42c3-3 3-4 0-5-2-1-4-2-4-2 0-1-1-2-2-2-1 0-2-1-2-3-1-2-4-4-6-4-3 0-2 3 2 8 2 2 4 4 4 5 2 3 4 5 5 5 0 0 2-1 3-2z'/%3E%3C/symbol%3E%3C/defs%3E %3Cg fill='%23E2B84A' opacity='.42'%3E%3Cuse href='%23h' x='50.9' y='16.1' width='56.8' height='45' transform='rotate(-1 80.4 39.5)'/%3E%3Cuse href='%23h' x='194.9' y='14.1' width='59.3' height='47' transform='rotate(1.5 225.7 38.5)'/%3E%3Cuse href='%23h' x='410.9' y='11.1' width='63.1' height='50' transform='rotate(-1 443.6 37)'/%3E%3C/g%3E %3Cg fill='%2304060B'%3E%3Cuse href='%23h' x='52' y='17' width='56.8' height='45' transform='rotate(-1 80.4 39.5)'/%3E%3Cuse href='%23h' x='196' y='15' width='59.3' height='47' transform='rotate(1.5 225.7 38.5)'/%3E%3Cuse href='%23h' x='412' y='12' width='63.1' height='50' transform='rotate(-1 443.6 37)'/%3E%3C/g%3E %3C/svg%3E");
  --fxv-field-sparse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64'%3E %3Cdefs%3E%3Csymbol id='h' viewBox='0 0 183 145'%3E%3Cpath fill-rule='evenodd' d='M22 141c0-1-2-2-3-3-1-2-2-4-3-5-2 0-2-1-2-2 0-1 2-6 3-7 1 0 2-2 2-3 2-6 6-10 9-12 4-2 7-5 8-9 2-4 2-3-2-12-2-5-3-10-2-17 0-3 0-4-1-5 0-1-2-1-3 0 0 1-2 2-3 3-2 3-5 6-6 9 0 0-1 2-3 4-2 2-3 3-6 3-5 2-5 2-6 1-2-2-2-3 1-6 1-2 2-4 3-5 1-3 5-8 7-9 2-1 10-3 16-4 6-1 8-1 12-3 1-1 2-2 3-2 0 0 3-1 5-2 5-1 5-1 14-1 11 0 12 0 11-5-1-3 1-4 3-4 5 0 5-2 1-4-2-1-3-2-3-2 0 0-2-1-3-2-4-1-7-4-8-7-1-2-1-2 1-5 1-3 4-7 6-8 1-1 3-2 3-2 1-1 3-2 4-2 2-1 4-2 5-2 3-2 15-2 19-1 2 1 3 1 3-2 2-4 8-6 13-3 3 3 5 9 2 11-1 1-2 2-3 3-1 2-1 2-7 2-3 0-4 1-5 2-1 0-3 1-3 1-1 0-1 0-1 2 0 1 0 2 3 4 1 2 3 3 3 3 1 0 2 1 3 1 2 2 4 2 5 0 1-1 6-5 8-6 1 0 2 0 3 0 2 0 4-1 6-1 2-1 3-1 7-1 5 0 7-1 9-3 4-3 8-2 10 3 0 2 1 4 4 6 5 5 5 6 5 9-1 2 0 3 1 4 1 1 2 3 3 5 1 1 3 3 4 4 4 4 3 9-1 11-3 1-6 1-8-1-1-1-3-3-4-3-1-1-3-2-4-3-1-1-3-2-5-2-2-1-5-2-6-3-1 0-2-1-3-1-1 0-6 5-6 7 0 0-1 2-2 3-2 4-2 5 0 9 1 4 1 6-1 11-2 3-2 5-2 5 0 1 5 6 6 6 1 0 2 1 3 1 1 1 2 2 3 3 2 1 4 3 4 5 1 1 2 3 2 4 1 1 3 3 4 5l2 4-1 1c-1 1-2 2-2 3-1 1-2 3-3 4 0 1-2 3-2 4-1 1-5 3-8 3-1 0-3-2-3-3 0-1 2-3 5-5 3-2 6-6 6-7 0-1-1-3-1-4-1-1-2-3-3-4 0-1-1-2-2-3-1 0-2-1-2-1 0-1-4-2-13-2l-9 0-2 2c-1 1-3 4-3 5-1 3-4 5-8 10-7 7-8 8-8 11 0 3-1 6-2 6-2 1-7-3-7-5 0-4 6-11 10-14 1 0 2-1 2-1 0 0 1-2 2-2 2-3 3-5 3-10 0-8-1-9-15-9-11 0-18-1-21-3-3-1-4 0-5 3-1 3-3 7-5 10-2 2-3 4-3 8 0 4 0 3 5 9 1 1 3 4 5 6 2 1 4 3 5 4 1 1 4 3 5 5 4 3 5 3 3 5-2 2-6 0-9-3-1-1-2-3-2-3 0 0-1-1-2-1-1-1-3-2-4-4-4-4-6-6-10-11-5-5-6-6-6-10 1-3 0-4-3-4-1 0-2 0-3 2 0 1-1 2-1 2-1 0-2 1-3 2-1 0-3 2-4 2-6 3-13 12-13 16 0 2 1 3 4 7 1 1 3 3 3 3 0 2-4 3-7 2zM94 52c1-1 1-2 0-2-2 0-4 1-3 2 0 1 1 1 3 0zM99 47c2-2 0-4-2-1-1 0-1 1-1 2 0 1 2 1 3-1zM104 42c3-3 3-4 0-5-2-1-4-2-4-2 0-1-1-2-2-2-1 0-2-1-2-3-1-2-4-4-6-4-3 0-2 3 2 8 2 2 4 4 4 5 2 3 4 5 5 5 0 0 2-1 3-2z'/%3E%3C/symbol%3E%3C/defs%3E %3Cg fill='%23E2B84A' opacity='.42'%3E%3Cuse href='%23h' x='228.9' y='13.1' width='60.6' height='48' transform='rotate(-1 260.3 38)'/%3E%3Cuse href='%23h' x='838.9' y='11.1' width='63.1' height='50' transform='rotate(1 871.6 37)'/%3E%3C/g%3E %3Cg fill='%2304060B'%3E%3Cuse href='%23h' x='230' y='14' width='60.6' height='48' transform='rotate(-1 260.3 38)'/%3E%3Cuse href='%23h' x='840' y='12' width='63.1' height='50' transform='rotate(1 871.6 37)'/%3E%3C/g%3E %3C/svg%3E");
  --fxv-flood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'%3E %3Cdefs%3E %3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23F5D76E' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23F5D76E' stop-opacity='0'/%3E%3C/radialGradient%3E %3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F5D76E' stop-opacity='.13'/%3E%3Cstop offset='1' stop-color='%23F5D76E' stop-opacity='0'/%3E%3C/linearGradient%3E %3C/defs%3E %3Cpath d='M50 18H70L104 200H16Z' fill='url%28%23c%29'/%3E %3Ccircle cx='60' cy='15' r='26' fill='url%28%23g%29'/%3E %3Cpath d='M58.4 26H61.6L63.4 200H56.6Z' fill='%230E121A'/%3E %3Crect x='45' y='8' width='30' height='13' rx='2' fill='%231B1F29'/%3E %3Crect x='47.5' y='10.5' width='5.5' height='4' rx='1' fill='%23FFF3CC'/%3E %3Crect x='54.75' y='10.5' width='5.5' height='4' rx='1' fill='%23FFF3CC'/%3E %3Crect x='62' y='10.5' width='5.5' height='4' rx='1' fill='%23FFF3CC'/%3E %3Crect x='67' y='10.5' width='5.5' height='4' rx='1' fill='%23FFF3CC' opacity='0'/%3E %3C/svg%3E");
  --fxv-trees: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V26C20 20 20 14 40 20C62.5 14 62.5 18 85 24C107.5 18 107.5 11 130 17C152.5 11 152.5 16 175 22C202.5 16 202.5 13 230 19C250 13 250 19 270 25C295 19 295 12 320 18C345 12 345 17 370 23C395 17 395 10 420 16C445 10 445 15 470 21C495 15 495 18 520 24C542.5 18 542.5 12 565 18C590 12 590 16 615 22C637.5 16 637.5 11 660 17C685 11 685 17 710 23C735 17 735 14 760 20C780 14 780 20 800 26V40Z' fill='%230A0E17'/%3E%3C/svg%3E");
}

.fxv-hero.mf-hero::before {
  inset: 0 calc(50% - 50vw);
  background:
    var(--fxv-sky-signals, var(--fxv-signals)) var(--fxv-signals-at, center top 12px) / var(--fxv-signals-size, auto calc(100% - 70px)) no-repeat,
    radial-gradient(46% 66% at var(--fxv-sun-x) calc(100% - var(--fxv-turf) - 4px), rgb(236 160 62 / 28%) 0%, rgb(212 175 55 / 10%) 42%, rgb(212 175 55 / 0%) 76%),
    linear-gradient(180deg, #04060B 0%, #080C16 38%, #0F1625 70%, #1A1E28 100%);
}

/* The course, from the front: the field (a group of three, repeated
   only as often as it fits whole, so no horse is cut at the window's
   edge), the rail and its posts, the turf, the trees along the far side
   and the floodlights (one moved out of the window is one not drawn). */
.fxv-hero.mf-hero::after {
  inset: 0 calc(50% - 50vw);
  border: 0;
  background:
    var(--fxv-runners, var(--fxv-field)) center bottom 3px / auto calc(var(--fxv-runner) * 64 / 51) space no-repeat,
    repeating-linear-gradient(90deg, rgb(233 228 212 / 55%) 0 2px, transparent 2px 96px) left bottom var(--fxv-turf) / 100% 12px no-repeat,
    linear-gradient(rgb(233 228 212 / 70%), rgb(233 228 212 / 70%)) left bottom calc(var(--fxv-turf) + 12px) / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / 3%) 0 70px, transparent 70px 140px) left bottom / 100% var(--fxv-turf) no-repeat,
    linear-gradient(180deg, #0D1D14, #07120C) left bottom / 100% var(--fxv-turf) no-repeat,
    var(--fxv-trees) left bottom calc(var(--fxv-turf) + 4px) / 800px 24px repeat-x,
    var(--fxv-flood) var(--fxv-lamp-1, left 4%) bottom calc(var(--fxv-turf) + 10px) / auto var(--fxv-lamp) no-repeat,
    var(--fxv-flood) var(--fxv-lamp-2, left 14%) bottom calc(var(--fxv-turf) + 10px) / auto calc(var(--fxv-lamp) * 0.88) no-repeat,
    var(--fxv-flood) var(--fxv-lamp-3, left 86%) bottom calc(var(--fxv-turf) + 10px) / auto calc(var(--fxv-lamp) * 0.88) no-repeat,
    var(--fxv-flood) var(--fxv-lamp-4, left 96%) bottom calc(var(--fxv-turf) + 10px) / auto var(--fxv-lamp) no-repeat;
}

/* The race pages' band: the same evening, lower, two runners to a long
   stretch of rail and no signals. */
.fxv-hero--slim.mf-hero {
  --fxv-runner: 24px;
  --fxv-turf: 8px;
  --fxv-lamp: 74px;
  --fxv-sky-signals: none;
  --fxv-runners: var(--fxv-field-sparse);
}

/* A tablet: the floodlights nearer the edges, the field a size down. */
@media (max-width: 1023px) {
  .fxv-hero.mf-hero {
    --fxv-runner: 42px;
    --fxv-lamp-1: left 2%;
    --fxv-lamp-2: left 10%;
    --fxv-lamp-3: left 90%;
    --fxv-lamp-4: left 98%;
    padding-bottom: 54px;
  }
}

/* A phone: the words keep to the left, so the evening is to the right
   of them: one floodlight at the edge, the signals rising into the top
   corner, the warm light behind the words; three runners, whole. */
@media (max-width: 767px) {
  .fxv-hero.mf-hero {
    --fxv-turf: 10px;
    --fxv-runner: min(30px, 8.6vw);
    --fxv-lamp: 150px;
    --fxv-sun-x: 34%;
    --fxv-lamp-1: left -200px;
    --fxv-lamp-2: left -200px;
    --fxv-lamp-3: left -200px;
    --fxv-lamp-4: right -18px;
    --fxv-sky-signals: var(--fxv-signals-corner);
    --fxv-signals-at: right 0 top 6px;
    --fxv-signals-size: auto 150px;
    padding-top: 28px;
    padding-bottom: 42px;
  }

  .fxv-hero--slim.mf-hero {
    --fxv-runner: 20px;
    --fxv-turf: 6px;
    --fxv-lamp: 56px;
    --fxv-sky-signals: none;
    --fxv-lamp-4: right 8px;
    justify-content: flex-start;
    padding-top: 16px;
    padding-bottom: 32px;
  }
}

.fxv-foot {
  margin-top: 28px;
  font-size: 12.5px;
  text-align: center;
  color: var(--mfr-ink-3);
}

/* ── 2. Room pills ───────────────────────────────────────────────── */

.fxv-nav {
  position: sticky;
  top: var(--mfr-top);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 calc(-1 * var(--fxv-gutter));
  padding: 10px var(--fxv-gutter);
  background: var(--mfr-paper);
  border-bottom: 1px solid var(--mfr-rule);
}

/* The band is the window's width; its pills keep the column. */
.fxv-nav::before {
  content: "";
  position: absolute;
  inset: 0 -100vmax -1px;
  z-index: -1;
  background: var(--mfr-paper);
  border-bottom: 1px solid var(--mfr-rule);
}

.fxv-nav__rooms {
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.fxv-nav__rooms::-webkit-scrollbar { display: none; }

/* A chip that is a link: the meeting page's chips are buttons, and
   say they are chosen with aria-pressed, which a link cannot carry. */
.fxv-wrap a.mfr-filter,
.fxv-wrap summary.mfr-filter {
  flex: none;
  text-decoration: none;
  color: var(--mfr-ink-2);
}

.fxv-wrap .mfr-filter.fxv-on {
  background: var(--mfr-ink);
  border-color: var(--mfr-ink);
  font-weight: 700;
  color: var(--mfr-white);
}

.fxv-wrap .mfr-filter.fxv-on .mfr-filter__n { color: rgb(255 255 255 / 78%); }
.fxv-wrap .mfr-filter.fxv-on .mfr-i { color: var(--mfr-gold); }

@media (hover: hover) {
  .fxv-wrap a.mfr-filter:not(.fxv-on):hover,
  .fxv-wrap summary.mfr-filter:not(.fxv-on):hover {
    background: var(--mfr-gold-wash);
    border-color: var(--mfr-gold-line);
    color: var(--mfr-ink);
  }
}

.fxv-pill { font-size: 13.5px; }

/* A members' room, to a visitor: a padlock drawn in two boxes. */
.fxv-pill__lock {
  position: relative;
  width: 9px;
  height: 7px;
  margin: 4px 0 0 1px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.6;
}

.fxv-pill__lock::before {
  content: "";
  position: absolute;
  left: 1.5px;
  bottom: 6px;
  width: 6px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  box-sizing: border-box;
}

.fxv-nav__live {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mfr-green-dark);
  white-space: nowrap;
}

.fxv-nav__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mfr-green);
}

.fxv-nav__time {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--mfr-ink-3);
}

/* While the next page is fetched (fox_v2_turn.js). */
.fxv-turning .fxv-wrap { cursor: progress; }

/* ── 3. The other rooms ──────────────────────────────────────────── */

/* Stable, Race Trace, Alerts and Settings keep the terminal's markup
   and its stylesheet (fox_signals_shell.css). That stylesheet draws
   everything from the palette of custom properties on .fx-shell, so
   the rooms are put on the paper by handing it the meeting page's
   palette here: surfaces, ink, the accent (the terminal's orange is
   the site's gold), the two price colours, radii and the typeface.
   What follows the palette is the short list of things the terminal
   wrote down as literal colours, or sized for a dense dark screen.

   .fx-shell--nudge is the sign-up prompt's wrapper: it takes the same
   palette and draws nothing itself. */
.fx-shell.fx-shell--v2,
.fx-shell.fx-shell--nudge {
  color-scheme: light;

  --fx-bg-0: var(--mfr-paper);
  --fx-bg-1: var(--mfr-card);
  --fx-bg-2: var(--mfr-warm);
  --fx-bg-3: var(--mfr-gold-wash);
  --fx-border: var(--mfr-rule-2);
  --fx-border-soft: var(--mfr-rule);

  --fx-ink-1: var(--mfr-ink);
  --fx-ink-2: var(--mfr-ink-2);
  --fx-ink-3: var(--mfr-ink-3);
  --fx-ink-mute: var(--mfr-ink-3);

  --fx-fox: var(--mfr-gold-ink);
  --fx-fox-soft: var(--mfr-gold-wash);
  --fx-fox-ring: var(--mfr-gold-line);

  --fx-up: var(--mfr-green-dark);
  --fx-up-soft: var(--mfr-green-wash);
  --fx-down: #a93226;
  --fx-down-soft: var(--mfr-red-wash);
  --fx-neutral: var(--mfr-ink-3);

  --fx-strong: var(--mfr-gold-ink);
  --fx-medium: #46557a;
  --fx-weak: var(--mfr-ink-3);

  --fx-font-body: var(--font-body);
  --fx-font-mono: var(--font-body);

  --fx-r-1: 6px;
  --fx-r-2: 10px;
  --fx-r-3: 14px;
}

.fx-shell.fx-shell--nudge { display: contents; }

.fx-shell.fx-shell--v2 {
  display: block;
  min-height: 50vh;
  background: none;
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  font-feature-settings: normal;
}

.fx-shell.fx-shell--v2 .fx-shell__main { padding: 20px 0 0; }
.fx-shell.fx-shell--v2 .fx-shell__container { max-width: none; padding: 0; }

.fx-shell.fx-shell--v2 .fx-num,
.fx-shell.fx-shell--v2 .fx-mono { letter-spacing: 0; }

/* The masthead names the room: the body's own copy of the name is
   kept for a screen reader and taken out of sight. */
.fx-shell--v2 .fx-section-header__eyebrow,
.fx-shell--v2 .fx-section-header__title,
.fx-shell--v2 .fx-alerts__eyebrow,
.fx-shell--v2 .fx-settings__eyebrow {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.fx-shell--v2 .fx-section-header {
  justify-content: flex-end;
  padding-bottom: 0;
  margin-bottom: 14px;
  border-bottom: 0;
}

/* Cards: the list is a white card with the Board's shadow. */
.fx-shell--v2 .fx-board__grid,
.fx-shell--v2 .fx-hub__grid,
.fx-shell--v2 .fx-card {
  border-radius: 14px;
  box-shadow: var(--mfr-shadow-1);
}

/* On the paper a filled accent takes white words, where the terminal
   put near-black on orange. */
.fx-shell--v2 .fx-board__filter-trigger-count,
.fx-shell--nudge .fx-nudge__primary,
.fx-shell--v2 .fx-alerts__submit,
.fx-shell--v2 .fx-settings__submit {
  color: var(--mfr-white);
}

.fx-shell--nudge .fx-nudge__primary:hover,
.fx-shell--nudge .fx-nudge__primary:focus-visible {
  background: var(--mfr-ink);
}

.fx-shell--nudge .fx-nudge__panel {
  border-radius: 16px;
  box-shadow: var(--mfr-shadow-3);
}

/* Gold, silver and bronze as words: the metals are fills on this
   page, and too pale to read as text. */
.fx-shell--v2 [class*="--pos-1"] [class*="-pos"],
.fx-shell--v2 [class*="--win"] [class*="-pos"] { color: var(--mfr-gold-ink); }
.fx-shell--v2 [class*="--pos-2"] [class*="-pos"] { color: #5c6470; }
.fx-shell--v2 [class*="--pos-3"] [class*="-pos"] { color: #8a5320; }

/* The table's finish pills, the same: the terminal's gold, silver and
   bronze were written as text, and do not read on the paper. */
.fx-shell--v2 .fx-fin--1 { color: var(--mfr-gold-ink); }
.fx-shell--v2 .fx-fin--2 { color: #5c6470; }
.fx-shell--v2 .fx-fin--3 { color: #8a5320; }

.fx-shell--v2 .fx-outcome--fired,
.fx-shell--v2 .fx-rtrace__hero-stat--down .fx-rtrace__hero-stat-val { color: var(--mfr-green-dark); }
.fx-shell--v2 .fx-outcome--fired { background: var(--mfr-green-wash); }
.fx-shell--v2 .fx-outcome--missed,
.fx-shell--v2 .fx-rtrace__hero-stat--up .fx-rtrace__hero-stat-val { color: #a93226; }
.fx-shell--v2 .fx-outcome--missed { background: var(--mfr-red-wash); }

/* A signal that missed keeps its ink: the terminal faded it to 75%,
   which took its words under 4.5:1. Its "Missed" says so. */
.fx-shell--v2 .fx-trace__signal--missed .fx-trace__signal-details { opacity: 1; }

/* The terminal gave each runner's line a hue; on the paper the chart
   is ink and gold (see the Race Trace rules below), and the hue is kept
   only on the terminal's own elements. */
.fx-shell--v2 .fx-rtrace__chart-ai { stroke: #1f6fa8; }
.fx-shell--v2 .fx-settings__flash { color: var(--mfr-green-dark); }
.fx-shell--v2 .fx-alerts__signal--strong { border-left-color: var(--mfr-gold); }

.fx-shell--v2 .fx-alerts__pinned { color: var(--mfr-gold-ink); }

/* Chips are the Board's: round, and not spaced-out capitals. */
.fx-shell--v2 .fx-chip {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* The Board's rows, where a room lists races (the Stable). */
.fx-shell--v2 .fxv-list { margin-bottom: 20px; }

/* The terminal's smallest labels are 9 and 10px: here, 11px. */
.fx-shell--v2 [class*="fx-alerts__"][class*="-lab"],
.fx-shell--v2 [class*="fx-alerts__chip-"],
.fx-shell--v2 .fx-alerts__signal-time,
.fx-shell--v2 .fx-alerts legend,
.fx-shell--v2 .fx-stable__section-title,
.fx-shell--v2 [class*="fx-rtrace__"][class*="-lab"],
.fx-shell--v2 .fx-rtrace__conn-role,
.fx-shell--v2 .fx-rtrace__card-eyebrow,
.fx-shell--v2 .fx-rtrace__fit-legend,
.fx-shell--v2 .fx-trace__back,
.fx-shell--v2 .fx-trace__runners-head .fx-trace__rcol,
.fx-shell--v2 [class*="fx-tchart__"][class*="lab"],
.fx-shell--v2 .fx-tchart__kbd,
.fx-shell--v2 .fx-tchart__ai-toggle,
.fx-shell--v2 .fx-tchart__live-age,
.fx-shell--v2 [class*="fx-vedge__"][class*="lab"] { font-size: 11px; }

/* Race Trace: how the market ran. The chart is the field at the post,
   as the Board's conviction course and the masthead's rail are: time
   runs along the foot from the first price to the latest; each line is
   a runner's price through the day, ink, stepping as the price is set,
   and it ends in the runner's horse (the site's own) standing at the
   winning post at its market height, its cloth, name and price beside
   it. The favourite's horse and line are gold (on a replay the
   winner's); the front of the market is drawn heavier than the rest.
   The post is the replay's cursor, gold disc and all: drag the replay
   and the post goes back along the course. A signal is a course flag
   on its runner's line where it fired, green where a price came in,
   red where one went out; a press on it replays that moment. The
   prices down the side are on the Board's price tags, gold figures on
   the ink. A press on a runner, at the post, in the facts above the
   chart or in the list under it, follows that runner: the others fade.
   The words beside the chart are HTML the script places (its
   placeOverlays); the containers it makes are .fx-tchart__axis,
   __aiaxis, __ends, __times and __story. */
.fx-shell--v2 .fx-tchart {
  --fxt-axis: 50px;
  --fxt-ends: 246px;
  padding: 18px 20px 16px;
  border-color: var(--mfr-rule);
  border-radius: 14px;
  box-shadow: var(--mfr-shadow-1);
}

/* The caption: the title, its facts, and the switches as plain words. */
.fx-shell--v2 .fx-tchart__cap {
  align-items: baseline;
  gap: 6px 18px;
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mfr-rule);
}

.fx-shell--v2 .fx-tchart__cap-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-tchart__cap-title { flex: 1 1 auto; }

.fx-shell--v2 .fx-tchart__cap-meta {
  order: 10;
  flex: 1 1 100%;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-tchart__ai-toggle,
.fx-shell--v2 .fx-tchart__copy,
.fx-shell--v2 .fx-tchart__live {
  height: auto;
  padding: 2px 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-tchart__ai-toggle[hidden] { display: none; }

.fx-shell--v2 .fx-tchart__ai-toggle--on {
  background: none;
  border-color: var(--mfr-gold);
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-tchart__ai-toggle-dash { width: 14px; }
.fx-shell--v2 .fx-tchart__live { gap: 6px; }
.fx-shell--v2 .fx-tchart__live-age { min-width: 24px; font-family: var(--font-body); font-size: 12px; }
.fx-shell--v2 .fx-tchart__live-pause { width: 20px; height: 20px; }
.fx-shell--v2 .fx-tchart__copy--copied { background: none; border-color: var(--mfr-green); color: var(--mfr-green-dark); }

@media (hover: hover) {
  .fx-shell--v2 .fx-tchart__ai-toggle:hover,
  .fx-shell--v2 .fx-tchart__copy:hover {
    background: none;
    border-color: var(--mfr-rule-2);
    color: var(--mfr-ink);
  }
}

/* The saddle cloth: the runner's number, white on the ink; gold for
   the favourite (the winner, on a replay) and for the runner followed. */
.fx-shell--v2 .fx-tchart__end-cloth,
.fx-shell--v2 .fx-tchart__tile-cloth,
.fx-shell--v2 .fx-tchart__readout-num,
.fx-shell--v2 .fx-tchart__legend-num,
.fx-shell--v2 .fx-tchart__podium-num,
.fx-shell--v2 .fx-trace__runner .fx-trace__rcol--num,
.fx-shell--v2 .fx-vedge__row .fx-vedge__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 19px;
  border-radius: 3px;
  background: var(--mfr-ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--mfr-white);
}

.fx-shell--v2 .fx-tchart__end--fav .fx-tchart__end-cloth,
.fx-shell--v2 .fx-tchart__end--pos-1 .fx-tchart__end-cloth,
.fx-shell--v2 .fx-tchart__tile--fav .fx-tchart__tile-cloth,
.fx-shell--v2 .fx-tchart__tile--win .fx-tchart__tile-cloth,
.fx-shell--v2 .fx-tchart__readout-cell--fav .fx-tchart__readout-num,
.fx-shell--v2 .fx-tchart__podium-chip--pos-1 .fx-tchart__podium-num,
.fx-shell--v2 .fx-trace__runner--pos-1 .fx-trace__rcol--num {
  background: var(--mfr-gold);
  color: var(--mfr-ink);
}

/* The market in four facts, before the chart: the favourite (the
   winner, on a replay), the most backed, the biggest drifter and the
   latest signal, a fact each, ruled apart. Each is a press. */
.fx-shell--v2 .fx-tchart__story {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0 0 18px;
  border-bottom: 1px solid var(--mfr-rule);
}

.fx-shell--v2 .fx-tchart__story:empty { display: none; }

.fx-shell--v2 .fx-tchart__tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "lab   lab"
    "who   who"
    "price note";
  align-items: baseline;
  align-content: start;
  column-gap: 10px;
  row-gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 14px 18px 14px 0;
  background: none;
  border: 0;
  border-left: 1px solid var(--mfr-rule);
  border-radius: 0;
  box-shadow: inset 0 -2px 0 transparent;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  color: var(--mfr-ink);
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.fx-shell--v2 .fx-tchart__tile:first-child { border-left: 0; }
.fx-shell--v2 .fx-tchart__tile:not(:first-child) { padding-left: 18px; }
.fx-shell--v2 .fx-tchart__tile--empty { cursor: default; }
.fx-shell--v2 .fx-tchart__tile[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--mfr-gold); }

.fx-shell--v2 .fx-tchart__tile:focus-visible {
  outline: 2px solid var(--mfr-gold-ink);
  outline-offset: -2px;
}

@media (hover: hover) {
  .fx-shell--v2 .fx-tchart__tile:not(.fx-tchart__tile--empty):hover { box-shadow: inset 0 -2px 0 var(--mfr-rule-2); }
  .fx-shell--v2 .fx-tchart__tile[aria-pressed="true"]:hover { box-shadow: inset 0 -2px 0 var(--mfr-gold); }
}

.fx-shell--v2 .fx-tchart__story .fx-tchart__tile-lab {
  grid-area: lab;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-tchart__tile--win .fx-tchart__tile-lab { color: var(--mfr-gold-ink); }

.fx-shell--v2 .fx-tchart__tile--fav .fx-tchart__tile-lab::before,
.fx-shell--v2 .fx-tchart__tile--win .fx-tchart__tile-lab::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
  background: var(--mfr-gold);
  -webkit-mask: var(--fxv-horse) center / contain no-repeat;
  mask: var(--fxv-horse) center / contain no-repeat;
}

.fx-shell--v2 .fx-tchart__tile-who {
  grid-area: who;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
}

.fx-shell--v2 .fx-tchart__tile-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-shell--v2 .fx-tchart__tile-price {
  grid-area: price;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}

.fx-shell--v2 .fx-tchart__tile-note {
  grid-area: note;
  justify-self: end;
  font-size: 12px;
  font-weight: 600;
  color: var(--mfr-ink-3);
  white-space: nowrap;
}

.fx-shell--v2 .fx-tchart__tile--empty .fx-tchart__tile-note {
  grid-area: who;
  justify-self: start;
  font-weight: 500;
  white-space: normal;
}

.fx-shell--v2 .fx-tchart__tile-note--in { color: var(--mfr-green-dark); }
.fx-shell--v2 .fx-tchart__tile-note--out { color: var(--fx-down); }

/* The stage: the prices down the left, the runners down the right, the
   hours along the foot; the chart keeps the room for them. */
.fx-shell--v2 .fx-tchart__stage {
  padding: 8px var(--fxt-ends) 0 var(--fxt-axis);
  background: none;
  border-radius: 0;
}

.fx-shell--v2 .fx-tchart__svg {
  margin-bottom: 22px;
  background: none;
  border-bottom: 1px solid var(--mfr-rule-2);
  border-radius: 0;
}

.fx-shell--v2 .fx-tchart__axis,
.fx-shell--v2 .fx-tchart__aiaxis,
.fx-shell--v2 .fx-tchart__ends,
.fx-shell--v2 .fx-tchart__times {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fx-shell--v2 .fx-tchart__gridlabel {
  position: absolute;
  transform: translate(calc(-100% - 10px), -50%);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--mfr-ink-3);
  white-space: nowrap;
}

.fx-shell--v2 .fx-tchart__aiaxis { display: none; }
.fx-shell--v2 .fx-tchart__stage--ai .fx-tchart__aiaxis { display: block; }

.fx-shell--v2 .fx-tchart__ai-axislabel {
  position: absolute;
  transform: translate(8px, -50%);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--mfr-gold-ink);
  white-space: nowrap;
}

/* The hours, each with its tick on the baseline. */
.fx-shell--v2 .fx-tchart__time {
  position: absolute;
  transform: translate(-50%, 6px);
  font-size: 11px;
  font-weight: 500;
  color: var(--mfr-ink-3);
  white-space: nowrap;
}

.fx-shell--v2 .fx-tchart__time::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 1px;
  height: 4px;
  background: var(--mfr-rule-2);
}

.fx-shell--v2 .fx-tchart__gridline {
  stroke: var(--mfr-rule);
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
}

/* The lines: ink, the front of the market heavier, the favourite gold;
   the runner followed is heaviest and the rest fade. */
.fx-shell--v2 .fx-tchart__line {
  stroke: var(--mfr-ink);
  stroke-width: 1.8;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  opacity: 0.72;
  vector-effect: non-scaling-stroke;
}

.fx-shell--v2 .fx-tchart__line--back { stroke-width: 1.2; opacity: 0; }
.fx-shell--v2 .fx-tchart__svg--field .fx-tchart__line--back { opacity: 0.36; }

.fx-shell--v2 .fx-tchart__line--fav,
.fx-shell--v2 .fx-tchart__line.fx-tchart__line--pos-1 {
  stroke: var(--mfr-gold);
  stroke-width: 2.4;
  opacity: 1;
  filter: none;
}

.fx-shell--v2 .fx-tchart__line.fx-tchart__line--pos-2,
.fx-shell--v2 .fx-tchart__line.fx-tchart__line--pos-3 {
  stroke: var(--mfr-ink);
  stroke-width: 1.8;
  opacity: 0.72;
}

.fx-shell--v2 .fx-tchart__svg--dim .fx-tchart__line { opacity: 0.12; }
.fx-shell--v2 .fx-tchart__svg--dim .fx-tchart__line--back { opacity: 0; }
.fx-shell--v2 .fx-tchart__svg--field.fx-tchart__svg--dim .fx-tchart__line--back { opacity: 0.08; }
.fx-shell--v2 .fx-tchart__svg--dim .fx-tchart__line--fav,
.fx-shell--v2 .fx-tchart__svg--dim .fx-tchart__line.fx-tchart__line--pos-1 { opacity: 0.18; }

.fx-shell--v2 .fx-tchart__svg--dim .fx-tchart__line--hi,
.fx-shell--v2 .fx-tchart__svg--dim .fx-tchart__line--fav.fx-tchart__line--hi,
.fx-shell--v2 .fx-tchart__svg--dim .fx-tchart__line.fx-tchart__line--pos-1.fx-tchart__line--hi {
  stroke-width: 2.8;
  opacity: 1;
}

.fx-shell--v2 .fx-tchart__ai-line { stroke: var(--mfr-gold-ink); vector-effect: non-scaling-stroke; }

.fx-shell--v2 .fx-tchart__cursor {
  stroke: var(--mfr-ink);
  stroke-width: 1.5;
  opacity: 0.85;
  vector-effect: non-scaling-stroke;
}

.fx-shell--v2 .fx-tchart__post {
  fill: var(--mfr-gold);
  stroke: var(--mfr-ink);
  stroke-width: 1.5;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

/* Each line's end: its runner, in words, beside the chart. */
.fx-shell--v2 .fx-tchart__end {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(var(--fxt-ends) - 6px);
  height: 20px;
  margin-left: 10px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 3px;
  transform: translateY(-50%);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--mfr-ink);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.15s;
}

.fx-shell--v2 .fx-tchart__stage--ai .fx-tchart__end { margin-left: 46px; }

.fx-shell--v2 .fx-tchart__end-horse {
  flex: none;
  width: 24px;
  height: 19px;
  margin-right: 1px;
  background: var(--mfr-ink);
  -webkit-mask: var(--fxv-horse) center / contain no-repeat;
  mask: var(--fxv-horse) center / contain no-repeat;
}

.fx-shell--v2 .fx-tchart__end--fav .fx-tchart__end-horse,
.fx-shell--v2 .fx-tchart__end--pos-1 .fx-tchart__end-horse { background: var(--mfr-gold); }

.fx-shell--v2 .fx-tchart__end-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.fx-shell--v2 .fx-tchart__end-price {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fx-shell--v2 .fx-tchart__end--back { opacity: 0.6; }

/* On a replay, where the horse finished. */
.fx-shell--v2 .fx-tchart__end-pos {
  flex: none;
  padding: 1px 4px;
  border: 1px solid var(--mfr-rule-2);
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-tchart__end--pos-1 .fx-tchart__end-pos { border-color: var(--mfr-gold); color: var(--mfr-gold-ink); }

.fx-shell--v2 .fx-tchart__end[aria-pressed="true"],
.fx-shell--v2 .fx-tchart__end--hi {
  z-index: 1;
  opacity: 1;
  box-shadow: 0 2px 0 var(--mfr-gold);
}

.fx-shell--v2 .fx-tchart__end[aria-pressed="true"] .fx-tchart__end-cloth,
.fx-shell--v2 .fx-tchart__end--hi .fx-tchart__end-cloth {
  background: var(--mfr-gold);
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-tchart__end--dim { opacity: 0.28; }

.fx-shell--v2 .fx-tchart__end:focus-visible {
  outline: 2px solid var(--mfr-gold-ink);
  outline-offset: 3px;
}

@media (hover: hover) {
  .fx-shell--v2 .fx-tchart__end:hover { opacity: 1; }
}

/* From a line's end to its runner's name. */
.fx-shell--v2 .fx-tchart__end-line {
  fill: none;
  stroke: var(--mfr-rule-2);
  stroke-width: 1;
  stroke-dasharray: none;
  opacity: 1;
  vector-effect: non-scaling-stroke;
}

.fx-shell--v2 .fx-tchart__svg--dim .fx-tchart__end-line { opacity: 0.3; }
.fx-shell--v2 .fx-tchart__svg--dim .fx-tchart__end-line.fx-tchart__line--hi { stroke: var(--mfr-ink-3); opacity: 1; }

/* A signal: a dot on its runner's line where it fired, green where a
   price came in, red where one went out; the one at the scrubbed minute
   is ringed in gold. */
.fx-shell--v2 .fx-tchart__marker { cursor: pointer; outline: none; }
.fx-shell--v2 .fx-tchart__marker-line { display: none; }

.fx-shell--v2 .fx-tchart__marker-hit {
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  vector-effect: non-scaling-stroke;
}

.fx-shell--v2 .fx-tchart__marker-ring {
  fill: var(--mfr-gold-wash);
  stroke: var(--mfr-gold);
  stroke-width: 1.5;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}

.fx-shell--v2 .fx-tchart__marker-pole {
  stroke: var(--mfr-ink-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fx-shell--v2 .fx-tchart__marker-flag { fill: var(--mfr-ink-3); }
.fx-shell--v2 .fx-tchart__marker-dot { fill: var(--mfr-ink-2); }

.fx-shell--v2 .fx-tchart__marker--up .fx-tchart__marker-flag { fill: var(--mfr-green); }
.fx-shell--v2 .fx-tchart__marker--down .fx-tchart__marker-flag { fill: var(--fx-down); }
.fx-shell--v2 .fx-tchart__marker--mixed .fx-tchart__marker-flag { fill: var(--mfr-ink-2); }

.fx-shell--v2 .fx-tchart__marker--at .fx-tchart__marker-ring,
.fx-shell--v2 .fx-tchart__marker:focus-visible .fx-tchart__marker-ring { opacity: 1; }

/* The keyboard's ring in the gold that reads on the paper. */
.fx-shell--v2 .fx-tchart__marker:focus-visible .fx-tchart__marker-ring { stroke: var(--mfr-gold-ink); stroke-width: 2; }

@media (hover: hover) {
  .fx-shell--v2 .fx-tchart__marker:hover .fx-tchart__marker-ring { opacity: 1; }
}

/* The tip, when a line is pointed at. */
.fx-shell--v2 .fx-tchart__tip { border-radius: 8px; box-shadow: var(--mfr-shadow-2); }
.fx-shell--v2 .fx-tchart__tip-name { border-left-color: var(--mfr-gold); }

/* The ring at the scrubbed time: the time, then every runner with a
   price, shortest first, as a ruled list; a price in green where it has
   come in since it opened and in red where it has gone out. */
.fx-shell--v2 .fx-tchart__readout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px 22px;
  margin: 0 calc(-1 * var(--fxt-ends)) 0 calc(-1 * var(--fxt-axis));
  padding: 16px 0 0;
  border-top: 1px solid var(--mfr-rule);
  font-size: 13px;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-tchart:not(.fx-tchart--replaying):not(.fx-tchart--following) .fx-tchart__readout { display: none; }

.fx-shell--v2 .fx-tchart__readout-time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  height: auto;
  padding: 2px 0 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-tchart__readout-time::after {
  content: "in the ring";
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-tchart__readout-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0 28px;
  flex: none;
}

.fx-shell--v2 .fx-tchart__readout-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 34px;
  padding: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--mfr-rule);
  border-radius: 0;
  font-size: 13px;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-tchart__readout-cell--focused {
  grid-column: 1 / -1;
  height: auto;
  min-height: 34px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-left-width: 0;
}

.fx-shell--v2 .fx-tchart__readout-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  white-space: nowrap;
}

.fx-shell--v2 .fx-tchart__readout-odds,
.fx-shell--v2 .fx-tchart__readout-ai {
  font-family: var(--font-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-tchart__readout-ai { color: var(--mfr-gold-ink); }
.fx-shell--v2 .fx-tchart__readout-mins,
.fx-shell--v2 .fx-tchart__readout-from,
.fx-shell--v2 .fx-tchart__readout-sig { font-family: var(--font-body); font-size: 12px; color: var(--mfr-ink-3); }
.fx-shell--v2 .fx-tchart__readout-mins { border-left-color: var(--mfr-rule-2); }

.fx-shell--v2 .fx-tchart__readout-move {
  margin-left: -4px;
  font-size: 12px;
  font-weight: 700;
}

.fx-shell--v2 .fx-tchart__readout-cell--in .fx-tchart__readout-odds,
.fx-shell--v2 .fx-tchart__readout-cell--in .fx-tchart__readout-move { color: var(--mfr-green-dark); }
.fx-shell--v2 .fx-tchart__readout-cell--out .fx-tchart__readout-odds,
.fx-shell--v2 .fx-tchart__readout-cell--out .fx-tchart__readout-move { color: var(--fx-down); }

.fx-shell--v2 .fx-tchart__readout-odds,
.fx-shell--v2 .fx-tchart__readout-move,
.fx-shell--v2 .fx-tchart__readout-ai,
.fx-shell--v2 .fx-tchart__readout-from,
.fx-shell--v2 .fx-tchart__readout-sig,
.fx-shell--v2 .fx-tchart__readout-mins { order: 2; }

.fx-shell--v2 .fx-tchart__readout-cell--fav::after {
  order: 1;
  content: "fav";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mfr-gold-ink);
}

/* What fired at this minute, at the head of the list. */
.fx-shell--v2 .fx-tchart__readout-note {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 0 0 8px;
  font-size: 12.5px;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-tchart__readout-note-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.fx-shell--v2 .fx-tchart__readout-note-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-tchart__readout-note-item--up::before { background: var(--mfr-green); }
.fx-shell--v2 .fx-tchart__readout-note-item--down::before { background: var(--fx-down); }

.fx-shell--v2 .fx-tchart__readout-note-who {
  font-weight: 500;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-tchart__readout-more {
  height: 34px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--mfr-rule);
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mfr-ink-2);
}

/* The replay: from the first price to the latest; the fill is how far
   the day has run. */
/* The replay runs under the plot, its thumb under the post, with
   "Replay" in the gutter where the prices are. */
.fx-shell--v2 .fx-tchart__scrubber-row {
  display: grid;
  grid-template-columns: var(--fxt-axis) minmax(0, 1fr) var(--fxt-ends);
  grid-template-areas: "lab scrub .";
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 6px 0 0;
}

.fx-shell--v2 .fx-tchart__scrubber-row::before,
.fx-shell--v2 .fx-tchart__scrubber-row::after { content: none; }

.fx-shell--v2 .fx-tchart__scrubber-row .fx-tchart__scrubber-lab {
  grid-area: lab;
  min-width: 0;
  padding-right: 10px;
  font-size: 0;
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-tchart__scrubber-row .fx-tchart__scrubber-lab::after {
  content: "Replay";
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
}

.fx-shell--v2 .fx-tchart__scrubber {
  grid-area: scrub;
  height: 24px;
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
}

.fx-shell--v2 .fx-tchart__scrubber::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mfr-gold) 0 var(--fxt-progress, 100%), var(--mfr-rule-2) 0);
}

.fx-shell--v2 .fx-tchart__scrubber::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6.5px;
  background: var(--mfr-gold);
  border: 3px solid var(--mfr-ink);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
}

.fx-shell--v2 .fx-tchart__scrubber::-moz-range-track { height: 3px; border-radius: 2px; background: var(--mfr-rule-2); }
.fx-shell--v2 .fx-tchart__scrubber::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--mfr-gold); }
.fx-shell--v2 .fx-tchart__scrubber::-moz-range-thumb { width: 10px; height: 10px; background: var(--mfr-gold); border: 3px solid var(--mfr-ink); border-radius: 50%; }

.fx-shell--v2 .fx-tchart__scrubber:focus-visible {
  outline: 2px solid var(--mfr-gold-ink);
  outline-offset: 2px;
}

/* The runners to follow are at the lines' ends and in the table under
   the chart: the terminal's legend of chips is not drawn. */
.fx-shell--v2 .fx-tchart__legend { display: none; }

.fx-shell--v2 .fx-tchart__focus-hint { font-size: 12.5px; color: var(--mfr-ink-3); }
.fx-shell--v2 .fx-tchart__focus-hint-name { color: var(--mfr-ink); }

/* The replay's podium, above the caption: the placed runners. */
.fx-shell--v2 .fx-tchart__podium { gap: 6px 8px; padding: 0 0 14px; border-bottom: 0; }
.fx-shell--v2 .fx-tchart__podium-swatch { display: none; }

.fx-shell--v2 .fx-tchart__podium-chip {
  gap: 7px;
  height: 28px;
  padding: 0 10px 0 3px;
  background: none;
  border-color: var(--mfr-rule-2);
  font-size: 12.5px;
  font-weight: 600;
}

.fx-shell--v2 .fx-tchart__podium-pos {
  min-width: 0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-tchart__podium-chip--pos-1 { border-color: var(--mfr-gold); }
.fx-shell--v2 .fx-tchart__podium-chip--pos-1 .fx-tchart__podium-pos { color: var(--mfr-gold-ink); }
.fx-shell--v2 .fx-tchart__podium-chip--locked { background: none; border-color: var(--mfr-ink); box-shadow: none; }

/* The sections under the chart: headed as the Board heads its lists;
   the runners table with its cloths, each price green or red by the
   way it has gone; a signal's kind as a word, its edge in its tone. */
.fx-shell--v2 .fx-trace__section-title,
.fx-shell--v2 .fx-vedge__title {
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-vedge {
  border-color: var(--mfr-rule);
  border-radius: 14px;
  box-shadow: var(--mfr-shadow-1);
}

.fx-shell--v2 .fx-vedge__deck { font-size: 12.5px; }

.fx-shell--v2 .fx-trace__runners {
  border-color: var(--mfr-rule);
  border-radius: 14px;
  box-shadow: var(--mfr-shadow-1);
}

.fx-shell--v2 .fx-trace__runners-head {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.fx-shell--v2 .fx-trace__runner .fx-trace__rcol--num {
  width: 26px;
  height: 22px;
  font-size: 12px;
}

.fx-shell--v2 .fx-trace__horse-name {
  font-size: 14.5px;
  font-weight: 700;
}

.fx-shell--v2 .fx-trace__rcol--odds {
  font-size: 15px;
  font-weight: 700;
}

.fx-shell--v2 .fx-trace__runner--in .fx-trace__rcol--odds [data-price] { color: var(--mfr-green-dark); }
.fx-shell--v2 .fx-trace__runner--out .fx-trace__rcol--odds [data-price] { color: var(--fx-down); }

.fx-shell--v2 .fx-trace__runner--pos-1 { background: var(--mfr-card); box-shadow: inset 3px 0 0 var(--mfr-gold); }
.fx-shell--v2 .fx-trace__runner--pos-2,
.fx-shell--v2 .fx-trace__runner--pos-3 { box-shadow: inset 3px 0 0 var(--mfr-rule-2); }

.fx-shell--v2 .fx-trace__runner.fx-focus-match { background: var(--mfr-gold-wash); }
.fx-shell--v2 .fx-trace__runner.fx-focus-dim { opacity: 0.45; }


/* Under 1280px the chart stands taller, so nine ends fit beside it
   (race_trace_chart.js draws it on a grid the same shape). A laptop
   keeps the ends whole; a tablet's are the cloth and the price. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .fx-shell--v2 .fx-tchart__svg { aspect-ratio: 1000 / 340; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .fx-shell--v2 .fx-tchart__svg { aspect-ratio: 1000 / 400; }
  .fx-shell--v2 .fx-tchart { --fxt-ends: 112px; }
  .fx-shell--v2 .fx-tchart__end { gap: 5px; }
  .fx-shell--v2 .fx-tchart__end-name,
  .fx-shell--v2 .fx-tchart__end-pos { display: none; }
}

/* A phone: the chart taller, on a 500-wide grid (race_trace_chart.js),
   its prices in a narrow column at the left, clear of the lines, each
   line ending in its cloth; under it the ring as a row a runner, the
   front four and a button for the rest. */
@media (max-width: 767px) {
  .fx-shell--v2 .fx-tchart { padding: 14px 14px 12px; }

  .fx-shell--v2 .fx-tchart__cap {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding-bottom: 12px;
  }

  .fx-shell--v2 .fx-tchart__cap-title { flex: 1 1 auto; order: 0; }
  .fx-shell--v2 .fx-tchart__live { order: 1; }
  .fx-shell--v2 .fx-tchart__cap-meta { order: 2; flex-basis: 100%; font-size: 12px; }
  .fx-shell--v2 .fx-tchart__ai-toggle { order: 3; }
  .fx-shell--v2 .fx-tchart__copy { display: none; }

  /* The facts, a row each: what it is, who, the price and its move. */
  .fx-shell--v2 .fx-tchart__story { grid-template-columns: 1fr; margin-bottom: 14px; }

  .fx-shell--v2 .fx-tchart__tile {
    grid-template-columns: 82px minmax(0, 1fr) auto;
    grid-template-areas:
      "lab who price"
      "lab who note";
    align-items: center;
    column-gap: 10px;
    row-gap: 1px;
    padding: 10px 0;
    border-left: 0;
    border-top: 1px solid var(--mfr-rule);
  }

  .fx-shell--v2 .fx-tchart__tile:first-child { border-top: 0; }
  .fx-shell--v2 .fx-tchart__tile:not(:first-child) { padding-left: 0; }
  .fx-shell--v2 .fx-tchart__tile-lab { align-self: center; white-space: normal; line-height: 1.2; }
  .fx-shell--v2 .fx-tchart__tile-who { font-size: 13px; }
  .fx-shell--v2 .fx-tchart__tile-price { justify-self: end; font-size: 18px; }
  .fx-shell--v2 .fx-tchart__tile-note { font-size: 11px; }

  .fx-shell--v2 .fx-tchart__svg {
    aspect-ratio: 500 / 440;
    margin-bottom: 20px;
  }

  /* The cloths at the ends follow the phone's width: 22px at 375px,
     18px at 320px, so nine still fit beside the chart. */
  .fx-shell--v2 .fx-tchart {
    --fxt-axis: 40px;
    --fxt-cloth: clamp(18px, 7.3vw - 5.4px, 22px);
    --fxt-ends: calc(var(--fxt-cloth) * 2 + 10px);
  }

  .fx-shell--v2 .fx-tchart__stage { padding-top: 8px; }

  /* The prices in their column, each level with its line: inside the
     chart a line at a nearby price ran through them. 40px holds the
     longest ("1000/1", "101.00") at this size. */
  .fx-shell--v2 .fx-tchart__gridlabel {
    transform: translate(calc(-100% - 6px), -50%);
    font-size: 10.5px;
  }

  .fx-shell--v2 .fx-tchart__time { font-size: 10.5px; }

  .fx-shell--v2 .fx-tchart__line { stroke-width: 2.2; opacity: 0.78; }
  .fx-shell--v2 .fx-tchart__line--back { stroke-width: 1.3; opacity: 0; }
  .fx-shell--v2 .fx-tchart__svg--field .fx-tchart__line--back { opacity: 0.32; }
  .fx-shell--v2 .fx-tchart__svg--dim .fx-tchart__line--back { opacity: 0; }
  .fx-shell--v2 .fx-tchart__svg--field.fx-tchart__svg--dim .fx-tchart__line--back { opacity: 0.08; }
  .fx-shell--v2 .fx-tchart__svg--dim .fx-tchart__line--back.fx-tchart__line--hi { opacity: 1; }
  .fx-shell--v2 .fx-tchart__line--fav,
  .fx-shell--v2 .fx-tchart__line.fx-tchart__line--pos-1 { stroke-width: 2.8; }
  .fx-shell--v2 .fx-tchart__marker-hit { stroke-width: 22; }

  /* The ends are the cloths alone; the names and prices are in the
     ring under the chart. */
  .fx-shell--v2 .fx-tchart__end {
    gap: 3px;
    height: var(--fxt-cloth);
    margin-left: 4px;
    box-shadow: none;
  }

  .fx-shell--v2 .fx-tchart__end-horse {
    width: var(--fxt-cloth);
    height: calc(var(--fxt-cloth) - 4px);
    margin-right: 0;
  }

  .fx-shell--v2 .fx-tchart__end-cloth {
    width: var(--fxt-cloth);
    height: calc(var(--fxt-cloth) - 3px);
    font-size: 11px;
  }

  .fx-shell--v2 .fx-tchart__end--back { opacity: 0.5; }

  .fx-shell--v2 .fx-tchart__end[aria-pressed="true"],
  .fx-shell--v2 .fx-tchart__end--hi { box-shadow: none; opacity: 1; }

  .fx-shell--v2 .fx-tchart__end[aria-pressed="true"] .fx-tchart__end-cloth,
  .fx-shell--v2 .fx-tchart__end--hi .fx-tchart__end-cloth { box-shadow: 0 0 0 2px var(--mfr-ink); }

  .fx-shell--v2 .fx-tchart__end-name,
  .fx-shell--v2 .fx-tchart__end-price,
  .fx-shell--v2 .fx-tchart__end-pos { display: none; }

  /* The ring: the time, then a row a runner. */
  .fx-shell--v2 .fx-tchart__readout {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 14px;
  }

  .fx-shell--v2 .fx-tchart__readout-time {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    font-size: 18px;
  }

  .fx-shell--v2 .fx-tchart__readout-time::after { margin-top: 0; }
  .fx-shell--v2 .fx-tchart__readout-list { grid-template-columns: 1fr; }
  .fx-shell--v2 .fx-tchart__readout-cell { height: 38px; font-size: 14px; }
  .fx-shell--v2 .fx-tchart__readout-cell--focused { height: auto; min-height: 38px; }
  .fx-shell--v2 .fx-tchart__readout-odds { font-size: 14px; }

  .fx-shell--v2 .fx-tchart__readout-list:not(.is-open) .fx-tchart__readout-cell:nth-of-type(4) { display: flex; }
  .fx-shell--v2 .fx-tchart__readout-list:not(.is-open) .fx-tchart__readout-cell:nth-of-type(n+5) { display: none; }
  .fx-shell--v2 .fx-tchart__readout-more { display: inline-flex; justify-content: flex-start; height: 38px; }

  /* "Replay the day" from the left edge; the slider under the plot, so
     its thumb stays under the post. */
  .fx-shell--v2 .fx-tchart__scrubber-row {
    grid-template-columns: var(--fxt-axis) minmax(0, 1fr) var(--fxt-ends);
    grid-template-areas:
      "lab lab   ."
      ".   scrub .";
    margin: 0;
    padding-top: 10px;
  }

  .fx-shell--v2 .fx-tchart__scrubber-row .fx-tchart__scrubber-lab { padding: 0 0 2px; text-align: left; }
  .fx-shell--v2 .fx-tchart__scrubber-row .fx-tchart__scrubber-lab::after { content: "Replay the day"; }

}

/* The rest of the race page, in the Board's language: the head as a
   racecard's, the value edge in words and bars, the runners table with
   its cloths, the signals as one ruled list marked with the Board's
   own signal marks. All of it under .fx-shell--v2, over the terminal's
   stylesheet; no markup changed (race_trace_chart.js reads the kind of
   each signal and the figures of each edge and hands them to the page
   as attributes and custom properties). */

/* The head: the race's time and course, the race's name, its facts as
   words, the star; then the way to the races either side. */
.fx-shell--v2 .fx-trace__header {
  position: relative;
  gap: 20px;
  margin-bottom: 14px;
  padding-bottom: 16px;
  border-bottom-color: var(--mfr-rule);
}

.fx-shell--v2 .fx-trace__eyebrow {
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.fx-shell--v2 .fx-trace__back { color: var(--mfr-ink-3); }

.fx-shell--v2 .fx-trace__title {
  gap: 12px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* The site's horse, in gold, leads the race's name. */
.fx-shell--v2 .fx-trace__title::before {
  content: "";
  flex: none;
  align-self: flex-start;
  width: 30px;
  height: 23px;
  margin-top: 7px;
  background: var(--mfr-gold);
  -webkit-mask: var(--fxv-horse) center / contain no-repeat;
  mask: var(--fxv-horse) center / contain no-repeat;
}

.fx-shell--v2 .fx-trace__time {
  font-size: 30px;
  font-weight: 700;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-trace__course { color: var(--mfr-ink); }

.fx-shell--v2 .fx-trace__deck {
  margin-top: 6px;
  font-size: 15px;
  color: var(--mfr-ink-2);
}

/* The facts, as the Board writes them: words with a dot between. */
.fx-shell--v2 .fx-trace__meta {
  gap: 0;
  font-size: 13.5px;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-trace__meta .fx-chip {
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-trace__meta .fx-chip .fx-num { font-weight: 700; color: var(--mfr-ink); }

.fx-shell--v2 .fx-trace__meta .fx-chip + .fx-chip::before {
  content: "·";
  margin: 0 8px;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-trace__star-slot { padding-left: 16px; }

.fx-shell--v2 .fx-trace__star-slot .fx-board__star {
  width: 34px;
  height: 34px;
  border: 1px solid var(--mfr-rule-2);
  border-radius: 999px;
  background: var(--mfr-card);
  font-size: 17px;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-trace__star-slot .fx-board__star--on {
  background: var(--mfr-gold-wash);
  border-color: var(--mfr-gold-line);
  color: var(--mfr-gold);
}

/* The page's order is the same for every race: the head, then the
   races either side, then the rest (a finished race's result and
   verdict come after them, not before). */
.fx-shell--v2 .fx-trace {
  display: flex;
  flex-direction: column;
}

.fx-shell--v2 .fx-trace > * { min-width: 0; }
.fx-shell--v2 .fx-trace__header { order: -2; }
.fx-shell--v2 .fx-trace__nav { order: -1; }

/* The races either side: a matched pair of cards, the same inside,
   "Previous race" or "Next race" over the time and the course, the
   arrow at the outer edge of each. */
.fx-shell--v2 .fx-trace__nav {
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.fx-shell--v2 .fx-trace__nav-chip {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas:
    "arrow label label"
    "arrow time  course";
  align-items: center;
  gap: 1px 8px;
  width: 100%;
  max-width: 320px;
  min-height: 52px;
  padding: 8px 14px;
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule-2);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-trace__nav-chip--next {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "label label  arrow"
    "time  course arrow";
}

.fx-shell--v2 .fx-trace__nav-chip::before {
  grid-area: label;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-trace__nav-chip--prev::before { content: "Previous race"; }
.fx-shell--v2 .fx-trace__nav-chip--next::before { content: "Next race"; }

.fx-shell--v2 .fx-trace__nav-arrow {
  grid-area: arrow;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-trace__nav-time {
  grid-area: time;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-trace__nav-course {
  grid-area: course;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-trace__nav-hint {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-tchart__kbd {
  font-family: var(--font-body);
  font-size: 11px;
  border-radius: 4px;
}

@media (hover: hover) {
  .fx-shell--v2 .fx-trace__nav-chip:hover {
    background: var(--mfr-gold-wash);
    border-color: var(--mfr-gold-line);
    color: var(--mfr-ink);
  }

  .fx-shell--v2 .fx-trace__nav-chip:hover .fx-trace__nav-arrow { color: var(--mfr-ink); }
  .fx-shell--v2 .fx-trace__star-slot .fx-board__star:hover { border-color: var(--mfr-gold); color: var(--mfr-gold-ink); }
}

/* The value edge: where the AI and the market disagree, a runner a
   row, the two chances as bars beside each other (the AI's gold, the
   market's ink) and the gap in words. */
.fx-shell--v2 .fx-vedge { padding: 16px 20px 6px; }

.fx-shell--v2 .fx-vedge__head {
  display: block;
  margin-bottom: 6px;
  padding-bottom: 0;
  border-bottom: 0;
}

.fx-shell--v2 .fx-vedge__deck {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-vedge__deck--masked { gap: 8px 12px; }

.fx-shell--v2 .fx-vedge__cta {
  padding: 4px 11px;
  background: var(--mfr-gold-wash);
  border: 1px solid var(--mfr-gold-line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--mfr-gold-ink);
}

.fx-shell--v2 .fx-vedge__grid { gap: 0 32px; }

/* Below 1024px the race page is one column, as on a phone: beside the
   rail a tablet gave the runners table 420px, too little for its
   columns (on a replay the names went to nothing and ran over the
   figures), and the value edge's two lists too little for a row and
   its finish. */
@media (max-width: 1023px) {
  .fx-shell--v2 .fx-trace__grid,
  .fx-shell--v2 .fx-vedge__grid { grid-template-columns: minmax(0, 1fr); }
}

.fx-shell--v2 .fx-vedge__rail {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.fx-shell--v2 .fx-vedge__rail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--mfr-rule);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-vedge__rail-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-vedge__rail--up .fx-vedge__rail-label::before { background: var(--mfr-green); }
.fx-shell--v2 .fx-vedge__rail--down .fx-vedge__rail-label::before { background: var(--fx-down); }

.fx-shell--v2 .fx-vedge__list { gap: 0; }

.fx-shell--v2 .fx-vedge__row {
  grid-template-columns: 26px minmax(0, 1fr) minmax(120px, 170px) 44px auto;
  grid-template-areas:
    "num horse ai  odds edge"
    "num horse mkt odds edge";
  align-items: center;
  gap: 3px 12px;
  padding: 10px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--mfr-rule);
  border-radius: 0;
  font-size: 13px;
}

.fx-shell--v2 .fx-vedge__row:first-child { border-top: 0; }
.fx-shell--v2 .fx-vedge__row--up,
.fx-shell--v2 .fx-vedge__row--down { border-left: 0; }

.fx-shell--v2 .fx-vedge__num { grid-area: num; }
.fx-shell--v2 .fx-vedge__horse { grid-area: horse; font-weight: 600; }
.fx-shell--v2 .fx-vedge__horse + .fx-vedge__prob { grid-area: ai; }
.fx-shell--v2 .fx-vedge__prob + .fx-vedge__prob { grid-area: mkt; }

.fx-shell--v2 .fx-vedge__prob {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11.5px;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-vedge__prob-lab {
  flex: none;
  width: 42px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-vedge__prob .fx-num {
  flex: none;
  width: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mfr-ink);
}

/* The bar: the chance, of the whole. */
.fx-shell--v2 .fx-vedge__prob::after {
  content: "";
  flex: 1 1 auto;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--fxv-bar, var(--mfr-ink-2)) 0 var(--pct, 0%), var(--mfr-rule) 0);
}

.fx-shell--v2 .fx-vedge__horse + .fx-vedge__prob { --fxv-bar: var(--mfr-gold); }

.fx-shell--v2 .fx-vedge__odds {
  grid-area: odds;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-vedge__edge {
  grid-area: edge;
  display: grid;
  justify-items: end;
  min-width: 96px;
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
}

.fx-shell--v2 .fx-vedge__edge::before {
  content: attr(data-words);
  font-size: 11px;
  font-weight: 500;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-vedge__edge--up { color: var(--mfr-green-dark); }
.fx-shell--v2 .fx-vedge__edge--down { color: var(--fx-down); }

.fx-shell--v2 .fx-vedge__rail-empty {
  padding: 10px 0;
  font-size: 12.5px;
  font-style: normal;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-vedge__row.fx-focus-match {
  background: var(--mfr-gold-wash);
  outline: 0;
  box-shadow: none;
}

/* The runners table: the favourite's cloth is gold, as on the chart. */
.fx-shell--v2 .fx-trace__runner--fav .fx-trace__rcol--num {
  background: var(--mfr-gold);
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-trace__trainer { font-size: 12px; color: var(--mfr-ink-3); }
.fx-shell--v2 .fx-trace__rcol--jockey { font-size: 13.5px; color: var(--mfr-ink-2); }
.fx-shell--v2 .fx-trace__rcol--opened { color: var(--mfr-ink-3); }

/* The signals: one list, ruled; each led by the Board's mark for its
   kind, in the kind's colour; the title, the runner, the detail. */
.fx-shell--v2 .fx-trace__signals {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule);
  border-radius: 14px;
  box-shadow: var(--mfr-shadow-1);
  overflow: hidden;
}

.fx-shell--v2 .fx-trace__signal {
  background: var(--mfr-card);
  border: 0;
  border-top: 1px solid var(--mfr-rule);
  border-radius: 0;
}

.fx-shell--v2 .fx-trace__signal:first-child { border-top: 0; }

.fx-shell--v2 .fx-trace__signal-summary {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 14px;
}

.fx-shell--v2 .fx-trace__signal-summary--static { grid-template-columns: 32px minmax(0, 1fr); }

@media (hover: hover) {
  .fx-shell--v2 .fx-trace__signal-summary:hover { background: var(--mfr-warm); }
  .fx-shell--v2 .fx-trace__signal-summary--static:hover { background: transparent; }
}

/* The kind's mark: the chip's word is kept for a reader who hears the
   page; the eye gets the Board's mark, in the middle of the circle. The
   word is laid under the symbol, not beside it: beside, the circle's
   grid gave each a row and the symbol rode 5px high. */
.fx-shell--v2 .fx-trace__signal-chip {
  --fxv-signal: var(--fxv-signal-dot);
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--mfr-warm);
  border: 0;
  border-radius: 50%;
  font-size: 0;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-trace__signal-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  background: currentColor;
  -webkit-mask: var(--fxv-signal) center / contain no-repeat;
  mask: var(--fxv-signal) center / contain no-repeat;
}

.fx-shell--v2 .fx-trace__signal[data-kind="cut"] .fx-trace__signal-chip { --fxv-signal: var(--fxv-signal-down); background: var(--mfr-green-wash); color: var(--mfr-green-dark); }
.fx-shell--v2 .fx-trace__signal[data-kind="drift"] .fx-trace__signal-chip { --fxv-signal: var(--fxv-signal-up); background: var(--mfr-red-wash); color: var(--fx-down); }
.fx-shell--v2 .fx-trace__signal[data-kind="leader"] .fx-trace__signal-chip { --fxv-signal: var(--fxv-signal-award); background: var(--mfr-gold-wash); color: var(--mfr-gold-ink); }
.fx-shell--v2 .fx-trace__signal[data-kind="coordinated"] .fx-trace__signal-chip { --fxv-signal: var(--fxv-signal-pulse); }
.fx-shell--v2 .fx-trace__signal[data-kind="jockey"] .fx-trace__signal-chip { --fxv-signal: var(--fxv-signal-cap); }
.fx-shell--v2 .fx-trace__signal[data-kind="class"] .fx-trace__signal-chip { --fxv-signal: var(--fxv-signal-drop); }
.fx-shell--v2 .fx-trace__signal[data-kind="going"] .fx-trace__signal-chip { --fxv-signal: var(--fxv-signal-going); }

.fx-shell--v2 .fx-trace__signal-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-trace__signal-runner { font-weight: 500; color: var(--mfr-ink-3); }

.fx-shell--v2 .fx-trace__signal-desc {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-trace__signal-earlier {
  border-color: var(--mfr-rule-2);
  font-size: 11px;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-trace__signal-evidence {
  margin: 0;
  padding: 0 14px 12px 58px;
  background: none;
  border: 0;
}

.fx-shell--v2 .fx-trace__signal-evidence-key {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-trace__signal-evidence-val { font-size: 12.5px; color: var(--mfr-ink-2); }

/* A visitor's line under a signal: the Board's sign-up words. */
.fx-shell--v2 .fx-trace__signal-evidence-cta {
  padding: 8px 14px 8px 58px;
  background: none;
  border-top: 1px solid var(--mfr-rule);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--mfr-gold-ink);
}

@media (hover: hover) {
  .fx-shell--v2 .fx-trace__signal-evidence-cta:hover { background: var(--mfr-gold-wash); text-decoration: none; }
}

.fx-shell--v2 .fx-trace__signal.fx-focus-match {
  background: var(--mfr-gold-wash);
  outline: 0;
  box-shadow: none;
}

.fx-shell--v2 .fx-trace__signal.fx-focus-match .fx-trace__signal-summary { background: transparent; }

.fx-shell--v2 .fx-focus-dim { opacity: 0.4; filter: none; }

.fx-shell--v2 .fx-trace__signals-more {
  margin-top: 10px;
  background: var(--mfr-card);
  border-color: var(--mfr-rule-2);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-trace__section-title--sub { margin-top: 24px; }

/* The events, when there are none: a quiet line on a card. */
.fx-shell--v2 .fx-trace__empty {
  padding: 12px 14px;
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule);
  border-radius: 14px;
  font-size: 12.5px;
  font-style: normal;
  color: var(--mfr-ink-3);
}

/* A finished race's result, above the chart: on the gold wash, flat. */
.fx-shell--v2 .fx-replay__callout {
  gap: 14px;
  margin: 0 0 14px;
  padding: 14px 18px;
  background: var(--mfr-gold-wash);
  border: 1px solid var(--mfr-gold-line);
  border-radius: 14px;
}

.fx-shell--v2 .fx-replay__callout-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-gold-ink);
}

.fx-shell--v2 .fx-replay__callout-winner { font-size: 15px; font-weight: 700; }

.fx-shell--v2 .fx-replay__callout-pos {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--mfr-gold-ink);
}

.fx-shell--v2 .fx-replay__callout-sp { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--mfr-ink); }
.fx-shell--v2 .fx-replay__callout-jockey { font-size: 12.5px; color: var(--mfr-ink-3); white-space: nowrap; }
.fx-shell--v2 .fx-replay__callout-places { font-size: 12.5px; color: var(--mfr-ink-2); }
.fx-shell--v2 .fx-replay__callout-place .fx-num:first-child { font-weight: 700; color: var(--mfr-ink-3); }

/* A phone: the star at the head's corner, the facts under the name,
   the edge rows stacked, the races either side as "Previous 17:40". */
@media (max-width: 767px) {
  .fx-shell--v2 .fx-trace__header {
    gap: 10px;
    padding-right: 44px;
    padding-bottom: 14px;
    margin-bottom: 12px;
  }

  /* A long course goes under the time, clear of the star. */
  .fx-shell--v2 .fx-trace__title { flex-wrap: wrap; }

  .fx-shell--v2 .fx-trace__eyebrow { margin-bottom: 10px; }
  .fx-shell--v2 .fx-trace__title { gap: 10px; font-size: 24px; }
  .fx-shell--v2 .fx-trace__time { font-size: 24px; }
  .fx-shell--v2 .fx-trace__title::before { width: 24px; height: 18px; margin-top: 6px; }
  .fx-shell--v2 .fx-trace__deck { font-size: 14px; }
  .fx-shell--v2 .fx-trace__meta { font-size: 13px; }
  .fx-shell--v2 .fx-trace__meta .fx-chip { font-size: 13px; }

  .fx-shell--v2 .fx-trace__star-slot {
    position: absolute;
    top: -3px;
    right: 0;
    margin: 0;
    padding: 0;
  }

  .fx-shell--v2 .fx-trace__nav { gap: 10px; margin-bottom: 14px; }
  .fx-shell--v2 .fx-trace__nav-chip { max-width: none; min-height: 56px; padding: 8px 12px; }

  .fx-shell--v2 .fx-vedge { padding: 14px 14px 4px; }
  .fx-shell--v2 .fx-vedge__grid { gap: 0; }

  .fx-shell--v2 .fx-vedge__row {
    gap: 4px 10px;
    padding: 10px 0;
  }

  .fx-shell--v2 .fx-vedge__edge { justify-items: start; min-width: 0; text-align: left; }
  .fx-shell--v2 .fx-vedge__edge::before { display: inline; margin-right: 4px; }
  .fx-shell--v2 .fx-vedge__edge { display: block; }

  .fx-shell--v2 .fx-trace__signal-summary { gap: 10px; padding: 12px; }
  .fx-shell--v2 .fx-trace__signal-summary--static { grid-template-columns: 32px minmax(0, 1fr); }
  .fx-shell--v2 .fx-trace__signal-evidence,
  .fx-shell--v2 .fx-trace__signal-evidence-cta { padding-left: 54px; }
}

/* A finished race's verdict, under the result: who the AI and the
   market went for and how each fared, in words; and the "replay" word
   in the head's eyebrow, as a quiet pill. */
.fx-shell--v2 .fx-replay__badge {
  margin-left: 10px;
  padding: 2px 9px;
  background: var(--mfr-gold-wash);
  border-color: var(--mfr-gold-line);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mfr-gold-ink);
}

.fx-shell--v2 .fx-verdict {
  margin: 0 0 14px;
  padding: 14px 18px;
  border-color: var(--mfr-rule);
  border-radius: 14px;
  box-shadow: var(--mfr-shadow-1);
}

.fx-shell--v2 .fx-verdict__eyebrow {
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-verdict__grid {
  gap: 8px 28px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mfr-rule);
}

.fx-shell--v2 .fx-verdict__cell { gap: 8px; }

.fx-shell--v2 .fx-verdict__label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-verdict__name { font-size: 13.5px; font-weight: 700; }

.fx-shell--v2 .fx-verdict__match {
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.fx-shell--v2 .fx-verdict__match--win { background: var(--mfr-green-wash); color: var(--mfr-green-dark); }
.fx-shell--v2 .fx-verdict__match--placed { background: var(--mfr-gold-wash); color: var(--mfr-gold-ink); }
.fx-shell--v2 .fx-verdict__match--miss { background: var(--mfr-warm); color: var(--mfr-ink-2); }
.fx-shell--v2 .fx-verdict__cell--edge { border-left-color: var(--mfr-gold); }
.fx-shell--v2 .fx-verdict__edge-hit { color: var(--mfr-gold-ink); }

.fx-shell--v2 .fx-verdict__narrative {
  font-size: 14px;
  font-style: normal;
  color: var(--mfr-ink-2);
}

/* The race page under a finger: everything pressable is 44px to press,
   the runners table keeps the jockey, a finished race's words are the
   Board's, and the lines that wrapped badly wrap well. */

/* A finished race's scorecard and the outcome of each signal, in
   words: "3 of 6 signals cashed", "Fired", "Missed". */
.fx-shell--v2 .fx-scorecard {
  margin: 0 0 12px;
  padding: 6px 12px;
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule-2);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-scorecard__pos,
.fx-shell--v2 .fx-scorecard__total {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-scorecard__pos { color: var(--mfr-green-dark); }

.fx-shell--v2 .fx-scorecard__of,
.fx-shell--v2 .fx-scorecard__label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-outcome {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: lowercase;
}

.fx-shell--v2 .fx-outcome::first-letter { text-transform: uppercase; }
.fx-shell--v2 .fx-outcome--fired { background: var(--mfr-green-wash); color: var(--mfr-green-dark); }
.fx-shell--v2 .fx-outcome--missed { background: var(--mfr-red-wash); color: var(--fx-down); }

/* The value edge's finish on a replay has its own column. */
.fx-shell--v2 .fx-vedge__row {
  grid-template-columns: 26px minmax(0, 1fr) minmax(120px, 170px) 44px auto auto;
  grid-template-areas:
    "num horse ai  odds edge fin"
    "num horse mkt odds edge fin";
}

.fx-shell--v2 .fx-vedge__fin { grid-area: fin; }

/* The winner's line reads as a sentence, so the jockey follows the
   price rather than falling to a line of its own. */
.fx-shell--v2 .fx-replay__callout-winner { display: block; line-height: 1.5; }
.fx-shell--v2 .fx-replay__callout-winner > * { margin-right: 8px; }

/* The name's link is as tall as its row to press: a block, so on a
   phone the name inside it can wrap rather than be cut. */
.fx-shell--v2 .fx-trace__horse-link {
  display: block;
  margin: -12px 0;
  padding: 12px 0;
}

/* Under a finger: 44px to press, and the switches as pills. */
@media (pointer: coarse) {
  .fx-shell--v2 .fx-trace__back {
    display: inline-block;
    padding: 14px 0;
    margin: -14px 0;
  }

  .fx-shell--v2 .fx-trace__star-slot .fx-board__star { width: 44px; height: 44px; }

  .fx-shell--v2 .fx-tchart__ai-toggle,
  .fx-shell--v2 .fx-tchart__copy {
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--mfr-rule-2);
    border-radius: 999px;
    font-size: 13px;
  }

  .fx-shell--v2 .fx-tchart__ai-toggle--on {
    background: var(--mfr-gold-wash);
    border-color: var(--mfr-gold);
  }

  .fx-shell--v2 .fx-tchart__live { height: 44px; }
  .fx-shell--v2 .fx-tchart__live-pause { width: 44px; height: 44px; font-size: 14px; }

  /* The horse at the post: a finger's width around it. */
  .fx-shell--v2 .fx-tchart__end::before {
    content: "";
    position: absolute;
    inset: -11px -8px;
  }

  .fx-shell--v2 .fx-tchart__marker-hit { stroke-width: 44; }

  .fx-shell--v2 .fx-tchart__scrubber { height: 44px; }
  .fx-shell--v2 .fx-tchart__scrubber::-webkit-slider-runnable-track { height: 5px; }
  .fx-shell--v2 .fx-tchart__scrubber::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9.5px; }
  .fx-shell--v2 .fx-tchart__scrubber::-moz-range-track,
  .fx-shell--v2 .fx-tchart__scrubber::-moz-range-progress { height: 5px; }
  .fx-shell--v2 .fx-tchart__scrubber::-moz-range-thumb { width: 18px; height: 18px; }

  .fx-shell--v2 .fx-tchart__tile { min-height: 44px; }
  .fx-shell--v2 .fx-tchart__readout-more,
  .fx-shell--v2 .fx-trace__signals-more { min-height: 44px; }
  .fx-shell--v2 .fx-trace__signal-summary { min-height: 56px; }
  .fx-shell--v2 .fx-vedge__cta { padding: 9px 14px; }
}

/* A phone: the facts on two tidy lines, the jockey under the horse. */
@media (max-width: 767px) {
  /* "Class 4 · Good · 9 runners" and, on its own line, the price checks. */
  .fx-shell--v2 .fx-trace__meta .fx-chip { white-space: nowrap; }
  .fx-shell--v2 .fx-trace__meta .fx-chip:nth-child(4) { flex-basis: 100%; margin-top: 2px; }
  .fx-shell--v2 .fx-trace__meta .fx-chip:nth-child(4)::before { content: none; }

  /* The runners table: the jockey has the line under the horse; the
     cloth a column wider than itself, so the name stands 12px clear of
     it (the shell's 24px column held the 26px cloth 4px from the name),
     and the head on the same columns, so "Horse" is over the names. */
  .fx-shell--v2 .fx-trace__runners-head,
  .fx-shell--v2 .fx-trace__runner,
  .fx-shell--v2 .fx-trace__runners--replay .fx-trace__runners-head,
  .fx-shell--v2 .fx-trace__runners--replay .fx-trace__runner {
    grid-template-columns: 32px minmax(0, 1fr) 32px 56px 40px;
  }

  .fx-shell--v2 .fx-trace__runner,
  .fx-shell--v2 .fx-trace__runners--replay .fx-trace__runner {
    grid-template-areas:
      "num horse  sr now move"
      "num jockey sr now move";
    row-gap: 1px;
    padding: 9px 10px;
  }

  .fx-shell--v2 .fx-trace__runner .fx-trace__rcol--num { grid-area: num; }
  .fx-shell--v2 .fx-trace__runner .fx-trace__rcol--horse { grid-area: horse; }
  .fx-shell--v2 .fx-trace__runner .fx-trace__rcol--sr { grid-area: sr; }
  .fx-shell--v2 .fx-trace__runner .fx-trace__rcol--odds { grid-area: now; }
  .fx-shell--v2 .fx-trace__runner .fx-trace__rcol--spark { grid-area: move; }

  .fx-shell--v2 .fx-trace__runner .fx-trace__rcol--jockey {
    display: block;
    grid-area: jockey;
    font-size: 12px;
    color: var(--mfr-ink-3);
  }

  /* The name in full, on two lines if it needs them (a single word too
     long for the line is broken, hyphenated where it can be): the
     terminal cut it with an ellipsis, and a link's padding mid-letter. */
  .fx-shell--v2 .fx-trace__runner .fx-trace__rcol--horse { overflow: visible; }

  .fx-shell--v2 .fx-trace__horse-name {
    overflow: visible;
    line-height: 1.25;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .fx-shell--v2 .fx-trace__runners-head .fx-trace__rcol--jockey { display: none; }
  .fx-shell--v2 .fx-trace__runner .fx-trace__rcol--opened { display: none; }
  .fx-shell--v2 .fx-trace__runner .fx-trace__rcol--fin { display: none; }

  /* The value edge's rows, stacked, the finish beside the gap. */
  .fx-shell--v2 .fx-vedge__row {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    grid-template-areas:
      "num  horse odds"
      "ai   ai    ai"
      "mkt  mkt   mkt"
      "edge edge  fin";
  }

  .fx-shell--v2 .fx-vedge__fin { justify-self: end; }

  .fx-shell--v2 .fx-scorecard { margin-bottom: 10px; }
}

/* ── 4. The Board ────────────────────────────────────────────────── */

.fxv-board { padding-top: 16px; }

.fxv-tools {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.fxv-tools__row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fxv-more { position: static; }

.fxv-more > summary {
  list-style: none;
  user-select: none;
}

.fxv-more > summary::-webkit-details-marker { display: none; }
.fxv-more[open] > summary .mfr-i { transform: rotate(180deg); }

/* The sheet hangs from the row, under the chips. */
.fxv-more__sheet {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 10px;
  width: min(520px, 100%);
  padding: 16px;
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule-2);
  border-radius: 14px;
  box-shadow: var(--mfr-shadow-3);
}

.fxv-more__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.fxv-more__label {
  width: 86px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mfr-ink-3);
}

.fxv-clear {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mfr-gold-ink);
  text-underline-offset: 3px;
}

.fxv-sort { margin-left: auto; }

.fxv-select {
  height: 36px;
  max-width: 100%;
  padding: 0 34px 0 12px;
  background:
    linear-gradient(45deg, transparent 50%, var(--mfr-ink-2) 50%) right 17px center / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--mfr-ink-2) 50%) right 11px center / 6px 6px no-repeat,
    var(--mfr-card);
  border: 1.5px solid var(--mfr-rule-2);
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mfr-ink);
  appearance: none;
  cursor: pointer;
}

/* The list is one card; a race is a row of it. */
.fxv-list {
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule);
  border-radius: 14px;
  box-shadow: var(--mfr-shadow-1);
  overflow: hidden;
}

/* The Board's own colours, beside the meeting page's tokens: the
   Fox's note (the pick's card) and the bookmaker's board (the price).
   The level of conviction has its colours, as the row's edge does,
   green for high, gold for medium and silver for low: the seal's ring,
   the saddle cloth and the run take them. */
.fxv-wrap {
  --fxv-note: #FDF8EA;
  --fxv-note-line: var(--mfr-gold-line);
  --fxv-board: var(--mfr-ink);
  --fxv-board-gold: #F2D46B;
  --fxv-level: var(--mfr-silver-line);
  --fxv-level-cloth: var(--mfr-silver);
  --fxv-level-ink: var(--mfr-ink);
}

.fxv-row--high {
  --fxv-level: var(--mfr-green);
  --fxv-level-cloth: var(--mfr-green);
  --fxv-level-ink: var(--mfr-white);
}

.fxv-row--medium {
  --fxv-level: var(--mfr-gold);
  --fxv-level-cloth: var(--mfr-gold);
}

.fxv-list__head,
.fxv-row {
  display: grid;
  grid-template-columns:
    28px                    /* star */
    70px                    /* time */
    minmax(0, 1fr)          /* race */
    minmax(0, 1.45fr)       /* the Fox's pick */
    92px                    /* price, result */
    180px                   /* conviction */
    80px;                   /* racecard */
  align-items: center;
  column-gap: 18px;
  padding: 14px 18px;
}

.fxv-list__head {
  padding-block: 10px;
  background: var(--mfr-warm);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mfr-ink-3);
}

/* The pick's head carries the Fox's mark, conviction's the horse; the
   price's sits over its board. */
.fxv-list__head > :nth-child(4),
.fxv-list__head > :nth-child(6) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.fxv-list__head > :nth-child(4) { color: var(--mfr-gold-ink); }

.fxv-list__head > :nth-child(4)::before,
.fxv-list__head > :nth-child(6)::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--fxv-fox-mark) center / contain no-repeat;
  mask: var(--fxv-fox-mark) center / contain no-repeat;
}

.fxv-list__head > :nth-child(6)::before {
  width: 19px;
  -webkit-mask-image: var(--fxv-horse);
  mask-image: var(--fxv-horse);
}

.fxv-list__head > :nth-child(5) { text-align: center; }

.fxv-row {
  position: relative;
  border-top: 1px solid var(--mfr-rule);
  font-variant-numeric: tabular-nums;
}

/* A row the filters have set aside, and the fold with none left in it
   (board_filters.js): the grid above would otherwise keep them shown. */
.fxv-row[hidden],
.fxv-done[hidden] { display: none; }

/* The finished races, folded: a band that opens them. */
.fxv-done__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-top: 1px solid var(--mfr-rule);
  background: var(--mfr-paper);
  font-size: 13px;
  font-weight: 700;
  color: var(--mfr-ink-2);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.fxv-done__bar::-webkit-details-marker { display: none; }

.fxv-done__won {
  padding: 1px 8px;
  background: var(--mfr-green-wash);
  border: 1px solid var(--mfr-green-line);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--mfr-green-dark);
}

.fxv-done__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--mfr-gold-ink);
}

.fxv-done__hide,
.fxv-done[open] .fxv-done__show { display: none; }
.fxv-done[open] .fxv-done__hide { display: inline; }
.fxv-done[open] .fxv-done__bar .mfr-i { transform: rotate(180deg); }

@media (hover: hover) {
  .fxv-done__bar:hover { background: var(--mfr-warm); }
}

/* The level is on the row's edge as well as in words. */
.fxv-row--high { box-shadow: inset 3px 0 0 var(--mfr-green); }
.fxv-row--medium { box-shadow: inset 3px 0 0 var(--mfr-gold); }

@media (hover: hover) {
  .fxv-row:hover { background: var(--mfr-warm); }
  .fxv-row:hover .fxv-row__pick { border-color: var(--mfr-gold); }
}

.fxv-row__link {
  font-weight: 700;
  color: var(--mfr-ink);
  text-decoration: none;
}

/* The course is the row's link: its box is the row. */
.fxv-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.fxv-row__link:focus-visible { outline: none; }

.fxv-row:has(.fxv-row__link:focus-visible) {
  outline: 2px solid var(--mfr-gold-ink);
  outline-offset: -2px;
}

/* What can be pressed on the row sits above that box. Nothing else on
   the row is positioned, so a press anywhere else is a press on the
   race. */
.fxv-star,
.fxv-row__card,
.fxv-conv__cta {
  position: relative;
  z-index: 1;
}

.fxv-star {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  font-size: 17px;
  color: var(--mfr-silver-line);
  cursor: pointer;
}

.fxv-star.fx-board__star--on { color: var(--mfr-gold); }

@media (hover: hover) {
  .fxv-star:hover { background: var(--mfr-gold-wash); color: var(--mfr-gold-ink); }
}

.fxv-row__time {
  display: grid;
  justify-items: start;
  gap: 4px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.fxv-row__next {
  padding: 1px 7px;
  background: var(--mfr-green-wash);
  border: 1px solid var(--mfr-green-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--mfr-green-dark);
  white-space: nowrap;
}

.fxv-row__race { min-width: 0; }

.fxv-row__course { font-size: 14.5px; }

/* Course, facts and name: a line each, in every row. */
.fxv-row__facts {
  display: block;
  font-size: 12.5px;
  color: var(--mfr-ink-3);
}

.fxv-row__name {
  margin-top: 1px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--mfr-ink-2);
}

/* The Fox's pick, as his note: a card on the gold wash, stamped at its
   left edge with his mark, the ring round the mark in the colour of
   his conviction. The horse and its rating on one line, the signals
   on the next, so every row's pick has the same two lines. */
.fxv-row__pick {
  --fxv-seal-ring: var(--fxv-level);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  row-gap: 3px;
  min-width: 0;
  padding: 7px 10px 7px 0;
  background: var(--fxv-note);
  border: 1px solid var(--fxv-note-line);
  border-radius: 12px;
  transition: border-color 0.15s;
}

/* The seal: the Fox's mark in gold on the ink, half over the card's
   edge. Drawn, not positioned, so a press on it is a press on the
   race. */
.fxv-row__pick::before {
  content: "";
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border-radius: 50%;
  background:
    var(--fxv-fox-seal) center / 19px 19px no-repeat,
    var(--fxv-board);
  box-shadow:
    0 0 0 2px var(--fxv-note),
    0 0 0 3.5px var(--fxv-seal-ring),
    0 1px 3px rgb(17 21 31 / 16%);
}

.fxv-row__horse {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--mfr-ink);
}

.fxv-row__sr {
  flex: none;
  margin-left: auto;
  padding: 1px 6px;
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule-2);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mfr-ink-3);
  white-space: nowrap;
}

/* The signals: the strongest on gold, the rest after it, each led by
   its own mark, then the count of the others. They fit the note's
   second line in all but a few rows; those take a third rather than
   cut a word. */
.fxv-row__signals {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
}

.fxv-chip {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
  color: var(--mfr-ink-2);
  --fxv-signal: var(--fxv-signal-dot);
}

.fxv-chip::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask: var(--fxv-signal) center / contain no-repeat;
  mask: var(--fxv-signal) center / contain no-repeat;
}

.fxv-chip--medium { font-weight: 600; color: var(--mfr-ink-3); }
.fxv-chip--weak { font-weight: 500; color: var(--mfr-ink-3); }

.fxv-chip--lead {
  padding: 0 8px;
  background: var(--mfr-gold-wash);
  border: 1px solid var(--mfr-gold-line);
  border-radius: 999px;
  color: var(--mfr-gold-ink);
}

.fxv-chip--lead::before { opacity: 1; }

/* A mark for each kind of signal (data-kind). */
.fxv-chip[data-kind="price_cut"] { --fxv-signal: var(--fxv-signal-down); }
.fxv-chip[data-kind="price_drift"] { --fxv-signal: var(--fxv-signal-up); }
.fxv-chip[data-kind="coordinated_move"] { --fxv-signal: var(--fxv-signal-pulse); }
.fxv-chip[data-kind="going_match"] { --fxv-signal: var(--fxv-signal-going); }
.fxv-chip[data-kind="class_drop"] { --fxv-signal: var(--fxv-signal-drop); }
.fxv-chip[data-kind="jockey_upgrade"] { --fxv-signal: var(--fxv-signal-cap); }
.fxv-chip[data-kind="market_leader"] { --fxv-signal: var(--fxv-signal-award); }

.fxv-row__more {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mfr-ink-3);
}

/* A race without a pick: no card and no seal. */
.fxv-row__pick:not(:has(.fxv-row__horse)) {
  padding: 0;
  background: none;
  border: 0;
}

.fxv-row__pick:not(:has(.fxv-row__horse))::before { content: none; }

/* The price on a bookmaker's board: gold figures on the ink, the same
   width in every row so the column reads straight down. A finished
   race's result hangs under its board. */
.fxv-row__price {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
}

.fxv-price {
  order: -1;
  display: grid;
  place-items: center;
  min-width: 66px;
  height: 38px;
  padding: 0 10px;
  background: var(--fxv-board);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgb(212 175 55 / 32%);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fxv-board-gold);
  white-space: nowrap;
}

.fxv-row__none { color: var(--mfr-ink-3); }

.fxv-result {
  min-width: 66px;
  padding: 2px 6px;
  background: var(--mfr-warm);
  border: 1px solid var(--mfr-rule-2);
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--mfr-ink-2);
  white-space: nowrap;
}

.fxv-result--won {
  background: var(--mfr-green);
  border-color: var(--mfr-green);
  color: var(--mfr-white);
}

.fxv-result--placed {
  background: var(--mfr-silver);
  border-color: var(--mfr-silver-line);
  color: var(--mfr-ink);
}

/* Conviction, on the course. The figure is on a saddle cloth in the
   level's colours; beside it is the run: the site's horse as far along
   the course as the Fox's conviction takes him, past a pole at each
   quarter, to the winning post at a hundred. The same cloth and the
   same length of course in every row, so the column reads down like a
   field in running. Drawn, not positioned, so a press on any of it is
   a press on the race. */
.fxv-conv__top {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}

/* The saddle cloth: the figure on the level's colour, stitched inside
   its edge. */
.fxv-conv__pct {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 30px;
  background: var(--fxv-level-cloth);
  border-radius: 4px 4px 9px 9px;
  box-shadow: inset 0 0 0 1px var(--fxv-level);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fxv-level-ink);
}

/* The course: the going, a pole at each quarter and the winning post,
   a gold disc on the ink. Its last 4px are the post's, so a hundred
   finishes on it. */
.fxv-conv__bar {
  --fxv-going: linear-gradient(var(--mfr-rule), var(--mfr-rule));
  display: flex;
  align-items: flex-end;
  height: 28px;
  padding-right: 4px;
  background:
    radial-gradient(circle closest-side, var(--mfr-gold) 50%, var(--mfr-ink) 58% 82%, transparent 92%) right top / 10px 10px no-repeat,
    linear-gradient(var(--mfr-ink-2), var(--mfr-ink-2)) right 4px bottom 3px / 2px 20px no-repeat,
    linear-gradient(var(--mfr-rule-2), var(--mfr-rule-2)) left 25% bottom 7px / 1px 6px no-repeat,
    linear-gradient(var(--mfr-rule-2), var(--mfr-rule-2)) left 50% bottom 7px / 1px 6px no-repeat,
    linear-gradient(var(--mfr-rule-2), var(--mfr-rule-2)) left 75% bottom 7px / 1px 6px no-repeat,
    var(--fxv-going) left bottom 3px / calc(100% - 4px) 4px no-repeat;
}

/* The run: the level's colour along the going, from the start to the
   horse. */
.fxv-conv__fill {
  display: flex;
  flex: none;
  justify-content: flex-end;
  align-items: flex-end;
  min-width: 26px;
  max-width: 100%;
  height: 100%;
  background: linear-gradient(var(--fxv-level), var(--fxv-level)) left bottom 3px / 100% 4px no-repeat;
}

/* The horse, the site's own, his nose on the figure. */
.fxv-conv__fill::after,
.fxv-conv--masked .fxv-conv__bar::before {
  content: "";
  flex: none;
  width: 26px;
  height: 21px;
  margin-bottom: 5px;
  background: var(--fxv-runner, var(--mfr-ink));
  -webkit-mask: var(--fxv-horse) center / contain no-repeat;
  mask: var(--fxv-horse) center / contain no-repeat;
}

.fxv-conv__note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--mfr-ink-3);
}

/* A visitor's: the cloth is padlocked, in the level's colours (the
   level is shown, the figure is not), and the horse waits at the
   start of a course still to be run. The prompt is under them. */
.fxv-conv--masked .fxv-conv__pct { font-size: 0; }

.fxv-conv--masked .fxv-conv__pct::before {
  content: "";
  width: 13px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--fxv-lock) center / contain no-repeat;
  mask: var(--fxv-lock) center / contain no-repeat;
}

.fxv-conv--masked .fxv-conv__bar {
  --fxv-going: repeating-linear-gradient(90deg, var(--mfr-rule-2) 0 5px, transparent 5px 9px);
  --fxv-runner: var(--mfr-ink-3);
}

.fxv-conv__cta {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mfr-gold-ink);
  text-underline-offset: 3px;
}

.fxv-row__links {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.fxv-row__state {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mfr-ink-3);
}

.fxv-row__card {
  padding: 3px 10px;
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mfr-ink-2);
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .fxv-row__card:hover {
    background: var(--mfr-gold-wash);
    border-color: var(--mfr-gold-line);
    color: var(--mfr-ink);
  }
}

/* A race that has gone: on the paper, in the quieter ink. Its note is
   plain, its board slate and its cloth faded, except where the Fox won
   it: that note keeps a green edge and its seal a green ring. */
.fxv-row--off { background: var(--mfr-paper); }

.fxv-row--off .fxv-row__time,
.fxv-row--off .fxv-row__link,
.fxv-row--off .fxv-row__horse { color: var(--mfr-ink-2); }

.fxv-row--off .fxv-row__pick {
  --fxv-seal-ring: var(--mfr-rule-2);
  background: var(--mfr-card);
  border-color: var(--mfr-rule-2);
}

.fxv-row--off:has(.fxv-result--won) .fxv-row__pick {
  --fxv-seal-ring: var(--mfr-green);
  border-color: var(--mfr-green-line);
}

.fxv-row--off .fxv-price {
  background: var(--mfr-ink-2);
  box-shadow: none;
  color: var(--mfr-white);
}

.fxv-row--off .fxv-conv {
  --fxv-level: var(--mfr-silver-line);
  --fxv-level-cloth: var(--mfr-warm);
  --fxv-level-ink: var(--mfr-ink-2);
  --fxv-runner: var(--mfr-ink-3);
}

.fxv-empty {
  padding: 48px 24px;
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule);
  border-radius: 14px;
  text-align: center;
}

.fxv-empty__title {
  font-size: 18px;
  font-weight: 700;
}

.fxv-empty__copy {
  margin-top: 6px;
  color: var(--mfr-ink-2);
}

.fxv-empty a { color: var(--mfr-gold-ink); }

/* The Board's drawings, as data: the Fox's mark (the footer's own),
   in gold for his seal and as a mask for the pick's head; the horse
   (the homepage's, redrawn to whole units) and a padlock, for the
   course; and a line mark for each kind of signal (most from the
   Feather set; the cap is the meeting page's). Kept here so the
   stylesheet needs no file of its own beside it. */
.fxv-wrap {
  --fxv-fox-seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23F2D46B' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.8L5.8 2.6H12.2L15 6.8L12.8 14.4H5.2L3 6.8Z' stroke-width='1.3'/%3E%3Cpath d='M5.8 2.6L7.5 7M12.2 2.6L10.5 7M8.2 11.6C8.7 12.3 9.3 12.3 9.8 11.6M7.6 10.55H10.4' stroke-width='1.1'/%3E%3Ccircle cx='7' cy='9.1' r='0.95' fill='%23F2D46B' stroke='none'/%3E%3Ccircle cx='11' cy='9.1' r='0.95' fill='%23F2D46B' stroke='none'/%3E%3C/svg%3E");
  --fxv-fox-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.8L5.8 2.6H12.2L15 6.8L12.8 14.4H5.2L3 6.8Z' stroke-width='1.5'/%3E%3Cpath d='M5.8 2.6L7.5 7M12.2 2.6L10.5 7M8.2 11.6C8.7 12.3 9.3 12.3 9.8 11.6' stroke-width='1.3'/%3E%3Ccircle cx='7' cy='9.1' r='1.1' fill='black' stroke='none'/%3E%3Ccircle cx='11' cy='9.1' r='1.1' fill='black' stroke='none'/%3E%3C/svg%3E");
  --fxv-horse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 183 145'%3E%3Cpath fill-rule='evenodd' d='M22 141c0-1-2-2-3-3-1-2-2-4-3-5-2 0-2-1-2-2 0-1 2-6 3-7 1 0 2-2 2-3 2-6 6-10 9-12 4-2 7-5 8-9 2-4 2-3-2-12-2-5-3-10-2-17 0-3 0-4-1-5 0-1-2-1-3 0 0 1-2 2-3 3-2 3-5 6-6 9 0 0-1 2-3 4-2 2-3 3-6 3-5 2-5 2-6 1-2-2-2-3 1-6 1-2 2-4 3-5 1-3 5-8 7-9 2-1 10-3 16-4 6-1 8-1 12-3 1-1 2-2 3-2 0 0 3-1 5-2 5-1 5-1 14-1 11 0 12 0 11-5-1-3 1-4 3-4 5 0 5-2 1-4-2-1-3-2-3-2 0 0-2-1-3-2-4-1-7-4-8-7-1-2-1-2 1-5 1-3 4-7 6-8 1-1 3-2 3-2 1-1 3-2 4-2 2-1 4-2 5-2 3-2 15-2 19-1 2 1 3 1 3-2 2-4 8-6 13-3 3 3 5 9 2 11-1 1-2 2-3 3-1 2-1 2-7 2-3 0-4 1-5 2-1 0-3 1-3 1-1 0-1 0-1 2 0 1 0 2 3 4 1 2 3 3 3 3 1 0 2 1 3 1 2 2 4 2 5 0 1-1 6-5 8-6 1 0 2 0 3 0 2 0 4-1 6-1 2-1 3-1 7-1 5 0 7-1 9-3 4-3 8-2 10 3 0 2 1 4 4 6 5 5 5 6 5 9-1 2 0 3 1 4 1 1 2 3 3 5 1 1 3 3 4 4 4 4 3 9-1 11-3 1-6 1-8-1-1-1-3-3-4-3-1-1-3-2-4-3-1-1-3-2-5-2-2-1-5-2-6-3-1 0-2-1-3-1-1 0-6 5-6 7 0 0-1 2-2 3-2 4-2 5 0 9 1 4 1 6-1 11-2 3-2 5-2 5 0 1 5 6 6 6 1 0 2 1 3 1 1 1 2 2 3 3 2 1 4 3 4 5 1 1 2 3 2 4 1 1 3 3 4 5l2 4-1 1c-1 1-2 2-2 3-1 1-2 3-3 4 0 1-2 3-2 4-1 1-5 3-8 3-1 0-3-2-3-3 0-1 2-3 5-5 3-2 6-6 6-7 0-1-1-3-1-4-1-1-2-3-3-4 0-1-1-2-2-3-1 0-2-1-2-1 0-1-4-2-13-2l-9 0-2 2c-1 1-3 4-3 5-1 3-4 5-8 10-7 7-8 8-8 11 0 3-1 6-2 6-2 1-7-3-7-5 0-4 6-11 10-14 1 0 2-1 2-1 0 0 1-2 2-2 2-3 3-5 3-10 0-8-1-9-15-9-11 0-18-1-21-3-3-1-4 0-5 3-1 3-3 7-5 10-2 2-3 4-3 8 0 4 0 3 5 9 1 1 3 4 5 6 2 1 4 3 5 4 1 1 4 3 5 5 4 3 5 3 3 5-2 2-6 0-9-3-1-1-2-3-2-3 0 0-1-1-2-1-1-1-3-2-4-4-4-4-6-6-10-11-5-5-6-6-6-10 1-3 0-4-3-4-1 0-2 0-3 2 0 1-1 2-1 2-1 0-2 1-3 2-1 0-3 2-4 2-6 3-13 12-13 16 0 2 1 3 4 7 1 1 3 3 3 3 0 2-4 3-7 2zM94 52c1-1 1-2 0-2-2 0-4 1-3 2 0 1 1 1 3 0zM99 47c2-2 0-4-2-1-1 0-1 1-1 2 0 1 2 1 3-1zM104 42c3-3 3-4 0-5-2-1-4-2-4-2 0-1-1-2-2-2-1 0-2-1-2-3-1-2-4-4-6-4-3 0-2 3 2 8 2 2 4 4 4 5 2 3 4 5 5 5 0 0 2-1 3-2z'/%3E%3C/svg%3E");
  --fxv-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M4.6 8.2V5.6a3.4 3.4 0 0 1 6.8 0v2.6' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath fill-rule='evenodd' d='M3.5 8h9a2 2 0 0 1 2 2v5.5a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2zM8 10.6a1.4 1.4 0 0 0-.7 2.61V15h1.4v-1.79A1.4 1.4 0 0 0 8 10.6z'/%3E%3C/svg%3E");
  --fxv-signal-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");
  --fxv-signal-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 18 13.5 8.5 8.5 13.5 1 6'/%3E%3Cpolyline points='17 18 23 18 23 12'/%3E%3C/svg%3E");
  --fxv-signal-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
  --fxv-signal-pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
  --fxv-signal-going: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
  --fxv-signal-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 13 12 18 17 13'/%3E%3Cpolyline points='7 6 12 11 17 6'/%3E%3C/svg%3E");
  --fxv-signal-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16a8 8 0 0 1 16 0z'/%3E%3Cline x1='20' y1='16' x2='23' y2='16'/%3E%3Cline x1='12' y1='8' x2='12' y2='6.5'/%3E%3C/svg%3E");
  --fxv-signal-award: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E");
  /* A non-runner's reshuffle, which the set has no mark for: two arrows
     passing. */
  --fxv-signal-shuffle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 3 21 8 16 13'/%3E%3Cline x1='21' y1='8' x2='4' y2='8'/%3E%3Cpolyline points='8 11 3 16 8 21'/%3E%3Cline x1='3' y1='16' x2='20' y2='16'/%3E%3C/svg%3E");
}

/* ── 5. Laptop, tablet and phone ─────────────────────────────────── */

/* A laptop (1024 to 1279px): the full row of columns needs the 1280px
   column, so a race is two lines. The race beside its conviction; the
   Fox's note under the race, with its board beside it and the
   Racecard under the conviction. */
@media (max-width: 1279px) {
  .fxv-list__head { display: none; }

  .fxv-row {
    grid-template-columns: 28px 64px minmax(0, 1fr) 82px minmax(160px, 196px);
    grid-template-areas:
      "star time race  race  conv"
      "star time pick  price links";
    row-gap: 10px;
    column-gap: 18px;
  }

  .fxv-star { grid-area: star; align-self: start; }
  .fxv-row__time { grid-area: time; align-self: start; padding-top: 2px; }
  .fxv-row__race { grid-area: race; }
  .fxv-row__pick { grid-area: pick; margin-left: 16px; }
  .fxv-row__price { grid-area: price; }
  .fxv-row__conv { grid-area: conv; }
  .fxv-row__links { grid-area: links; grid-auto-flow: column; align-items: center; gap: 8px; }
}

/* A tablet or a phone: a card a race. The race and its time; the
   Fox's note the width of the card, its board pinned in the note's top
   corner (a finished race's result under the board); conviction with
   Racecard beside it. */
@media (max-width: 1023px) {
  .fxv-row {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    grid-template-areas:
      "star race  time"
      "star pick  pick"
      "star conv  links";
    row-gap: 10px;
    column-gap: 10px;
    padding: 14px 14px 14px 10px;
  }

  .fxv-row__time { justify-items: end; padding-top: 0; }
  .fxv-row__links { align-self: end; }
  .fxv-row__state { display: none; }

  /* The board shares the note's place and stands in its top corner;
     the note's first line (and a finished race's second, which the
     result reaches) leaves it room. */
  .fxv-row__price {
    grid-area: pick;
    justify-self: end;
    align-self: start;
    margin: 8px 10px 0 0;
  }

  .fxv-row__pick {
    align-items: start;
    padding-block: 8px 9px;
  }

  .fxv-row__pick::before { align-self: center; }

  .fxv-row__horse {
    align-items: center;
    min-height: 36px;
    padding-right: 78px;
  }

  .fxv-row--off .fxv-row__signals { padding-right: 78px; }

  .fxv-price {
    min-width: 62px;
    height: 36px;
    font-size: 16px;
  }

  .fxv-result { min-width: 62px; }

  /* Conviction keeps the column's length of course, however wide the
     card. A visitor's is the padlocked cloth with the prompt beside it:
     a course still to be run is a line the card does not need. */
  .fxv-conv { max-width: 240px; }

  .fxv-conv--masked {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .fxv-conv--masked .fxv-conv__top { display: block; }
  .fxv-conv--masked .fxv-conv__bar { display: none; }
  .fxv-conv--masked .fxv-conv__cta { margin-top: 0; }
}

/* A phone: the narrower gutters and masthead, the tools a line that
   scrolls. */
@media (max-width: 767px) {
  body.page-fox-signals { --fxv-gutter: 14px; }

  .fxv-nav { gap: 8px; padding-block: 8px; }
  .fxv-nav__time { display: none; }

  /* The rooms that do not fit fade at the edge, so the row reads as
     one that goes on. */
  .fxv-nav__rooms {
    padding-right: 20px;
    -webkit-mask: linear-gradient(90deg, black calc(100% - 28px), transparent);
    mask: linear-gradient(90deg, black calc(100% - 28px), transparent);
  }

  /* The meetings are one line that scrolls sideways. */
  .fxv-tools__row--scroll {
    flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--fxv-gutter));
    padding: 0 var(--fxv-gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .fxv-tools__row--scroll::-webkit-scrollbar { display: none; }

  .fxv-sort { margin-left: 0; flex: 1 1 150px; }
  .fxv-select { width: 100%; }
  .fxv-more__label { width: 100%; }

  .fxv-row__facts { font-size: 12px; }

  /* A narrower board and a size down for the name and its rating, so
     the name keeps its line beside them. */
  .fxv-price,
  .fxv-result { min-width: 56px; }
  .fxv-row__horse,
  .fxv-row--off .fxv-row__signals { padding-right: 70px; }
  .fxv-row__horse { gap: 6px; font-size: 14px; }
  .fxv-row__sr { padding-inline: 5px; font-size: 10.5px; }

  /* A sponsor's title can run to four lines here: two, then an ellipsis. */
  .fxv-row__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .fxv-done__bar { padding-inline: 14px; }
}

/* Under a finger: 44px to press. */
@media (pointer: coarse) {
  .fxv-star { width: 36px; height: 44px; margin-left: -6px; }
  .fxv-row__card { padding-block: 9px; }
  .fxv-select { height: 44px; }

  /* The prompt's press reaches past its words, not the layout: 44px
     high at least, centred on them. */
  .fxv-conv__cta::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    left: -6px;
    height: max(44px, 100% + 12px);
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fxv-row__pick { transition: none; }
}

/* ── 6. The site's type, and a quieter Board ─────────────────────── */

/* The site pairs its serif, Playfair Display, for headlines, card
   titles and odds (the homepage's headline, its race cards, its odds
   chips, the footer's line) with DM Sans for everything else. The Fox
   pages are set the same way: Playfair, at 700 and with lining figures,
   for the masthead's title, the race's title, the section headings,
   the Fox's horse and every price; DM Sans for the labels, the facts
   and the body. Nothing heavier than 700. */
.fxv-wrap {
  --fxv-serif: var(--font-display);
}

/* The masthead: the room's name in the serif, as the homepage's
   headline is; the date and the eyebrow stay as they were. */
.fxv-hero .mf-hero__title-name,
.fxv-hero__room {
  font-family: var(--fxv-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fxv-hero .mf-hero__title-name { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.06; }
.fxv-hero__room { font-size: 22px; }
.fxv-hero .mf-hero__sub strong { font-family: var(--fxv-serif); font-size: 20px; font-weight: 700; font-variant-numeric: lining-nums; }

/* The Board's tools: the meetings as a strip of tabs on a hairline,
   the chosen one in ink with a gold rule under it; the filters and the
   sort as words. One row of pills less. */
.fxv-tools { gap: 6px; margin-bottom: 18px; }

.fxv-tools__row--scroll {
  gap: 0 22px;
  border-bottom: 1px solid var(--mfr-rule-2);
}

.fxv-tools__row--scroll .mfr-filter {
  min-height: 40px;
  margin-bottom: -1px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--mfr-ink-2);
}

.fxv-tools__row--scroll .mfr-filter__n {
  font-size: 12px;
  font-weight: 600;
  color: var(--mfr-ink-3);
}

.fxv-wrap .fxv-tools__row--scroll .mfr-filter.fxv-on {
  background: none;
  border-color: var(--mfr-gold);
  color: var(--mfr-ink);
}

.fxv-wrap .fxv-tools__row--scroll .mfr-filter.fxv-on .mfr-filter__n { color: var(--mfr-ink-3); }

@media (hover: hover) {
  .fxv-wrap .fxv-tools__row--scroll a.mfr-filter:not(.fxv-on):hover {
    background: none;
    border-color: var(--mfr-rule-2);
    color: var(--mfr-ink);
  }
}

/* The second row: the level switch and "More filters" as words with a
   hairline, the sort as words with its arrow. */
.fxv-tools__row:not(.fxv-tools__row--scroll) { gap: 8px 18px; padding-top: 4px; }

.fxv-tools__row:not(.fxv-tools__row--scroll) > .mfr-filter,
.fxv-more > summary.mfr-filter {
  min-height: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mfr-ink-2);
}

.fxv-wrap .fxv-tools__row:not(.fxv-tools__row--scroll) > .mfr-filter.fxv-on {
  background: none;
  color: var(--mfr-ink);
  box-shadow: inset 0 -2px 0 var(--mfr-gold);
}

@media (hover: hover) {
  .fxv-wrap .fxv-tools__row:not(.fxv-tools__row--scroll) > a.mfr-filter:not(.fxv-on):hover,
  .fxv-wrap .fxv-more > summary.mfr-filter:hover {
    background: none;
    color: var(--mfr-ink);
    box-shadow: inset 0 -2px 0 var(--mfr-rule-2);
  }
}

.fxv-select {
  height: 32px;
  padding: 0 22px 0 0;
  background:
    linear-gradient(45deg, transparent 50%, var(--mfr-ink-2) 50%) right 9px center / 5px 5px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--mfr-ink-2) 50%) right 4px center / 5px 5px no-repeat;
  border: 0;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mfr-ink-2);
}

/* "More filters" while its sheet is open, and with the count of its
   filters that are on. */
.fxv-wrap .fxv-more[open] > summary.mfr-filter,
.fxv-wrap .fxv-more > summary.mfr-filter.fxv-on { color: var(--mfr-ink); }
.fxv-wrap .fxv-more > summary.mfr-filter.fxv-on {
  background: none;
  border: 0;
  box-shadow: inset 0 -2px 0 var(--mfr-gold);
}

.fxv-wrap .fxv-more > summary.mfr-filter.fxv-on .mfr-i { color: var(--mfr-ink-3); }

.fxv-more > summary[data-count]:not([data-count=""])::after {
  content: attr(data-count);
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mfr-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--mfr-white);
}

/* In the sheet the choices stay pills: there they are a set. */
.fxv-more__sheet .mfr-filter {
  min-height: 32px;
  padding: 0 12px;
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule-2);
  border-radius: 999px;
}

/* Under a finger the tools keep 44px to press, their words centred in
   it (the tabs' gold rule stays at their foot). */
@media (pointer: coarse) {
  .fxv-tools__row--scroll .mfr-filter,
  .fxv-tools__row:not(.fxv-tools__row--scroll) > .mfr-filter,
  .fxv-more > summary.mfr-filter,
  .fxv-more__sheet .mfr-filter { min-height: 44px; }
  .fxv-select { height: 44px; }
}

/* The Board's rows: the Fox's horse and the price in the serif. */
.fxv-row__horse {
  font-family: var(--fxv-serif);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0;
}

.fxv-price {
  font-family: var(--fxv-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
}

.fxv-conv__pct {
  font-family: var(--fxv-serif);
  font-size: 15px;
  font-variant-numeric: lining-nums tabular-nums;
}

.fxv-done__bar { font-size: 13.5px; }

/* The race page: its title, the headings and the prices. */
.fx-shell--v2 .fx-trace__title,
.fx-shell--v2 .fx-trace__time {
  font-family: var(--fxv-serif);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}

.fx-shell--v2 .fx-trace__section-title,
.fx-shell--v2 .fx-vedge__title,
.fx-shell--v2 .fx-verdict__eyebrow,
.fx-shell--v2 .fx-tchart__cap-title {
  font-family: var(--fxv-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.fx-shell--v2 .fx-tchart__tile-price,
.fx-shell--v2 .fx-tchart__readout-time,
.fx-shell--v2 .fx-trace__rcol--odds [data-price],
.fx-shell--v2 .fx-vedge__odds,
.fx-shell--v2 .fx-tchart__end-price,
.fx-shell--v2 .fx-tchart__readout-odds,
.fx-shell--v2 .fx-replay__callout-sp,
.fx-shell--v2 .fx-trace__nav-time {
  font-family: var(--fxv-serif);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
}

.fx-shell--v2 .fx-tchart__tile-price { font-size: 24px; }
.fx-shell--v2 .fx-tchart__readout-time { font-size: 22px; }
.fx-shell--v2 .fx-trace__rcol--odds { font-size: 16px; }
.fx-shell--v2 .fx-vedge__odds { font-size: 15px; }
.fx-shell--v2 .fx-tchart__end-price { font-size: 13px; }
.fx-shell--v2 .fx-tchart__readout-odds { font-size: 14px; }
.fx-shell--v2 .fx-trace__nav-time { font-size: 15px; }

.fx-shell--v2 .fx-trace__horse-name {
  font-family: var(--fxv-serif);
  font-size: 16px;
  font-weight: 700;
}

.fx-shell--v2 .fx-tchart__tile-who { font-size: 13.5px; font-weight: 600; }
.fx-shell--v2 .fx-tchart__end-name { font-weight: 600; }

/* The other rooms' headings (the Stable's, the Alerts', Settings'). */
.fx-shell--v2 .fx-rtrace__hero-name,
.fx-shell--v2 .fx-alerts__title,
.fx-shell--v2 .fx-settings__title {
  font-family: var(--fxv-serif);
  font-weight: 700;
  letter-spacing: -0.005em;
}

@media (max-width: 767px) {
  .fxv-hero .mf-hero__title-name { font-size: 34px; }
  .fxv-tools__row--scroll { gap: 0 18px; }
  .fxv-tools__row--scroll .mfr-filter { font-size: 13.5px; }
  .fxv-row__horse { font-size: 14.5px; }
  .fxv-price { font-size: 17px; }
  .fx-shell--v2 .fx-trace__horse-name { font-size: 15px; }
  .fx-shell--v2 .fx-trace__title,
  .fx-shell--v2 .fx-trace__time { font-size: 26px; }
  .fx-shell--v2 .fx-trace__section-title,
  .fx-shell--v2 .fx-vedge__title,
  .fx-shell--v2 .fx-verdict__eyebrow,
  .fx-shell--v2 .fx-tchart__cap-title { font-size: 19px; }
  .fx-shell--v2 .fx-tchart__tile-price { font-size: 21px; }
  .fx-shell--v2 .fx-tchart__readout-time { font-size: 20px; }
}

/* ── 7. The other rooms: Race Trace's list, Alerts, a runner, Settings ─ */

/* These rooms keep the terminal's markup (fox_signals_shell.css lays
   them out as a dense screen with 720px breaks). Here they are set in
   the Board's language, and on a phone each row becomes a card, so no
   column falls off the screen and nothing sits on anything else. */

.fxv-chip[data-kind="withdrawal_shuffle"] { --fxv-signal: var(--fxv-signal-shuffle); }

/* ── Race Trace's list (fox-race-trace.html): a table from 768px,
   headed as the Board's; a card a race below that: the time at the
   left, the course and its class, the race's name in full with the
   going and the field, and the count of signals at the right. */
.fx-shell--v2 .fx-section-header__meta,
.fx-shell--v2 .fx-section-header__meta * {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-hub__grid {
  gap: 0;
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule);
  border-radius: 14px;
  overflow: hidden;
}

.fx-shell--v2 .fx-hub__head {
  background: var(--mfr-warm);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-hub__row {
  border-top: 1px solid var(--mfr-rule);
  border-left: 0;
  background: var(--mfr-card);
}

.fx-shell--v2 .fx-hub__col--time { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--mfr-ink); }
.fx-shell--v2 .fx-hub__course { font-size: 14.5px; font-weight: 700; color: var(--mfr-ink); }
.fx-shell--v2 .fx-hub__class,
.fx-shell--v2 .fx-hub__going { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--mfr-ink-3); }
.fx-shell--v2 .fx-hub__race-name { font-size: 13.5px; color: var(--mfr-ink-2); }
.fx-shell--v2 .fx-hub__col--field,
.fx-shell--v2 .fx-hub__col--signals,
.fx-shell--v2 .fx-hub__col--events { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--mfr-ink-2); }

/* The count of signals, as the Board's gold pill. */
.fx-shell--v2 .fx-hub__col--signals .fx-chip {
  min-width: 28px;
  justify-content: center;
  padding: 2px 8px;
  background: var(--mfr-gold-wash);
  border: 1px solid var(--mfr-gold-line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--mfr-gold-ink);
}

@media (hover: hover) {
  .fx-shell--v2 .fx-hub__row:hover { background: var(--mfr-warm); }
}

@media (max-width: 767px) {
  .fx-shell--v2 .fx-hub__head { display: none; }

  .fx-shell--v2 .fx-hub__row {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    grid-template-areas:
      "time course  signals"
      "time race    race"
      "time field   field";
    align-items: start;
    gap: 2px 10px;
    padding: 12px 14px 12px 12px;
  }

  .fx-shell--v2 .fx-hub__col--time { grid-area: time; padding-top: 1px; }
  .fx-shell--v2 .fx-hub__col--course { grid-area: course; }
  .fx-shell--v2 .fx-hub__col--race { grid-area: race; }
  .fx-shell--v2 .fx-hub__col--field { grid-area: field; }
  .fx-shell--v2 .fx-hub__col--signals { grid-area: signals; justify-self: end; }
  .fx-shell--v2 .fx-hub__col--events,
  .fx-shell--v2 .fx-hub__col--signals .fx-hub__zero { display: none; }

  /* The course and its class on one line. */
  .fx-shell--v2 .fx-hub__course { display: inline; }
  .fx-shell--v2 .fx-hub__class { display: inline; margin-left: 6px; }

  /* The race's name in full, the going under it. */
  .fx-shell--v2 .fx-hub__race-name {
    display: block;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.35;
  }

  .fx-shell--v2 .fx-hub__going { display: inline; }

  /* "10 runners", in words. */
  .fx-shell--v2 .fx-hub__col--field { font-size: 12px; font-weight: 500; color: var(--mfr-ink-3); }
  .fx-shell--v2 .fx-hub__col--field::after { content: " runners"; }
}

/* A tablet's table: narrower columns, and the events (a count the race
   page shows) left out; the shell's six ran 17px past a 768px screen. */
@media (min-width: 768px) and (max-width: 1023px) {
  .fx-shell--v2 .fx-hub__head,
  .fx-shell--v2 .fx-hub__row {
    grid-template-columns: 56px minmax(0, 1fr) minmax(0, 2fr) 64px 72px;
    gap: 12px;
  }

  .fx-shell--v2 .fx-hub__col--events { display: none; }
}

/* ── Alerts: the head's figures in words; the filters' legends as
   words; each signal led by the Board's mark for its kind (the chip's
   word stays for a screen reader), its strength as a word, the time at
   the right; a race's line wraps rather than runs into its field. */
.fx-shell--v2 .fx-alerts__deck { font-size: 14px; color: var(--mfr-ink-2); }

.fx-shell--v2 .fx-alerts__count-n {
  font-family: var(--fxv-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-alerts__count--sub .fx-alerts__count-n { font-size: 22px; color: var(--mfr-ink-2); }

.fx-shell--v2 .fx-alerts__count-lab {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-alerts__filters {
  border-color: var(--mfr-rule);
  border-radius: 14px;
  box-shadow: var(--mfr-shadow-1);
}

.fx-shell--v2 .fx-alerts__field > legend {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-alerts__pill,
.fx-shell--v2 .fx-alerts__kind,
.fx-shell--v2 .fx-alerts__toggle {
  min-height: 36px;
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule-2);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-alerts__pill.is-active,
.fx-shell--v2 .fx-alerts__pill[aria-pressed="true"] {
  background: var(--mfr-ink);
  border-color: var(--mfr-ink);
  color: var(--mfr-white);
}

.fx-shell--v2 .fx-alerts__kind.is-active {
  background: var(--mfr-gold-wash);
  border-color: var(--mfr-gold);
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-alerts__kind input,
.fx-shell--v2 .fx-alerts__toggle input { accent-color: var(--mfr-gold-ink); }

.fx-shell--v2 .fx-alerts__submit {
  min-height: 40px;
  padding: 8px 18px;
  background: var(--mfr-ink);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.fx-shell--v2 .fx-alerts__reset { font-size: 13px; font-weight: 600; color: var(--mfr-ink-3); }

@media (hover: hover) {
  .fx-shell--v2 .fx-alerts__pill:hover,
  .fx-shell--v2 .fx-alerts__kind:hover,
  .fx-shell--v2 .fx-alerts__toggle:hover { border-color: var(--mfr-ink-3); color: var(--mfr-ink); }
  .fx-shell--v2 .fx-alerts__pill.is-active:hover { border-color: var(--mfr-ink); color: var(--mfr-white); }
  .fx-shell--v2 .fx-alerts__submit:hover { filter: none; background: var(--mfr-ink-2); }
}

.fx-shell--v2 .fx-alerts__group {
  border-color: var(--mfr-rule);
  border-radius: 14px;
  box-shadow: var(--mfr-shadow-1);
  overflow: hidden;
}

.fx-shell--v2 .fx-alerts__group-head {
  background: var(--mfr-warm);
  border-bottom-color: var(--mfr-rule);
}

.fx-shell--v2 .fx-alerts__race-time { font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--mfr-ink); }
.fx-shell--v2 .fx-alerts__race-course { font-size: 14.5px; font-weight: 700; color: var(--mfr-ink); }

.fx-shell--v2 .fx-alerts__settled {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--mfr-card);
  border: 1px solid var(--mfr-rule-2);
  border-radius: 999px;
  color: var(--mfr-ink-3);
}

/* A settled race keeps its ink (the shell faded the whole card, which took its words under 4.5:1): its pill says it is settled. */
.fx-shell--v2 .fx-alerts__group.is-settled { opacity: 1; }

.fx-shell--v2 .fx-alerts__race-meta {
  display: block;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-alerts__race-name { display: inline; overflow: visible; white-space: normal; color: var(--mfr-ink-2); }
.fx-shell--v2 .fx-alerts__race-field { display: inline; white-space: nowrap; }

.fx-shell--v2 .fx-alerts__race-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-color: var(--mfr-gold-line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-gold-ink);
}

.fx-shell--v2 .fx-alerts__signal {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 12px 14px;
  border-top-color: var(--mfr-rule);
  border-left: 0;
}

.fx-shell--v2 .fx-alerts__signal--strong,
.fx-shell--v2 .fx-alerts__signal--medium,
.fx-shell--v2 .fx-alerts__signal--weak { border-left: 0; }

.fx-shell--v2 .fx-alerts__chip {
  --fxv-signal: var(--fxv-signal-dot);
  gap: 4px;
  align-items: center;
}

/* The kind's mark: the word under it is kept for a screen reader, and
   the symbol laid over it, in the middle of the circle (beside the
   word, the circle's grid gave each a row and the symbol rode high). */
.fx-shell--v2 .fx-alerts__chip-kind {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--mfr-warm);
  border: 0;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-alerts__chip-kind::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  background: currentColor;
  -webkit-mask: var(--fxv-signal) center / contain no-repeat;
  mask: var(--fxv-signal) center / contain no-repeat;
}

.fx-shell--v2 .fx-alerts__signal[data-kind="price_cut"] .fx-alerts__chip { --fxv-signal: var(--fxv-signal-down); }
.fx-shell--v2 .fx-alerts__signal[data-kind="price_cut"] .fx-alerts__chip-kind { background: var(--mfr-green-wash); color: var(--mfr-green-dark); }
.fx-shell--v2 .fx-alerts__signal[data-kind="price_drift"] .fx-alerts__chip { --fxv-signal: var(--fxv-signal-up); }
.fx-shell--v2 .fx-alerts__signal[data-kind="price_drift"] .fx-alerts__chip-kind { background: var(--mfr-red-wash); color: var(--fx-down); }
.fx-shell--v2 .fx-alerts__signal[data-kind="market_leader"] .fx-alerts__chip { --fxv-signal: var(--fxv-signal-award); }
.fx-shell--v2 .fx-alerts__signal[data-kind="market_leader"] .fx-alerts__chip-kind { background: var(--mfr-gold-wash); color: var(--mfr-gold-ink); }
.fx-shell--v2 .fx-alerts__signal[data-kind="coordinated_move"] .fx-alerts__chip { --fxv-signal: var(--fxv-signal-pulse); }
.fx-shell--v2 .fx-alerts__signal[data-kind="jockey_upgrade"] .fx-alerts__chip { --fxv-signal: var(--fxv-signal-cap); }
.fx-shell--v2 .fx-alerts__signal[data-kind="class_drop"] .fx-alerts__chip { --fxv-signal: var(--fxv-signal-drop); }
.fx-shell--v2 .fx-alerts__signal[data-kind="going_match"] .fx-alerts__chip { --fxv-signal: var(--fxv-signal-going); }
.fx-shell--v2 .fx-alerts__signal[data-kind="withdrawal_shuffle"] .fx-alerts__chip { --fxv-signal: var(--fxv-signal-shuffle); }

.fx-shell--v2 .fx-alerts__chip-strength {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-alerts__signal--strong .fx-alerts__chip-strength { color: var(--mfr-gold-ink); }

.fx-shell--v2 .fx-alerts__signal-title { font-size: 14px; font-weight: 700; color: var(--mfr-ink); }
.fx-shell--v2 .fx-alerts__signal-desc { font-size: 12.5px; color: var(--mfr-ink-2); }
.fx-shell--v2 .fx-alerts__signal-runner a { font-weight: 600; color: var(--mfr-ink); }
.fx-shell--v2 .fx-alerts__signal-time { margin: 0; font-family: var(--font-body); font-size: 11.5px; letter-spacing: 0; color: var(--mfr-ink-3); }

.fx-shell--v2 .fx-alerts__evidence > summary {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-gold-ink);
}

.fx-shell--v2 .fx-alerts__evidence-row { font-family: var(--font-body); font-size: 12px; }

/* A link inside a sentence is underlined, not told apart by colour alone. */
.fx-shell--v2 .fx-alerts__footnote a,
.fx-shell--v2 .fx-alerts__empty-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 767px) {
  .fx-shell--v2 .fx-alerts__counts { gap: 20px; }
  .fx-shell--v2 .fx-alerts__count-n { font-size: 26px; }

  .fx-shell--v2 .fx-alerts__group-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    padding: 12px 14px;
  }

  .fx-shell--v2 .fx-alerts__race { gap: 8px; }
  .fx-shell--v2 .fx-alerts__race-links { margin-top: 4px; }

  /* The mark, the strength and the time share the first line; the
     words take the width under them. */
  .fx-shell--v2 .fx-alerts__signal {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas:
      "chip strength time"
      "body body     body";
    align-items: center;
    gap: 8px 10px;
    padding: 12px 14px;
  }

  .fx-shell--v2 .fx-alerts__chip { display: contents; }
  .fx-shell--v2 .fx-alerts__chip-kind { grid-area: chip; }
  .fx-shell--v2 .fx-alerts__chip-strength { grid-area: strength; }
  .fx-shell--v2 .fx-alerts__signal-time { grid-area: time; justify-self: end; }
  .fx-shell--v2 .fx-alerts__body { grid-area: body; }
}

/* ── A runner (fox-runner.html): the hero with its cloth, its figures
   in words; the chart on the paper with the site's colours; the
   sections headed as the others are; the signal's kind as a word. */
.fx-shell--v2 .fx-rtrace__crumb-link,
.fx-shell--v2 .fx-rtrace__nav-chip { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.fx-shell--v2 .fx-rtrace__hero {
  border-color: var(--mfr-rule);
  border-radius: 14px;
  box-shadow: var(--mfr-shadow-1);
}

.fx-shell--v2 .fx-rtrace__hero-num {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 0;
  height: 38px;
  border-radius: 5px;
  background: var(--mfr-gold);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-rtrace__hero-name { letter-spacing: -0.01em; }

.fx-shell--v2 .fx-rtrace__conn-role {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-rtrace__hero-stat-val {
  font-family: var(--fxv-serif);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-rtrace__hero-stat--price .fx-rtrace__hero-stat-val { color: var(--mfr-ink); }
.fx-shell--v2 .fx-rtrace__hero-stat--down .fx-rtrace__hero-stat-val { color: var(--mfr-green-dark); }
.fx-shell--v2 .fx-rtrace__hero-stat--up .fx-rtrace__hero-stat-val { color: var(--fx-down); }

.fx-shell--v2 .fx-rtrace__hero-stat-lab {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-3);
}

.fx-shell--v2 .fx-rtrace__chart {
  border-color: var(--mfr-rule);
  border-radius: 14px;
  box-shadow: var(--mfr-shadow-1);
}

.fx-shell--v2 .fx-rtrace__chart-title {
  font-family: var(--fxv-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-rtrace__chart-meta { font-size: 12.5px; color: var(--mfr-ink-3); }

.fx-shell--v2 .fx-rtrace__chart-stage {
  padding: 8px 0 0;
  background: none;
  border-bottom: 1px solid var(--mfr-rule-2);
  border-radius: 0;
}

/* The lines keep their weight whatever the chart is stretched to. */
.fx-shell--v2 .fx-rtrace__chart-svg { overflow: visible; }
.fx-shell--v2 .fx-rtrace__chart-line { stroke: var(--mfr-gold); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.fx-shell--v2 .fx-rtrace__chart-ai { stroke: var(--mfr-gold-ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.fx-shell--v2 .fx-rtrace__chart-grid line { stroke: var(--mfr-rule); stroke-dasharray: none; vector-effect: non-scaling-stroke; }

/* The labels are drawn in the chart's own units, so their size follows
   the chart's width: 13 units is 14px across a desktop, 16 is 11px on
   a tablet. Each wears a halo of the paper where it crosses a line. */
.fx-shell--v2 .fx-rtrace__chart-ylabel,
.fx-shell--v2 .fx-rtrace__chart-xlabel {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  fill: var(--mfr-ink-3);
  paint-order: stroke;
  stroke: var(--mfr-card);
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* What the two lines are. */
.fx-shell--v2 .fx-rtrace__chart::after {
  content: "The gold line is the price through the day; the dashed line, the AI's confidence.";
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mfr-ink-3);
}

@media (max-width: 1023px) {
  .fx-shell--v2 .fx-rtrace__chart-ylabel,
  .fx-shell--v2 .fx-rtrace__chart-xlabel { font-size: 16px; }
}

.fx-shell--v2 .fx-rtrace__section-title {
  font-family: var(--fxv-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink);
  border-bottom: 0;
}

.fx-shell--v2 .fx-rtrace__signal {
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
  border-color: var(--mfr-rule);
  border-radius: 12px;
}

/* "Jockey", not "JOCKEY": the chip is a block so its first letter can
   be set apart. */
.fx-shell--v2 .fx-rtrace__signal .fx-chip {
  display: block;
  width: max-content;
  align-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: lowercase;
}

.fx-shell--v2 .fx-rtrace__signal .fx-chip::first-letter { text-transform: uppercase; }
.fx-shell--v2 .fx-rtrace__signal-title { font-size: 14px; font-weight: 700; color: var(--mfr-ink); }
.fx-shell--v2 .fx-rtrace__signal-desc { font-size: 12.5px; color: var(--mfr-ink-2); }

.fx-shell--v2 .fx-rtrace__signal-evidence-row,
.fx-shell--v2 .fx-rtrace__signal-evidence-row dt {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.fx-shell--v2 .fx-rtrace__signal-evidence-row dt { color: var(--mfr-ink-3); }

.fx-shell--v2 .fx-rtrace__card { border-radius: 12px; }
.fx-shell--v2 .fx-rtrace__card-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mfr-ink-2); }
.fx-shell--v2 .fx-rtrace__fit-lab { font-size: 12.5px; }
.fx-shell--v2 .fx-rtrace__fit-val { font-family: var(--font-body); font-size: 13.5px; }

.fx-shell--v2 .fx-rtrace__back {
  min-height: 40px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-color: var(--mfr-rule-2);
  border-radius: 999px;
}

@media (max-width: 767px) {
  /* On a phone the chart is drawn to its own proportions (the shell
     stretched it taller, which stretched its letters too), the labels
     are 32 of its units (11px), the prices sit just above their lines
     and three of the six hours are kept, in the room under the chart. */
  .fx-shell--v2 .fx-rtrace__chart-svg { aspect-ratio: 1000 / 300; }
  .fx-shell--v2 .fx-rtrace__chart-stage { padding-bottom: 18px; }
  .fx-shell--v2 .fx-rtrace__chart-ylabel,
  .fx-shell--v2 .fx-rtrace__chart-xlabel { font-size: 32px; stroke-width: 8px; }
  .fx-shell--v2 .fx-rtrace__chart-ylabel { transform: translateY(-12px); }
  .fx-shell--v2 .fx-rtrace__chart-xlabel { transform: translateY(26px); }
  .fx-shell--v2 .fx-rtrace__chart-xlabel:nth-child(2),
  .fx-shell--v2 .fx-rtrace__chart-xlabel:nth-child(3),
  .fx-shell--v2 .fx-rtrace__chart-xlabel:nth-child(5) { display: none; }
  .fx-shell--v2 .fx-rtrace__chart-xlabel:first-child { text-anchor: start; }
  .fx-shell--v2 .fx-rtrace__chart-xlabel:last-child { text-anchor: end; }

  .fx-shell--v2 .fx-rtrace__hero-stats { gap: 10px 14px; }
  .fx-shell--v2 .fx-rtrace__hero-stat { min-width: 0; }
  .fx-shell--v2 .fx-rtrace__hero-stat-val { font-size: 19px; }
  .fx-shell--v2 .fx-rtrace__hero-stat-lab { font-size: 11.5px; }

  /* A signal's kind above its words, which then take the width. */
  .fx-shell--v2 .fx-rtrace__signal { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ── Settings: the groups' legends, the kinds and the button in the
   Board's words. */
.fx-shell--v2 .fx-settings__legend {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-settings__kind,
.fx-shell--v2 .fx-settings__field--toggle .fx-settings__toggle {
  border-color: var(--mfr-rule-2);
  border-radius: 999px;
  color: var(--mfr-ink-2);
}

.fx-shell--v2 .fx-settings__kind.is-active {
  background: var(--mfr-gold-wash);
  border-color: var(--mfr-gold);
  color: var(--mfr-ink);
}

.fx-shell--v2 .fx-settings__kind input,
.fx-shell--v2 .fx-settings__toggle input { accent-color: var(--mfr-gold-ink); }

.fx-shell--v2 .fx-settings__submit {
  min-height: 44px;
  background: var(--mfr-ink);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

@media (hover: hover) {
  .fx-shell--v2 .fx-settings__submit:hover { filter: none; background: var(--mfr-ink-2); }
}

/* The room pills on a phone: a longer fade, so a pill is never cut on
   a letter under the live word. */
@media (max-width: 767px) {
  .fxv-nav__rooms {
    padding-right: 60px;
    -webkit-mask: linear-gradient(90deg, black calc(100% - 56px), transparent calc(100% - 8px));
    mask: linear-gradient(90deg, black calc(100% - 56px), transparent calc(100% - 8px));
  }
}