/* DEN-PULSE-1 · Market Pulse card
 * ------------------------------------------------------------
 * Rendered inside .den__turn-body of an assistant turn. Uses its
 * own token layer so the palette doesn't have to fight DEN theme
 * defaults — sage as the structural accent, semantic in/out for
 * direction data. All type + colour is scoped to .pulse.
 */

.pulse {
  --pulse-max-w: 720px;
  --pulse-ink: #1c1b17;
  --pulse-paper: #fbf7ec;
  --pulse-paper-inset: #efe8d5;
  --pulse-rule: #e0d7c2;
  --pulse-rule-strong: #cabf9f;
  --pulse-muted: #78725e;
  --pulse-muted-2: #a39d87;
  --pulse-sage: #4a6b4e;
  --pulse-sage-strong: #365039;
  --pulse-sage-tint: #d5e2d6;
  --pulse-in: #2d7040;
  --pulse-in-tint: #d8ecdd;
  --pulse-out: #9a5518;
  --pulse-out-tint: #f5dec6;
  --pulse-fox-tint: #f0dcc4;
  --pulse-fox-ink: #6b4a20;

  background: var(--pulse-paper);
  color: var(--pulse-ink);
  border: 1px solid var(--pulse-rule);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(28, 27, 23, 0.04),
    0 6px 24px -12px rgba(28, 27, 23, 0.14);
  overflow: hidden;
  /* DEN-PULSE-WIDTH · Capped on the SHELL, not per card. It lived on
     .pulse.pw and .steam, with a note that market pulse, the signal
     board and race trace were "genuinely wide tables of data" whose
     capping was a judgement to make while looking at them. Looked at:
     on a wide monitor Market Pulse pushed each price and each pair of
     connections to the far edge, a hand's width from the horse they
     belonged to. One number, one place. */
  max-width: var(--pulse-max-w);
  margin: 12px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  .pulse {
    --pulse-ink: #f2ecda;
    --pulse-paper: #1c1c15;
    --pulse-paper-inset: #23231b;
    --pulse-rule: #33321f;
    --pulse-rule-strong: #4a4830;
    --pulse-muted: #948d75;
    --pulse-muted-2: #6a6653;
    --pulse-sage: #8fa891;
    --pulse-sage-strong: #b0c5b2;
    --pulse-sage-tint: #253027;
    --pulse-in: #7bc190;
    --pulse-in-tint: #1e2f22;
    --pulse-out: #d9986a;
    --pulse-out-tint: #2f2216;
    --pulse-fox-tint: #2e2418;
    --pulse-fox-ink: #e3b784;
    box-shadow:
      0 1px 0 rgba(0,0,0,0.35),
      0 6px 28px -12px rgba(0,0,0,0.55);
  }
}

/* Explicit theme override wins over the media query in both directions. */
[data-theme="light"] .pulse {
  --pulse-ink: #1c1b17;
  --pulse-paper: #fbf7ec;
  --pulse-paper-inset: #efe8d5;
  --pulse-rule: #e0d7c2;
  --pulse-rule-strong: #cabf9f;
  --pulse-muted: #78725e;
  --pulse-muted-2: #a39d87;
  --pulse-sage: #4a6b4e;
  --pulse-sage-strong: #365039;
  --pulse-sage-tint: #d5e2d6;
  --pulse-in: #2d7040;
  --pulse-in-tint: #d8ecdd;
  --pulse-out: #9a5518;
  --pulse-out-tint: #f5dec6;
  --pulse-fox-tint: #f0dcc4;
  --pulse-fox-ink: #6b4a20;
}
[data-theme="dark"] .pulse {
  --pulse-ink: #f2ecda;
  --pulse-paper: #1c1c15;
  --pulse-paper-inset: #23231b;
  --pulse-rule: #33321f;
  --pulse-rule-strong: #4a4830;
  --pulse-muted: #948d75;
  --pulse-muted-2: #6a6653;
  --pulse-sage: #8fa891;
  --pulse-sage-strong: #b0c5b2;
  --pulse-sage-tint: #253027;
  --pulse-in: #7bc190;
  --pulse-in-tint: #1e2f22;
  --pulse-out: #d9986a;
  --pulse-out-tint: #2f2216;
  --pulse-fox-tint: #2e2418;
  --pulse-fox-ink: #e3b784;
}

.pulse * { box-sizing: border-box; }

.pulse__header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--pulse-rule);
}
.pulse__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pulse-sage-strong);
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pulse__eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pulse-sage);
}
.pulse__title {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 22px;
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 12px;
  color: var(--pulse-ink);
  text-wrap: balance;
}
.pulse__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--pulse-muted);
  flex-wrap: wrap;
}
.pulse__freshness {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.pulse__freshness-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pulse-in);
  box-shadow: 0 0 0 3px var(--pulse-in-tint);
  animation: pulseBlink 2.6s ease-in-out infinite;
}
.pulse__tally {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
@keyframes pulseBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse__freshness-dot { animation: none; }
}

.pulse__empty {
  padding: 22px 22px 24px;
  color: var(--pulse-muted);
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-style: italic;
  font-size: 14px;
  text-align: center;
}

.pulse__section { padding: 14px 0 4px; }
.pulse__section + .pulse__section { border-top: 1px solid var(--pulse-rule); }
.pulse__section-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 22px 8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}
.pulse__section--in  .pulse__section-title { color: var(--pulse-in); }
.pulse__section--out .pulse__section-title { color: var(--pulse-out); }
.pulse__section-arrow {
  display: inline-block;
  width: 12px;
  font-size: 12px;
  line-height: 1;
}
.pulse__section-sub {
  color: var(--pulse-muted);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  font-size: 12px;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-style: italic;
}

/* DEN-PULSE-ROW · Three tracks, three cells. The fourth held the
   jockey and trainer; they now sit under the horse name. */
.pulse__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 132px minmax(0, 0.9fr);
  column-gap: 16px;
  align-items: center;
  padding: 11px 22px;
  border-top: 1px solid transparent;
  transition: background 140ms ease;
}
.pulse__row + .pulse__row { border-top-color: var(--pulse-rule); }
.pulse__row:hover { background: var(--pulse-paper-inset); }

.pulse__row-horse h4 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 2px;
  color: var(--pulse-ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.15;
}
.pulse__chip-tag {
  font-family: -apple-system, "Segoe UI Variable", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.pulse__chip-tag--ai  { background: var(--pulse-sage-tint); color: var(--pulse-sage-strong); }
.pulse__chip-tag--fox { background: var(--pulse-fox-tint);  color: var(--pulse-fox-ink); }
.pulse__row-meta {
  font-size: 12px;
  color: var(--pulse-muted);
  font-variant-numeric: tabular-nums;
}

.pulse__row-spark {
  height: 32px;
  display: flex;
  align-items: center;
  min-width: 0;
}
.pulse__row-spark svg {
  width: 100%;
  height: 32px;
  display: block;
  overflow: visible;
}
.pulse__spark-ref  { stroke: var(--pulse-muted-2); stroke-width: 0.6; stroke-dasharray: 2 3; opacity: 0.55; }
.pulse__spark-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.pulse__section--in  .pulse__spark-line { stroke: var(--pulse-in); }
.pulse__section--out .pulse__spark-line { stroke: var(--pulse-out); }
.pulse__spark-empty {
  color: var(--pulse-muted-2);
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
}

.pulse__row-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: "SFMono-Regular", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--pulse-muted);
  white-space: nowrap;
  flex-wrap: wrap;
}
.pulse__now {
  color: var(--pulse-ink);
  font-weight: 700;
  font-size: 14px;
}
.pulse__arrow { color: var(--pulse-muted-2); }
.pulse__delta {
  margin-left: 3px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
}
.pulse__section--in  .pulse__delta { background: var(--pulse-in-tint);  color: var(--pulse-in); }
.pulse__section--out .pulse__delta { background: var(--pulse-out-tint); color: var(--pulse-out); }

