/* Live charts inside articles (article-charts.js): a market's moneyline on
   each exchange, or a strategy's paper account. */
.rd-body .ac, .ac {
  margin: 22px 0; padding: 14px 16px 10px; border: 1px solid var(--tl-line-10); border-radius: var(--tl-r-card, 10px);
  background: var(--tl-card-body); }
.ac-load { padding: 40px 0; text-align: center; font: 12px var(--tl-mono); color: var(--tl-ink-50); }
.ac-title { margin: 0 0 8px; font: 600 15px var(--tl-font); color: var(--tl-ink); }
.ac-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ac-teams { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 14px var(--tl-font); color: var(--tl-ink); }
.ac-team { display: inline-flex; align-items: center; gap: 6px; }
.rd-body .ac-team img, .ac-team img { width: 22px; height: 22px; object-fit: contain; margin: 0; border: 0; background: none; }
.ac-at { font: 11px var(--tl-mono); color: var(--tl-ink-50); text-transform: uppercase; }
.ac-when { font: 12px var(--tl-mono); color: var(--tl-ink-60); white-space: nowrap; }
.ac-when.is-live { color: var(--tl-up); }
.ac-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.ac-toggle { display: inline-flex; padding: 2px; border: 1px solid var(--tl-line-10); border-radius: 8px; }
.rd-body .ac-side, .ac-side {
  margin: 0; padding: 4px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--tl-ink-60);
  font: 500 12px var(--tl-font); cursor: pointer; width: auto; }
.ac-side.is-on { background: var(--tl-line-10); color: var(--tl-ink); }
.ac-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.ac-key { display: inline-flex; align-items: center; gap: 5px; font: 12px var(--tl-font); color: var(--tl-ink-60); }
.ac-key i { width: 12px; height: 2px; border-radius: 1px; }
.rd-body .ac-key img, .ac-key img { width: 14px; height: 14px; border-radius: 3px; margin: 0; border: 0; }
.ac-key b { font: 600 12.5px var(--tl-mono); color: var(--tl-ink); }
.ac-plot { position: relative; height: 280px; }
.ac-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--tl-line-06); }
.ac-ranges { display: inline-flex; gap: 2px; }
.rd-body .ac-range, .ac-range {
  margin: 0; padding: 3px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--tl-ink-50);
  font: 500 11.5px var(--tl-mono); cursor: pointer; width: auto; }
.ac-range:hover { color: var(--tl-ink); }
.ac-range.is-on { background: var(--tl-line-08); color: var(--tl-ink); }
.ac-note { flex: 1; font: 11.5px var(--tl-mono); color: var(--tl-ink-45); }
.rd-body .ac-link, .ac-link { font: 500 12.5px var(--tl-font); color: var(--tl-ink-70); text-decoration: none; white-space: nowrap; }
.ac-link:hover { color: var(--tl-ink); }

/* a strategy */
.ac-strat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.rd-body .ac-strat-name, .ac-strat-name { font: 600 15px var(--tl-font); color: var(--tl-ink); text-decoration: none; }
.ac-strat-rule { flex-basis: 100%; font: 12.5px var(--tl-font); color: var(--tl-ink-60); }
.ac-stats { display: flex; gap: 18px; margin: 10px 0 6px; }
.ac-stat { display: flex; flex-direction: column; gap: 1px; }
.ac-stat em { font-style: normal; font: 10.5px var(--tl-font); text-transform: uppercase; letter-spacing: .06em; color: var(--tl-ink-50); }
.ac-stat b { font: 600 14px var(--tl-mono); color: var(--tl-ink); }
.ac-stat b.is-pos { color: var(--tl-up); }
.ac-stat b.is-neg { color: var(--tl-down); }
.ac-head:has(.ac-stats) { align-items: flex-end; }
.ac-locked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; padding: 18px; border: 1px dashed var(--tl-line-12);
  border-radius: 8px; font: 13px var(--tl-font); color: var(--tl-ink-70); }
@media (max-width: 640px) { .ac-plot { height: 220px; } .ac-stats { gap: 12px; } }

/* mentions: the team's logo, then the name, inline in the text (no chip) */
.rd-body .rd-chip[data-ref], .rd-chip[data-ref] {
  display: inline; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  height: auto; font-size: inherit; line-height: inherit; vertical-align: baseline;
  color: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; }