/* Connections, labelled the way the site's own market-movers partial
   labels them. Unlabelled, two names read as a stray pair of people. */
.pulse__row-conn {
  font-size: 12px;
  color: var(--pulse-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pulse__conn-lbl {
  display: inline-block;
  min-width: 11px;
  margin-right: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pulse-muted-2);
  text-transform: uppercase;
}
.pulse__conn-sep { margin: 0 6px; color: var(--pulse-muted-2); }

.pulse__footer {
  padding: 12px 22px 14px;
  border-top: 1px solid var(--pulse-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* DEN-PULSE-FOOTER · The note gives way, the chips never do.
 *
 * `.pulse__footer` is a flex row and both children took the default
 * `flex: 0 1 auto`, so BOTH could shrink below their content width.
 * The note is a long text run and shrank happily; the actions shrank
 * too, squeezing each `.pulse__chip` — an inline-flex box with fixed
 * padding — until its label clipped. "Full board →" lost its arrow
 * and "Refresh" lost its last letter.
 *
 * So the note is the only item allowed to flex, and `min-width: 0`
 * lets it shrink past its longest word rather than forcing the row
 * wider. The chips are pinned at content size (see `.pulse__chip`).
 * Latent in every pulse card — Top Steamers simply has the longest
 * footer note, so it surfaced there first.
 */
.pulse__footer-note {
  font-size: 12px;
  color: var(--pulse-muted);
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 0;
}
.pulse__footer-note strong { color: var(--pulse-ink); font-weight: 600; }
.pulse__footer-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.pulse__chip {
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--pulse-sage);
  background: var(--pulse-sage);
  color: var(--pulse-paper);
  border-radius: 20px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* Never squeezed by a long footer note, never wrapped mid-label. */
  flex: 0 0 auto;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease;
}

.pulse__chip:hover {
  background: var(--pulse-sage-strong);
  border-color: var(--pulse-sage-strong);
  color: var(--pulse-paper);
  text-decoration: none;
}
.pulse__chip:focus-visible {
  outline: 2px solid var(--pulse-sage);
  outline-offset: 2px;
}

/* ─── Signal Board (DEN-PULSE-6) ─────────────────────────────
 * Each kind gets its own tinted panel; tone maps to the same
 * in / out / neutral semantic used by Market Pulse.
 */
.pulse__kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 22px 4px;
}
@media (max-width: 640px) {
  .pulse__kinds { grid-template-columns: 1fr; padding: 12px 16px 4px; }
}
.pulse__kind {
  border: 1px solid var(--pulse-rule);
  border-left-width: 3px;
  border-radius: 4px;
  padding: 10px 12px 8px;
  background: var(--pulse-paper);
}
.pulse__kind--in       { border-left-color: var(--pulse-in); }
.pulse__kind--out      { border-left-color: var(--pulse-out); }
.pulse__kind--neutral  { border-left-color: var(--pulse-sage); }
.pulse__kind-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pulse__kind-title {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--pulse-ink);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.pulse__kind-count {
  font-size: 11px;
  color: var(--pulse-muted);
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.pulse__kind-sub {
  margin: 2px 0 8px;
  font-size: 12px;
  color: var(--pulse-muted);
  font-style: italic;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
}
.pulse__kind-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pulse__kind-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}
.pulse__kind-row-horse {
  color: var(--pulse-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pulse__kind-row-meet {
  color: var(--pulse-muted);
  font-variant-numeric: tabular-nums;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
}
.pulse__kind-overflow {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--pulse-muted-2);
  font-style: italic;
}
.pulse__strength {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  line-height: 1.4;
}
.pulse__strength--weak   { background: rgba(120,114,94,0.14); color: var(--pulse-muted); }
.pulse__strength--medium { background: var(--pulse-sage-tint); color: var(--pulse-sage-strong); }
.pulse__strength--strong { background: var(--pulse-in-tint);  color: var(--pulse-in); }

/* ─── My Alerts (DEN-PULSE-7) ────────────────────────────────
 * Each alert is one race header + rows of firing signals.
 * Pinned races get a gold left rail so returning users see their
 * stable stand out.
 */
.pulse__alerts {
  padding: 4px 22px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 640px) { .pulse__alerts { padding: 4px 16px; } }
.pulse__alert {
  border: 1px solid var(--pulse-rule);
  border-left: 3px solid var(--pulse-rule-strong);
  border-radius: 4px;
  padding: 10px 12px 8px;
  background: var(--pulse-paper);
}
.pulse__alert--pinned { border-left-color: #b58a3e; }
.pulse__alert-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pulse__alert-time {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--pulse-ink);
  font-size: 13px;
}
.pulse__alert-course {
  font-size: 13px;
  color: var(--pulse-ink);
  font-weight: 600;
}
.pulse__alert-name {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--pulse-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pulse__pin { color: #b58a3e; font-size: 14px; }
.pulse__alert-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pulse__alert-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}
.pulse__alert-horse {
  color: var(--pulse-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pulse__alert-kind {
  color: var(--pulse-muted);
  font-size: 11px;
}
.pulse__alert-trace {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--pulse-sage-strong);
  text-decoration: none;
  border-bottom: 1px dotted var(--pulse-sage);
}
.pulse__alert-trace:hover { color: var(--pulse-sage); text-decoration: none; }

.pulse__nudge {
  padding: 20px 22px 6px;
  text-align: center;
}
.pulse__nudge-lede {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 16px;
  color: var(--pulse-ink);
  margin: 0 auto 8px;
  max-width: 40ch;
  line-height: 1.4;
  text-wrap: balance;
}
.pulse__nudge-hint {
  font-size: 12px;
  color: var(--pulse-muted);
  margin: 0;
}

/* ─── Race Trace (DEN-PULSE-8) ───────────────────────────────
 * Compact 5-runner overlay chart + legend.
 */
.pulse__chart-wrap {
  padding: 8px 22px 12px;
}
@media (max-width: 640px) { .pulse__chart-wrap { padding: 8px 16px; } }
.pulse__chart {
  width: 100%;
  height: 140px;
  display: block;
  background:
    linear-gradient(180deg, transparent 0, transparent 24%,
      var(--pulse-rule) 24%, var(--pulse-rule) calc(24% + 1px),
      transparent calc(24% + 1px), transparent 48%,
      var(--pulse-rule) 48%, var(--pulse-rule) calc(48% + 1px),
      transparent calc(48% + 1px), transparent 72%,
      var(--pulse-rule) 72%, var(--pulse-rule) calc(72% + 1px),
      transparent calc(72% + 1px));
  background-size: 100% 100%;
  opacity: 1;
  overflow: visible;
}
.pulse__legend {
  list-style: none;
  padding: 10px 0 0;
  margin: 8px 0 0;
  border-top: 1px solid var(--pulse-rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.pulse__legend-item {
  display: grid;
  grid-template-columns: 12px 32px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  padding: 3px 0;
}
.pulse__legend-item--fav { font-weight: 700; }
.pulse__legend-swatch {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  align-self: center;
}
.pulse__legend-item--fav .pulse__legend-swatch { height: 5px; }
.pulse__legend-num {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  color: var(--pulse-muted);
  font-variant-numeric: tabular-nums;
}
.pulse__legend-name {
  color: var(--pulse-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pulse__legend-price {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--pulse-ink);
  font-weight: 700;
}
.pulse__winner {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
  color: var(--pulse-sage-strong);
  font-size: 12px;
  padding: 2px 8px;
  background: var(--pulse-sage-tint);
  border-radius: 3px;
  font-weight: 500;
}

/* Ghost variant of the chip — same silhouette as the primary CTA
 * but low-key visual weight, since Refresh is a secondary action.
 */
.pulse__chip--ghost {
  background: transparent;
  color: var(--pulse-ink);
  border-color: var(--pulse-rule-strong);
  cursor: pointer;
  font-family: inherit;
}
.pulse__chip--ghost:hover {
  background: var(--pulse-sage-tint);
  color: var(--pulse-sage-strong);
  border-color: var(--pulse-sage);
}
.pulse__chip[disabled] {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
}

/* Refreshing pulse: subtle heartbeat on the freshness dot while the
 * card is being re-fetched. */
.pulse--refreshing .pulse__freshness-dot { animation-duration: 0.7s; }

/* ─── Pick Winner variant (DEN-PW-1/2) ──────────────────────
 * The .pw class layers an antique-gold accent + confidence
 * semantics on top of the shared .pulse shell. Sage stays reserved
 * for Fox Signals — this reads as a sibling product, not a clone.
 */
.pulse.pw {
  /* DEN-PW-WIDTH · Capped like the other four picks cards.
     `.pulse` has never had a max-width, so on a wide monitor this
     card stretched the whole chat column and pushed every price and
     position to the far edge, a foot from the horse it belonged to.
     720px is what den-bod / den-htw / den-tr / den-lod use, so the
     five now read as one family.

     Scoped to .pulse.pw rather than .pulse: market pulse, the signal
     Width is capped on the shared .pulse shell — see
     DEN-PULSE-WIDTH. */
  --pw-gold: #a97c2a;
  --pw-gold-strong: #7d5a1e;
  --pw-gold-tint: #f0e4c8;
  --conf-low: #8a8a7a;
  --conf-mid: #78725e;
  --conf-high: #2d7040;
  --conf-max: #8b3a1d;
  --conf-track: #e5dcc7;
  --pw-won:    #2d7040;
  --pw-placed: #a97c2a;
  --pw-lost:   #8a4030;
}
@media (prefers-color-scheme: dark) {
  .pulse.pw {
    --pw-gold: #e0b562;
    --pw-gold-strong: #f0cf88;
    --pw-gold-tint: #2b2416;
    --conf-low: #7a7565;
    --conf-mid: #948d75;
    --conf-high: #7bc190;
    --conf-max: #d97a5a;
    --conf-track: #2b2818;
    --pw-won:    #7bc190;
    --pw-placed: #e0b562;
    --pw-lost:   #c78876;
  }
}
[data-theme="light"] .pulse.pw {
  --pw-gold: #a97c2a; --pw-gold-strong: #7d5a1e; --pw-gold-tint: #f0e4c8;
  --conf-low: #8a8a7a; --conf-mid: #78725e; --conf-high: #2d7040; --conf-max: #8b3a1d;
  --conf-track: #e5dcc7;
  --pw-won: #2d7040; --pw-placed: #a97c2a; --pw-lost: #8a4030;
}
[data-theme="dark"] .pulse.pw {
  --pw-gold: #e0b562; --pw-gold-strong: #f0cf88; --pw-gold-tint: #2b2416;
  --conf-low: #7a7565; --conf-mid: #948d75; --conf-high: #7bc190; --conf-max: #d97a5a;
  --conf-track: #2b2818;
  --pw-won: #7bc190; --pw-placed: #e0b562; --pw-lost: #c78876;
}

/* Header — repaint the pulse eyebrow with the gold accent */
.pw .pw__header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--pulse-rule);
}
.pw .pw__eyebrow {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pw-gold-strong); font-weight: 700;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
  line-height: 1.35;
}
.pw .pw__eyebrow-mark {
  width: 12px; height: 12px;
  display: inline-block;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 55%,
      transparent 34%, var(--pw-gold) 34% 46%, transparent 46%);
}
.pw .pw__title {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 22px; line-height: 1.18; font-weight: 500;
  letter-spacing: -0.012em; margin: 0 0 10px;
  color: var(--pulse-ink);
  text-wrap: balance;
}
.pw .pw__meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--pulse-muted); flex-wrap: wrap;
}
.pw .pw__stat {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.pw .pw__record {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 2px 8px; border-radius: 3px;
  background: var(--pw-gold-tint); color: var(--pw-gold-strong);
  font-weight: 600; font-size: 12px;
}
.pw .pw__record-headline {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* Meetings index (step 1) ───────────────────────────────── */
.pw .pw__meetings {
  list-style: none;
  padding: 4px 0;
  margin: 0;
}
/* DEN-PW-FLAT · The meeting drill-down is gone, and with it the
   row layouts it owned: .pw__meeting-row, .pw__race-list and the
   .pw__race grid.

   The last of those mattered beyond tidiness. `.pw .pw__race` set
   `display: grid` with four columns and 22px of padding, and the new
   selector's time chips carry `pw__race` as their JS hook — at (0,2,0)
   it outweighed `.pw__slot`, so every chip rendered as a blown-out
   grid box. `pw__race` is now a hook and nothing else: no rule in this
   file styles it, and the chip owns its own appearance. */

/* Pick card ─────────────────────────────────────────────── */
.pw .pw__pick {
  padding: 20px 22px 6px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 132px;
  gap: 22px;
  align-items: center;
}
@media (max-width: 640px) {
  .pw .pw__pick {
    grid-template-columns: minmax(0,1fr);
    justify-items: start;
  }
  .pw .pw__dial { align-items: flex-start; }
}
.pw .pw__pick-block { min-width: 0; }
.pw .pw__pick-tag {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pw-gold-strong); font-weight: 700;
  margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.pw .pw__pick-tag::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pw-gold);
}
.pw .pw__pick-horse {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 30px; line-height: 1.05; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--pulse-ink);
  margin: 0 0 6px;
  text-wrap: balance;
}
.pw .pw__pick-price {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--pulse-muted);
  font-size: 14px;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.pw .pw__pick-price .now {
  color: var(--pulse-ink); font-weight: 700; font-size: 18px;
}
.pw .pw__pick-price .arrow { color: var(--pulse-muted-2); }
.pw .pw__pick-conn {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-style: italic; color: var(--pulse-muted); font-size: 13px;
  margin: 4px 0 0;
}

/* Confidence dial */
.pw .pw__dial {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
}
.pw .pw__dial svg { display: block; }
.pw .pw__dial-value {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--pulse-ink);
  line-height: 1;
  margin-top: -30px;
  text-align: center;
  letter-spacing: -0.02em;
}
.pw .pw__dial-value sub {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; vertical-align: baseline;
  color: var(--pulse-muted); font-weight: 400; margin-left: 2px;
}
.pw .pw__dial-label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pulse-muted); font-weight: 700;
  margin-top: 8px;
}
.pw .pw__dial-arc--low    { stroke: var(--conf-low); }
.pw .pw__dial-arc--medium { stroke: var(--conf-mid); }
.pw .pw__dial-arc--high   { stroke: var(--conf-high); }
.pw .pw__dial-arc--max    { stroke: var(--pw-gold); }

/* Signal chips */
.pw .pw__signals {
  padding: 4px 22px 16px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pw .pw__signal {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--pulse-rule-strong);
  border-radius: 20px;
  background: var(--pulse-paper);
  font-size: 12px;
  color: var(--pulse-ink);
  line-height: 1.35;
}
.pw .pw__signal-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pw-gold);
}

/* Shortlist */
.pw .pw__shortlist {
  padding: 12px 22px 16px;
  border-top: 1px solid var(--pulse-rule);
  background: var(--pulse-paper-inset);
}
.pw .pw__shortlist-label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pulse-muted); font-weight: 700; margin: 0 0 10px;
}
.pw .pw__alt {
  display: grid;
  /* DEN-PW-WIDTH · Four columns, not three. The finishing position
     was added as a fourth child of a three-column grid, so it wrapped
     to an implicit row and sat under the price instead of beside it. */
  grid-template-columns: minmax(0,1fr) 90px auto 46px;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px dashed var(--pulse-rule);
}
.pw .pw__alt:first-of-type { border-top: 0; }
.pw .pw__alt-horse {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-weight: 500; font-size: 15px;
  color: var(--pulse-ink);
}
.pw .pw__alt-conn {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-style: italic; color: var(--pulse-muted); font-size: 12px;
  display: block; margin-top: 1px;
}
.pw .pw__alt-bar {
  display: block;
  height: 5px; border-radius: 3px; background: var(--conf-track);
  overflow: hidden;
}
.pw .pw__alt-bar-fill {
  display: block; height: 100%;
  background: var(--pw-gold);
  border-radius: 3px;
}
.pw .pw__alt-conf-value {
  display: block;
  font-size: 10px; color: var(--pulse-muted);
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  text-align: right;
}
.pw .pw__alt-price {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px; color: var(--pulse-ink); font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* Result banner */
.pw .pw__result-banner {
  margin: 4px 22px 12px;
  padding: 10px 14px;
  border-radius: 4px;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 14px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.pw .pw__result-banner--won    { background: rgba(45,112,64,0.10);  color: var(--pw-won); }
.pw .pw__result-banner--placed { background: rgba(169,124,42,0.10); color: var(--pw-placed); }
.pw .pw__result-banner--lost   { background: rgba(138,64,48,0.08);  color: var(--pw-lost); }
.pw .pw__result-icon {
  font-weight: 700; font-family: -apple-system, system-ui, sans-serif;
}

/* Paid-tier hint */
.pw .pw__paid-hint {
  padding: 10px 22px 18px;
  font-size: 12px;
  color: var(--pulse-muted);
  font-style: italic;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  text-align: center;
  margin: 0;
}
.pw .pw__paid-hint strong {
  color: var(--pw-gold-strong);
  font-style: normal;
  font-weight: 600;
}

/* Footer overrides — gold CTA vs sage default */
.pw .pw__footer {
  padding: 12px 22px 14px;
  border-top: 1px solid var(--pulse-rule);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
/* Same flex contract as .pulse__footer — see DEN-PULSE-FOOTER. The
   pw footer note carries a publish time and a sentence, so it is the
   longer of the two and would clip its chips for the same reason. */
.pw .pw__footer-note {
  font-size: 12px; color: var(--pulse-muted); line-height: 1.4;
  flex: 1 1 auto; min-width: 0;
}
.pw .pw__footer-note a {
  color: var(--pw-gold-strong);
  text-decoration: none;
  border-bottom: 1px dotted var(--pw-gold);
}
.pw .pw__footer-note strong { color: var(--pulse-ink); font-weight: 600; }
.pw .pw__footer-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.pw .pw__chip {
  font-size: 12px; padding: 6px 12px;
  border: 1px solid var(--pw-gold); background: var(--pw-gold);
  color: var(--pulse-paper); border-radius: 20px;
  font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center;
  cursor: pointer;
  flex: 0 0 auto; white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease;
  font-family: inherit;
}
.pw .pw__chip:hover {
  background: var(--pw-gold-strong); border-color: var(--pw-gold-strong);
  text-decoration: none;
}
.pw .pw__chip--ghost {
  background: transparent; color: var(--pulse-ink);
  border-color: var(--pulse-rule-strong);
}
.pw .pw__chip--ghost:hover {
  background: var(--pw-gold-tint); color: var(--pw-gold-strong);
  border-color: var(--pw-gold);
}
.pw .pw__chip:focus-visible {
  outline: 2px solid var(--pw-gold);
  outline-offset: 2px;
}

/* Mobile — reflow row into two lines. */
@media (max-width: 640px) {
  .pulse__header  { padding: 16px 16px 14px; }
  .pulse__title   { font-size: 20px; }
  .pulse__section-title { margin: 0 16px 8px; }
  .pulse__footer  { padding: 12px 16px; }
  .pulse__row {
    grid-template-columns: minmax(0, 1fr) 100px;
    grid-template-areas:
      "horse spark"
      "price price";
    row-gap: 6px;
    padding: 12px 16px;
  }
  .pulse__row-horse { grid-area: horse; }
  .pulse__row-spark { grid-area: spark; }
  .pulse__row-price { grid-area: price; }
}

/* DEN-PW-RESULT · The verdict, where a reader looks first ─────
   The result used to sit in a small band at the foot of the card
   while the title still announced the pick as though the race
   were ahead of it. It rides with the title now. */
.pw .pw__verdict {
  display: inline-block;
  margin-left: 8px;
  vertical-align: 3px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--pulse-rule, rgba(0,0,0,0.14));
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pw .pw__verdict--won {
  background: var(--pw-gold, #b8912f);
  border-color: var(--pw-gold, #b8912f);
  color: #fff;
}
.pw .pw__verdict--placed  { color: var(--pulse-ink, #2b2b2b); }
.pw .pw__verdict--unplaced {
  color: var(--pulse-muted-2, #8a8a8a);
  font-style: italic;
}

/* Finishing position against each also-considered runner — the
   clearest thing the Honest Record page does, and what shows a
   shortlist was right with only the order wrong. */
.pw .pw__alt-result {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: right;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pulse-muted-2, #8a8a8a);
}
.pw .pw__alt-result--won {
  color: var(--pw-gold, #b8912f);
  text-transform: uppercase;
}
.pw .pw__alt-result--placed { color: var(--pulse-ink, #2b2b2b); }

/* ── DEN-PW-TABLE · The selection as one ranked table ─────────
   Was a hero block for the pick plus two "also considered" rows.
   Pick Winner publishes a top FOUR and the ledger grades all four
   in their own lanes, so a card that stopped at two hid a third of
   the product — and hid the case that matters most, a race where
   the winner was on the shortlist but not at number one. */
.pw .pw__sel { list-style: none; margin: 0; padding: 0; }
.pw .pw__sel-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 62px 96px 42px;
  align-items: center;
  gap: 12px;
  padding: 11px 6px;
  border-top: 1px solid var(--pulse-rule);
  border-left: 3px solid transparent;
}
.pw .pw__sel-cols {
  padding-top: 0;
  padding-bottom: 5px;
  border-top: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pulse-muted-2);
}
.pw .pw__sel-cols span:nth-child(n+3) { text-align: right; }
.pw .pw__sel-cols span:nth-child(4)  { text-align: center; }

/* The pick is MARKED, not set apart — same row, same columns, so
   the reader compares it against the rest rather than reading it
   as a different kind of thing. */
.pw .pw__sel-row--pick {
  border-left-color: var(--pw-won);
  background: var(--pulse-sage-tint);
}
.pw .pw__sel-rank {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--pulse-muted-2);
}
.pw .pw__sel-row--pick .pw__sel-rank { color: var(--pulse-ink); }
.pw .pw__sel-body { min-width: 0; }
.pw .pw__sel-horse {
  display: block;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--pulse-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pw .pw__sel-row--pick .pw__sel-horse { font-size: 18px; }
.pw .pw__sel-conn {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: var(--pulse-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pw .pw__sel-price {
  text-align: right;
  font-weight: 700;
  font-size: 14px;
  color: var(--pulse-ink);
  font-variant-numeric: tabular-nums;
}

/* Badge and finish sit in their own columns and are computed from
   ONE number, so they cannot disagree — no "PLACED" against a 4th. */
.pw .pw__sel-badge {
  justify-self: end;
  min-width: 92px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;            /* an unrun race holds the column */
}
.pw .pw__sel-badge--won {
  background: var(--pw-won);
  color: #fff;
}
.pw .pw__sel-badge--placed {
  background: var(--pulse-paper-inset);
  color: var(--pulse-ink);
}
.pw .pw__sel-badge--unplaced {
  background: transparent;
  border: 1px solid var(--pulse-rule-strong);
  color: var(--pulse-muted);
}
.pw .pw__sel-finish {
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--pulse-muted);
  font-variant-numeric: tabular-nums;
}
.pw .pw__sel-row--pick .pw__sel-finish { color: var(--pulse-ink); }

.pw .pw__conf-line {
  font-size: 11.5px;
  color: var(--pulse-muted);
}

@media (max-width: 560px) {
  /* Connections carry the meeting's flavour but the price, badge and
     finish are what the row is for. */
  .pw .pw__sel-row { grid-template-columns: 20px minmax(0, 1fr) 52px 78px 34px; gap: 8px; }
  .pw .pw__sel-badge { min-width: 74px; font-size: 8.5px; padding: 3px 5px; }
  .pw .pw__sel-conn { display: none; }
}

/* DEN-PW-LINK · The race reference in the eyebrow is a link ────
   It names a time, a course and a race title, which is exactly the
   thing a reader wants to follow, and it was inert text. Inherits
   the eyebrow's own type so it reads as part of the line rather
   than as a link bolted into it. */
.pw .pw__race-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pw .pw__race-link:hover,
.pw .pw__race-link:focus-visible {
  border-bottom-color: currentColor;
  outline: none;
}

/* ── DEN-PW-TODAY · The race picker ───────────────────────────
   Moved here from den.css and rewritten on the pulse palette, so
   the chips belong to the card they sit in.

   The change that matters is the chip. It used to take its whole
   appearance from the result — `border-style: dashed` and faded
   text when the pick was beaten — so on a day reading 0/38 hit all
   thirty-eight times looked unavailable and the selector read as a
   disabled card. A thing whose job is to be tapped must look
   tappable no matter how the picks went. The result is a dot. */
.pw--picker .pw__header--picker {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.pw--picker .pw__head-main { min-width: 0; }
.pw--picker .pw__subtitle {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--pulse-muted);
}
.pw--picker .pw__head-facts {
  display: flex;
  gap: 18px;
  flex: 0 0 auto;
  padding-top: 2px;
}
.pw--picker .pw__fact { display: flex; flex-direction: column; text-align: right; }
.pw--picker .pw__fact-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pulse-muted-2);
}
.pw--picker .pw__fact-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pulse-ink);
}


/* ─── DEN-MEET · The meetings list, shared ────────────────────
 *
 * Two cards show today's racing as "course, going, and a row of times
 * you can tap": the Pick Winner picker and Today's Card. They differ
 * in which races they list (picker: only those with a published pick;
 * Today's Card: every race), in what a tap does (picker: fetches the
 * pick in-chat; Today's Card: opens the racecard), and in their
 * accent colour. Everything else — the row, the going pill, the chip
 * geometry, the done-meeting dimming — is the same component, so it
 * is written once here rather than copied.
 *
 * The accent is the one variable: each card sets `--meet-accent`, and
 * nothing in this block hard-codes gold or sage.
 *
 * Presentation only. The picker's chips also carry `pw__race`, which
 * is the class den.js matches on — behaviour hook and visual class
 * stay separate so restyling cannot silently unbind a click handler.
 */
.meet { --meet-accent: var(--pulse-sage); }

/* Inset to match the .pulse header and footer, which carry
   22px of their own. Lives on the component so the picker and
   Today's Card cannot drift apart. */
.meet__list { list-style: none; margin: 0; padding: 0 22px; }
.meet__row {
  display: block;
  padding: 12px 0;
  border-top: 1px solid var(--pulse-rule);
}
.meet__row:first-child { border-top: 0; }
/* A finished meeting still carries the day's results, so it is
   dimmed rather than hidden — but it should not compete with one
   that still has races to come. */
.meet__row--done { opacity: 0.66; }

.meet__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 9px;
}
.meet__course {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--pulse-ink);
}
/* Going as a pill rather than italic grey text, which disappeared
   next to the course name. */
.meet__going {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--pulse-paper-inset);
  color: var(--pulse-muted);
}
.meet__going--good,
.meet__going--good-to-firm,
.meet__going--firm { background: var(--pulse-sage-tint); color: var(--pulse-sage-strong); }
.meet__going--soft,
.meet__going--good-to-soft,
.meet__going--heavy { background: var(--pulse-out-tint); color: var(--pulse-out); }
.meet__going--standard,
.meet__going--standard-to-slow { background: var(--pulse-paper-inset); color: var(--pulse-muted); }
.meet__count {
  margin-left: auto;
  font-size: 11px;
  color: var(--pulse-muted-2);
}

.meet__slots { display: flex; flex-wrap: wrap; gap: 7px; }
/* Solid, full-contrast, 36px tall. The primary control of the card
   and the thing a thumb aims at. */
.meet__slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--pulse-rule-strong);
  border-radius: 8px;
  background: var(--pulse-paper);
  color: var(--pulse-ink);
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.meet__slot:hover {
  border-color: var(--meet-accent);
  background: var(--pulse-paper-inset);
  text-decoration: none;
}
.meet__slot:focus-visible {
  outline: 2px solid var(--meet-accent);
  outline-offset: 2px;
}
/* A chip is an <a> on Today's Card, and den.css paints links inside a
   chat turn at (0,2,1) — see DEN-CHIP-INK. Pinned above that so the
   time does not render in link colour on its own card. */
.den__turn--assistant .den__turn-body a.meet__slot { color: var(--pulse-ink); }
.den__turn--assistant .den__turn-body a.meet__slot:hover { color: var(--pulse-ink); }

/* The result, as a marker rather than as the chip's appearance. */
.meet__slot-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.meet__slot-dot--won  { background: var(--pw-won, var(--pulse-in)); }
.meet__slot-dot--lost { background: var(--pulse-rule-strong); }
/* Today's Card marks a race that has run, not a pick that landed —
   there is no pick on this card to have landed. */
.meet__slot-dot--done { background: var(--pulse-muted-2); }

.meet__next {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin: 4px 22px 14px;
  padding: 11px 14px;
  border: 1px solid var(--meet-accent);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font: inherit;
}
.meet__next:hover { background: var(--pulse-paper-inset); text-decoration: none; }
.meet__next-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meet-accent);
}
.meet__next-race {
  flex: 1 1 auto;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--pulse-ink);
}
.meet__next-go { color: var(--meet-accent); font-weight: 700; }
.den__turn--assistant .den__turn-body a.meet__next { color: var(--pulse-ink); }