.rd-body .rd-chip[data-ref]:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tl-line-20); }
.rd-body .rd-chip[data-ref] img {
  display: inline-block; width: 1.05em; height: 1.05em; margin: 0 .28em 0 0; vertical-align: -0.16em;
  border: 0; border-radius: 0; object-fit: contain; background: none; }
/* ESPN's two drawings of each logo: light backgrounds, dark ones */
.rd-chip .rd-logo-d { display: none !important; }
html:not(.si-light) .rd-chip .rd-logo-d { display: inline-block !important; }
html:not(.si-light) .rd-chip .rd-logo-l { display: none !important; }

/* social embeds: a YouTube video as wide as an image, an X post centered */
.rd-body .rd-social, .rd-social { margin: 24px 0; }
.rd-yt-frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--tl-r-card, 10px); background: var(--tl-fill-05, #000); }
.rd-yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; }
.rd-x { display: flex; flex-direction: column; align-items: center; min-height: 60px; }
.rd-x figcaption { align-self: stretch; }
.rd-body .rd-social figcaption { text-align: center; }
.rd-x .twitter-tweet { margin: 0 auto !important; }
.rd-x.is-drawn .rd-x-fallback { display: none; }
.rd-body .rd-x-fallback { align-self: center; font: 13px var(--tl-font); color: var(--tl-ink-60); }

/* image captions centered too, as under embeds */
.rd-body figure > figcaption { text-align: center; }

/* a note: small print for notes, sources [1] and disclaimers */
.rd-body p.rd-note, .rd-note { margin: 10px 0; font-size: 13px; line-height: 1.55; color: var(--tl-ink-60); }
.rd-body p.rd-note + p.rd-note { margin-top: 4px; }

/* ---------- Native chart blocks (components/article-chart.html, article-chart-block.js) ---------- */
.sic { padding: 16px 18px 12px; }
.sic-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 12px; }
.sic-head-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rd-body .sic-title, .sic-title { display: flex; align-items: center; gap: 9px; font: 650 15.5px/1.35 var(--tl-font); letter-spacing: -0.2px; color: var(--tl-ink); }
.rd-body .sic-title-logo, .sic-title-logo { flex: none; width: 24px; height: 24px; margin: 0; border: 0; object-fit: contain; background: none; }
.sic-title .sic-dark { display: inline; }
html.si-light .sic-title .sic-light { display: inline; }
.sic-title .sic-light, html.si-light .sic-title .sic-dark { display: none; }
.rd-body .sic-sub, .sic-sub { font: 400 13px/1.45 var(--tl-font); color: var(--tl-ink-60); }
.sic-plot { position: relative; width: 100%; }
.sic-static svg, .sic-live svg { display: block; width: 100%; height: auto; }
.sic-live { width: 100%; }
.sic-live > div, .sic-live svg { max-width: 100%; }
/* the static render for the page's theme, until the live view draws */
.sic-light { display: none; }
html.si-light .sic-light { display: block; }
html.si-light .sic-dark { display: none; }
.sic.is-live .sic-static { display: none; }
.sic-foot { margin-top: 10px; font: 500 10.5px/1.3 var(--tl-mono); letter-spacing: 0.5px; text-transform: uppercase; color: var(--tl-ink-50); }
/* The mark, top right: logo and wordmark as in the nav, small. */
.sic-mark { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
  font: italic 700 12px/1 var(--tl-font); letter-spacing: -0.2px; color: var(--tl-ink-60); white-space: nowrap; }
.rd-body .sic-mark img, .sic-mark img { width: 16px; height: 16px; margin: 0; border: 0; border-radius: 4px; object-fit: cover; background: none; }
.sic-tip { position: fixed; z-index: 2500; min-width: 150px; max-width: 280px; padding: 10px 12px; pointer-events: none;
  border-radius: var(--tl-r-card); background: rgba(255, 255, 255, 0.86); color: var(--tl-ink);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--tl-float-shadow), 0 20px 40px -22px rgba(16, 20, 24, 0.35); font: 400 12px/1.4 var(--tl-font); }
html:not(.si-light) .sic-tip { background: rgba(37, 40, 44, 0.86); }
.sic-tip-head { display: flex; align-items: center; gap: 8px; }
.sic-tip-logo { flex: none; width: 18px; height: 18px; object-fit: contain; }
.sic-tip-swatch { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.sic-tip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 650; letter-spacing: -0.2px; color: var(--tl-ink); }
.sic-tip-value { margin-left: auto; padding-left: 10px; font-family: var(--tl-mono); font-size: 12.5px; font-weight: 600; color: var(--tl-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sic-tip-sub { margin-top: 4px; font-size: 11.5px; color: var(--tl-ink-60); }
.sic-tip[hidden] { display: none; }
@media (max-width: 560px) {
  .sic { padding: 14px 12px 10px; }
}

/* ---------- Sports Index pick (components/verdict.html, services/verdicts) ---------- */
.vd { margin: 22px 0; padding: 16px 18px 12px; border: 1px solid var(--tl-line-12); border-radius: var(--tl-r-card, 10px);
  background: var(--tl-card-body); box-shadow: inset 3px 0 0 var(--tl-ink); }
.vd.is-won { box-shadow: inset 3px 0 0 var(--tl-up); }
.vd.is-lost { box-shadow: inset 3px 0 0 var(--tl-down); }
.vd.is-push { box-shadow: inset 3px 0 0 var(--tl-ink-35); }
.vd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vd-kicker { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--tl-mono); letter-spacing: 0.6px; text-transform: uppercase; color: var(--tl-ink-60); }
.rd-body .vd-kicker img, .vd-kicker img { width: 14px; height: 14px; margin: 0; border: 0; border-radius: 3px; background: none; }
.vd-conf { display: inline-flex; align-items: center; gap: 7px; font: 600 11px var(--tl-mono); letter-spacing: 0.4px; text-transform: uppercase; color: var(--tl-ink-60); }
.vd-pips { display: inline-flex; gap: 3px; }
.vd-pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--tl-line-14, var(--tl-line-12)); }
.vd-pips i.is-on { background: var(--tl-ink); }
.vd-main { display: flex; align-items: center; gap: 14px; margin: 12px 0 8px; }
.rd-body .vd-logo, .vd-logo { flex: none; width: 44px; height: 44px; margin: 0; border: 0; object-fit: contain; background: none; }
.vd-logo.vd-light { display: none; }
html.si-light .vd-logo.vd-light { display: block; }
html.si-light .vd-logo.vd-dark { display: none; }
.vd-pick-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.vd-pick { font: 700 24px/1.15 var(--tl-font); letter-spacing: -0.5px; color: var(--tl-ink); }
.vd-meta { font: 400 13px var(--tl-font); color: var(--tl-ink-60); }
.vd-meta b { font: 600 13px var(--tl-mono); color: var(--tl-ink); }
.vd-grade { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.vd-grade b { padding: 3px 9px; border-radius: var(--tl-r-chip); font: 700 12px var(--tl-mono); letter-spacing: 0.5px; text-transform: uppercase; background: var(--tl-fill-05); color: var(--tl-ink); }
.vd.is-won .vd-grade b { background: var(--tl-up-bg); color: var(--tl-up); }
.vd.is-lost .vd-grade b { background: var(--tl-down-bg); color: var(--tl-down); }
.vd-pnl { font: 600 12.5px var(--tl-mono); color: var(--tl-ink-60); }
.rd-body .vd-summary, .vd-summary { margin: 0; font: 400 14.5px/1.5 var(--tl-font); color: var(--tl-ink-70, var(--tl-ink)); }
.rd-body .vd-result, .vd-result { margin: 6px 0 0; font: 500 12.5px var(--tl-mono); color: var(--tl-ink-60); }
.vd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 9px;
  border-top: 1px solid var(--tl-line-06); font: 500 11px var(--tl-mono); color: var(--tl-ink-50); }
.rd-body .vd-foot a, .vd-foot a { margin-left: auto; color: var(--tl-ink-50); text-decoration: none; }
.vd-foot a:hover { color: var(--tl-ink); }
@media (max-width: 560px) { .vd-pick { font-size: 20px; } .vd-logo { width: 36px; height: 36px; } }