@media (max-width: 560px) {
  .meet__slot { min-width: 58px; padding: 7px 8px; }
  .meet__list { padding: 0 16px; }
  .meet__next { margin: 4px 16px 14px; }
}

@media (max-width: 560px) {
  .pw--picker .pw__header--picker { gap: 10px; }
  .pw--picker .pw__head-facts { gap: 14px; }
}

/* The picker accents the shared meetings component in gold; see
   DEN-MEET. Today's Card sets sage. Nothing in .meet hard-codes
   either. */
.pw--picker { --meet-accent: var(--pw-gold); }

/* DEN-PW-HORSE · Horse names link to their profile ────────────
   Styled to read as part of the row rather than as a link bolted
   into it — the underline appears on hover, so a table of four
   names does not become four blue rules. */
.pw .pw__sel-horse--link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pw .pw__sel-horse--link:hover,
.pw .pw__sel-horse--link:focus-visible {
  border-bottom-color: currentColor;
  outline: none;
}

/* ─── Top Steamers (DEN-STEAM-1) ─────────────────────────────
 * Reuses the .pulse shell (header / footer / chips / empty) and adds
 * only the tier grouping, the move column and the result badge. The
 * card sits beside Market Pulse in the sidebar's MARKET group, so it
 * borrows every shared token rather than introducing a palette.
 *
 * The row is a four-track grid with exactly four children — rank,
 * horse, move, result. A fifth child added to a four-track grid is
 * how the Pick Winner card once wrapped a finishing position onto
 * the line below its price, so the count is asserted in the tests.
 */

.steam__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
}
.steam__fact { display: flex; flex-direction: column; gap: 1px; }
.steam__fact-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pulse-muted);
}
.steam__fact-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--pulse-ink);
  font-variant-numeric: tabular-nums;
}

.steam__tier { padding: 12px 0 6px; }
.steam__tier + .steam__tier { border-top: 1px solid var(--pulse-rule); }
.steam__tier-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pulse-muted);
}
.steam__tier-glyph { font-size: 13px; }
.steam__tier-name { color: var(--pulse-in); }
.steam__tier-count {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--pulse-paper-inset);
  color: var(--pulse-muted);
  font-variant-numeric: tabular-nums;
}
/* Loudest tier reads loudest. Moderate and light step back so the
   eye lands on the top section, which is the point of grouping. */
.steam__tier--moderate .steam__tier-name,
.steam__tier--light .steam__tier-name { color: var(--pulse-muted); }

.steam__rows { list-style: none; margin: 0; padding: 0; }
.steam__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid transparent;
}
.steam__row + .steam__row { border-top-color: var(--pulse-rule); }
.steam__row:hover { background: var(--pulse-paper-inset); }

.steam__rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--pulse-muted-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.steam__horse { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.steam__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 650;
  color: var(--pulse-ink);
}
.steam__silk {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.steam__number { font-weight: 400; color: var(--pulse-muted-2); font-size: 12px; }
.steam__where { font-size: 12px; color: var(--pulse-muted); }
/* The race link reads as part of the row, not as a link bolted into
   it — underline on hover only, same treatment as the pw table. */
.steam__where a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.steam__where a:hover,
.steam__where a:focus-visible { border-bottom-color: currentColor; outline: none; }

.steam__move {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.steam__was {
  font-size: 12px;
  color: var(--pulse-muted-2);
  text-decoration: line-through;
}
.steam__arrow { color: var(--pulse-muted-2); font-size: 11px; }
.steam__now { font-size: 14px; font-weight: 700; color: var(--pulse-ink); }
.steam__pct {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--pulse-in-tint);
  color: var(--pulse-in);
}

.steam__result { min-width: 0; text-align: right; }
.steam__badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.steam__badge--won    { background: var(--pulse-in);        color: var(--pulse-paper); }
.steam__badge--placed { background: var(--pulse-in-tint);   color: var(--pulse-in); }
.steam__badge--lost   { background: var(--pulse-paper-inset); color: var(--pulse-muted); }
.steam__badge--live   { background: var(--pulse-fox-tint);  color: var(--pulse-fox-ink); }
.steam__badge--void   { background: var(--pulse-paper-inset); color: var(--pulse-muted-2); }
.steam__badge--pending { background: transparent; color: var(--pulse-muted-2); }

/* Mobile — the move and the result share a line under the horse so
   the name keeps its full width instead of wrapping mid-word. */
@media (max-width: 560px) {
  .steam__row {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    row-gap: 4px;
  }
  .steam__move { grid-column: 2; justify-self: start; }
  .steam__result { grid-column: 3; grid-row: 2; }
}

/* ─── DEN-CHIP-INK · Link chips were sage text on a sage pill ──
 *
 * den.css styles prose links inside an assistant turn:
 *
 *     .den__turn--assistant .den__turn-body a { color: var(--den-sage) }
 *
 * That is specificity (0,2,1). `.pulse__chip { color: ... }` is
 * (0,1,0) and `.pw .pw__chip` is (0,2,0), so BOTH lose, and every
 * chip that is an <a> had its cream text repainted in sage — sage on
 * a sage fill, effectively invisible. The <button> chips were
 * untouched, which is why only half of each footer looked wrong and
 * why it read as a hover fault rather than a colour one.
 *
 * These rules are (0,3,1): they beat the prose rule outright rather
 * than tying with it and relying on market_pulse.css being loaded
 * after den.css, which is true today and is not a thing to depend on.
 *
 * Scoped to the chip classes, NOT to `.pulse a` generally — the row
 * links inside these cards genuinely do want to inherit their
 * surrounding colour, and blanket-resetting every link in a card
 * would take that away.
 */
.den__turn--assistant .den__turn-body a.pulse__chip {
  color: var(--pulse-paper);
}
.den__turn--assistant .den__turn-body a.pulse__chip:hover {
  color: var(--pulse-paper);
  border-bottom-color: transparent;
}
.den__turn--assistant .den__turn-body a.pulse__chip--ghost {
  color: var(--pulse-ink);
}
.den__turn--assistant .den__turn-body a.pulse__chip--ghost:hover {
  color: var(--pulse-sage-strong);
}
.den__turn--assistant .den__turn-body a.pw__chip {
  color: var(--pulse-paper);
}
.den__turn--assistant .den__turn-body a.pw__chip:hover {
  color: var(--pulse-paper);
  border-bottom-color: transparent;
}
.den__turn--assistant .den__turn-body a.pw__chip--ghost {
  color: var(--pulse-ink);
}
.den__turn--assistant .den__turn-body a.pw__chip--ghost:hover {
  color: var(--pw-gold-strong);
}

/* ─── DEN-SIGNAL-LINK · The horse opens its race ──────────────
 * Reads as part of the row rather than as a link bolted into it —
 * underline on hover only, the same treatment the Pick Winner table
 * and the Top Steamers rows use. The colour is pinned for the same
 * specificity reason as the chips above. */
.den__turn--assistant .den__turn-body a.pulse__kind-row-horse--link,
.pulse__kind-row-horse--link {
  color: var(--pulse-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.den__turn--assistant .den__turn-body a.pulse__kind-row-horse--link:hover,
.den__turn--assistant .den__turn-body a.pulse__kind-row-horse--link:focus-visible,
.pulse__kind-row-horse--link:hover,
.pulse__kind-row-horse--link:focus-visible {
  border-bottom-color: currentColor;
  outline: none;
}
/* A race-wide signal names the race, not a runner — it is a fact
   about the card rather than about a horse, so it reads quieter. */
.pulse__kind-row-horse--race {
  font-style: italic;
  color: var(--pulse-muted);
}
.den__turn--assistant .den__turn-body a.pulse__kind-row-horse--race {
  color: var(--pulse-muted);
}
/* ─── Today's Card (DEN-TC-1) ─────────────────────────────────
 * The .meet component supplies the meetings list; this adds only the
 * header and the accent. Sage rather than gold: gold is reserved for
 * Pick Winner, and this card is the schedule, not a tip.
 */
.tc { --meet-accent: var(--pulse-sage); }

.tc__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.tc__head-main { min-width: 0; }
.tc__subtitle {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--pulse-muted);
}
.tc__facts {
  display: flex;
  gap: 18px;
  flex: 0 0 auto;
  padding-top: 2px;
}
.tc__fact { display: flex; flex-direction: column; text-align: right; }
.tc__fact-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pulse-muted-2);
}
.tc__fact-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pulse-ink);
}
.meet__overflow {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 6px;
  font-size: 11px;
  color: var(--pulse-muted-2);
}