/* ---------- A game's market chart, in the Markets widget's style (article-charts.js drawGame) ---------- */
/* Lightweight Charts lays itself out with a table: Pico would paint its cells. */
.ac-plot table, .ac-plot tr, .ac-plot td, .ac-plot th {
  background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.ac-game .ac-bar { margin: 12px 0 4px; }
.ac-game .ac-plot { height: 300px; }
.ac-seg > button { gap: 6px; }
.rd-body .ac-seg img, .ac-seg img { display: block; width: 18px; height: 18px; margin: 0; border: 0; object-fit: contain; background: none; }
.ac-seg > button[aria-pressed="false"] img { opacity: 0.55; filter: grayscale(0.6); }
.ac-seg > button:hover img { opacity: 1; filter: none; }
.ac-seg.is-ranges > button { font-family: var(--tl-mono); font-size: 11.5px; padding: 0 9px; }
.ac-game .ac-legend { gap: 4px 14px; align-items: center; }
.ac-game .ac-key { gap: 6px; font: 500 12.5px var(--tl-font); color: var(--tl-ink-60); }
.ac-game .ac-key i { width: 14px; height: 2.5px; border-radius: 2px; }
.rd-body .ac-game .ac-key img, .ac-game .ac-key img { width: 16px; height: 16px; border-radius: 4px; }
.ac-game .ac-key b { font: 600 12.5px var(--tl-mono); color: var(--tl-ink); }
.ac-move { font: 500 11px var(--tl-mono); font-style: normal; color: var(--tl-ink-50); }
.ac-move.is-up { color: var(--tl-up); }
.ac-move.is-down { color: var(--tl-down); }
.rd-body .ac-tool, .ac-tool {
  display: inline-flex; align-items: center; gap: 6px; width: auto; height: 26px; margin: 0; padding: 0 10px;
  border: 1px solid var(--tl-line-10); border-radius: var(--tl-r-chip); background: var(--tl-control);
  font: 500 12px var(--tl-font); color: var(--tl-ink); cursor: pointer; }
.ac-tool[aria-pressed="false"] { color: var(--tl-ink-50); }
.ac-tool[aria-pressed="true"] { border-color: var(--tl-line-20); }
.ac-game .ac-foot { gap: 10px; }

/* The whole history in miniature under a game's chart, with the window in
   view (as on Markets: markets.css .mk-perf-nav), then one bar: the side
   toggle and the legend. */
.ac-nav { position: relative; height: 30px; margin: 8px 0 4px; cursor: col-resize; touch-action: none; user-select: none; }
.ac-nav-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.ac-nav .na { fill: var(--tl-fill-05); }
.ac-nav .nl { fill: none; stroke-width: 1; stroke-linejoin: round; opacity: 0.7; }
.ac-nav-dim { position: absolute; top: 0; bottom: 0; background: var(--tl-card-body); opacity: 0.7; pointer-events: none; }
.ac-nav-dim.is-l { left: 0; }
.ac-nav-win { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border: 1.5px solid var(--tl-ink-45); border-radius: 5px; cursor: grab; }
.ac-nav.is-dragging .ac-nav-win { cursor: grabbing; border-color: var(--tl-ink); }
.ac-nav:not(.is-zoomed) .ac-nav-win { cursor: inherit; }
.ac-nav-h { position: absolute; top: 50%; z-index: 1; width: 9px; height: 20px; margin-top: -10px; box-sizing: border-box;
  border: 1.5px solid var(--tl-ink-45); border-radius: 3px; background: var(--tl-card-body); cursor: ew-resize; }
.ac-nav-h.is-l { left: -5px; }
.ac-nav-h.is-r { right: -5px; }
.ac-nav-h::after { content: ''; position: absolute; left: 50%; top: 5px; bottom: 5px; width: 0; margin-left: -0.5px; border-left: 1px solid var(--tl-ink-45); }
.ac-nav-h:hover, .ac-nav.is-dragging .ac-nav-h { border-color: var(--tl-ink); }
.ac-game .ac-foot { justify-content: space-between; gap: 8px 14px; }
/* a mention in a heading takes the heading's weight */
.rd-body :is(h2, h3, h4, h5) .rd-chip[data-ref] { font-weight: inherit; }