@media (max-width: 560px) {
  .tc__header { gap: 10px; }
  .tc__facts { gap: 14px; }
}
/* ─── Yesterday's Results (DEN-RES-1 / DEN-RES-2) ─────────────
 * The board reuses .meet for its meetings list and adds a header and
 * a headline line. Sage accent: this is a record of what happened,
 * not a tip, and gold is reserved for Pick Winner.
 */
.res { --meet-accent: var(--pulse-sage); }

.res__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.res__head-main { min-width: 0; }
.res__subtitle {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--pulse-muted);
}
.res__facts { display: flex; gap: 18px; flex: 0 0 auto; padding-top: 2px; }
.res__fact { display: flex; flex-direction: column; text-align: right; }
.res__fact-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pulse-muted-2);
}
.res__fact-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pulse-ink);
  font-variant-numeric: tabular-nums;
}

.res__headline {
  margin: 12px 22px 2px;
  padding: 9px 12px;
  border-left: 2px solid var(--pulse-sage);
  background: var(--pulse-paper-inset);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: var(--pulse-ink);
}
.res__headline-where { color: var(--pulse-muted); font-size: 12px; }

/* A favourite winning is the dot's only meaning here. The picker's
   won/lost tones would claim a pick this board does not carry. */
.meet__slot-dot--fav { background: var(--pulse-sage); }

/* ── One settled race ─────────────────────────────────────── */
.res__meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--pulse-muted);
}
.res__podium { padding: 4px 22px 8px; }
/* Four tracks, four children: position, horse, price, margin. */
.res__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--pulse-rule);
}
.res__row:first-child { border-top: 0; }
.res__row--1 .res__name { font-weight: 700; }
.res__pos {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pulse-muted-2);
  font-variant-numeric: tabular-nums;
}
.res__row--1 .res__pos { color: var(--pulse-sage-strong); }
.res__horse { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.res__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  color: var(--pulse-ink);
}
.res__silk {
  width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.res__name a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.res__name a:hover, .res__name a:focus-visible { border-bottom-color: currentColor; outline: none; }
.den__turn--assistant .den__turn-body .res__name a { color: var(--pulse-ink); }
.res__conn { font-size: 12px; color: var(--pulse-muted); }
.res__conn-lbl {
  display: inline-block;
  min-width: 11px;
  margin-right: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pulse-muted-2);
  text-transform: uppercase;
}
.res__conn-sep { margin: 0 6px; color: var(--pulse-muted-2); }
.res__sp {
  font-size: 14px;
  font-weight: 700;
  color: var(--pulse-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.res__fav {
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--pulse-sage-tint);
  color: var(--pulse-sage-strong);
}
.res__beaten {
  font-size: 12px;
  color: var(--pulse-muted);
  white-space: nowrap;
  text-align: right;
  min-width: 0;
}

.res__calls {
  margin: 4px 22px 12px;
  padding: 10px 12px;
  border: 1px solid var(--pulse-rule);
  border-radius: 6px;
  background: var(--pulse-paper-inset);
}
.res__calls-head {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pulse-muted);
}
.res__call {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 3px 0;
  font-size: 13px;
}
.res__call-src { color: var(--pulse-muted); }
.res__call-horse { flex: 1 1 auto; font-weight: 600; color: var(--pulse-ink); min-width: 0; }
.res__call-badge {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.res__call-badge--won    { background: var(--pulse-in);          color: var(--pulse-paper); }
.res__call-badge--placed { background: var(--pulse-in-tint);     color: var(--pulse-in); }
.res__call-badge--lost   { background: var(--pulse-paper);       color: var(--pulse-muted); border: 1px solid var(--pulse-rule-strong); }

@media (max-width: 560px) {
  .res__header { gap: 10px; }
  .res__facts { gap: 14px; }
  .res__headline, .res__calls { margin-left: 16px; margin-right: 16px; }
  .res__podium { padding: 4px 16px 8px; }
  .res__row { grid-template-columns: 28px minmax(0, 1fr) auto; row-gap: 3px; }
  .res__beaten { grid-column: 3; grid-row: 2; }
}
/* ─── This week's Big Race (DEN-BIG-1) ────────────────────────
 * The rows here are FLEX, not grid, on purpose: half the fields on a
 * Featured row are optional, so a row's child count varies with what
 * the editor filled in. A grid with a fixed track count and a varying
 * number of children is how the Pick Winner card once wrapped a
 * finishing position onto the line below its price.
 */
.big__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.big__head-main { min-width: 0; }
.big__subtitle {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--pulse-muted);
  font-style: italic;
}
.big__when {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: 1px;
  padding-top: 2px;
}
.big__when-date {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pulse-muted-2);
}
.big__when-time {
  font-size: 19px;
  font-weight: 700;
  color: var(--pulse-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.big__when-course { font-size: 12px; color: var(--pulse-muted); }

.big__ran {
  margin: 12px 22px 0;
  padding: 8px 12px;
  border-left: 2px solid var(--pulse-out);
  background: var(--pulse-out-tint);
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  color: var(--pulse-ink);
}
.big__ran a { color: inherit; font-weight: 600; }
.den__turn--assistant .den__turn-body .big__ran a { color: var(--pulse-ink); }

.big__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 22px 4px;
}
.big__strip-item {
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--pulse-paper-inset);
  font-size: 11.5px;
  color: var(--pulse-ink);
}
.big__strip-lbl {
  margin-right: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pulse-muted-2);
}
/* Where to watch is the one fact a reader acts on today. */
.big__strip-item--tv {
  background: var(--pulse-sage-tint);
  color: var(--pulse-sage-strong);
  font-weight: 700;
}

.big__verdict {
  margin: 10px 22px 2px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pulse-ink);
}

.big__market { padding: 10px 22px 4px; }
.big__pick {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--pulse-rule);
}
.big__pick:first-child { border-top: 0; }
.big__pick-lbl {
  flex: 0 0 auto;
  min-width: 92px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pulse-muted-2);
}
.big__pick--fox .big__pick-lbl { color: var(--pulse-fox-ink); }
.big__pick-horse {
  font-size: 15px;
  font-weight: 650;
  color: var(--pulse-ink);
}
.big__pick-odds {
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--pulse-paper-inset);
  font-size: 12px;
  font-weight: 700;
  color: var(--pulse-ink);
  font-variant-numeric: tabular-nums;
}
.big__pick--fox .big__pick-odds {
  background: var(--pulse-fox-tint);
  color: var(--pulse-fox-ink);
}
.big__pick-note {
  flex: 1 1 auto;
  text-align: right;
  min-width: 0;
  font-size: 12px;
  color: var(--pulse-muted);
}

/* The models get their own block, well away from Mr Fox's pick. */
.big__models {
  margin: 8px 22px 12px;
  padding: 10px 12px;
  border: 1px solid var(--pulse-rule);
  border-radius: 6px;
}
.big__models-head {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pulse-muted);
}
.big__models-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.big__model {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 5px;
  background: var(--pulse-paper-inset);
  min-width: 0;
}
.big__model-name {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pulse-muted-2);
}
.big__model-horse {
  font-size: 13px;
  font-weight: 650;
  color: var(--pulse-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .big__header { gap: 10px; }
  .big__when { flex-direction: row; align-items: baseline; gap: 8px; }
  .big__strip, .big__market { padding-left: 16px; padding-right: 16px; }
  .big__verdict, .big__models, .big__ran { margin-left: 16px; margin-right: 16px; }
  .big__pick-lbl { min-width: 0; flex-basis: 100%; }
  .big__pick-note { flex-basis: 100%; text-align: left; }
}
/* ─── Next Off (DEN-NEXT-1) ───────────────────────────────────
 * The clock is the card. Everything else is context for it.
 */
.nx__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.nx__head-main { min-width: 0; }
.nx .pulse__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.nx .pulse__title a:hover,
.nx .pulse__title a:focus-visible { border-bottom-color: currentColor; outline: none; }
.den__turn--assistant .den__turn-body .nx .pulse__title a { color: var(--pulse-ink); }
.nx__race-name {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--pulse-muted);
}

.nx__clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: 1px;
}
.nx__clock-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pulse-muted-2);
}
.nx__clock-val {
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--pulse-ink);
  font-variant-numeric: tabular-nums;
}
/* Inside five minutes the card starts shouting, quietly. */
.nx__clock-val--imminent { color: var(--pulse-out); }
/* Past the off, the number stops being a countdown and says so. */
.nx__clock-val--gone {
  font-size: 15px;
  color: var(--pulse-muted);
  font-weight: 600;
}

.nx__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 22px 4px;
}
.nx__strip-item {
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--pulse-paper-inset);
  font-size: 11.5px;
  color: var(--pulse-ink);
}

.nx__pick {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  margin: 10px 22px 2px;
  padding: 9px 12px;
  border: 1px solid var(--pulse-rule);
  border-radius: 6px;
}
.nx__pick-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pulse-muted-2);
}
.nx__pick-horse { font-size: 15px; font-weight: 650; color: var(--pulse-ink); }
.nx__pick-odds {
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--pulse-paper-inset);
  font-size: 12px;
  font-weight: 700;
  color: var(--pulse-ink);
  font-variant-numeric: tabular-nums;
}

.nx__then {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 22px 4px;
}
.nx__then-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pulse-muted-2);
}
.nx__then-races { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.nx__then-race {
  padding: 5px 10px;
  border: 1px solid var(--pulse-rule-strong);
  border-radius: 8px;
  background: var(--pulse-paper);
  font-size: 12px;
  color: var(--pulse-ink);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background 120ms ease, border-color 120ms ease;
}
.nx__then-race:hover {
  border-color: var(--pulse-sage);
  background: var(--pulse-paper-inset);
  text-decoration: none;
}
.den__turn--assistant .den__turn-body a.nx__then-race { color: var(--pulse-ink); }

@media (max-width: 560px) {
  .nx__header { gap: 10px; }
  .nx__clock { flex-direction: row; align-items: baseline; gap: 8px; }
  .nx__clock-val { font-size: 22px; }
  .nx__strip, .nx__then { padding-left: 16px; padding-right: 16px; }
  .nx__pick { margin-left: 16px; margin-right: 16px; }
}