/* ==========================================================================
   League Wire — Prime Time (news.html feed + homepage "From the Wire" cards)

   Page classes are wr-*; the homepage cards are lw-latest / lw-card*. Tokens
   come from assets/prime.css (--pt-*) with the same values as fallbacks, so
   this file also renders on its own. Every selector that sets margin or
   padding on a p, h*, ol or ul is prefixed with .wr-page so it outranks the
   reset in prime.css.
   Legibility floor: body >= 16px, secondary >= 14px, tap targets >= 44px.
   ========================================================================== */

.wr-page, .lw-latest, .lw-card {
  --wr-ac: var(--pt-ac, #D4FF3F);
  --wr-bg: var(--pt-bg, #0C0D10);
  --wr-s1: var(--pt-s1, #14161B);
  --wr-s2: var(--pt-s2, #1C1F26);
  --wr-line: var(--pt-line, #272B33);
  --wr-line2: var(--pt-line-2, #3A3F49);
  --wr-tx: var(--pt-tx, #F3F1EC);
  --wr-tx2: var(--pt-tx2, #B4B9C3);
  --wr-tx3: var(--pt-tx3, #8B919D);
  --wr-ink: var(--pt-ink, #0C0D10);
  --wr-display: var(--pt-display, 'Archivo', 'Arial Narrow', sans-serif);
}

.wr-page [hidden] { display: none !important; }
/* The shared link rule (body.pt a) outranks .pt-skip, which left the focused skip link cream on volt. */
.page-wire a.pt-skip, .page-wire a.pt-skip:hover, .page-wire a.pt-skip:focus { color: var(--pt-ink, #0C0D10); }
.wr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wr-d { font-family: var(--wr-display); font-stretch: 68%; font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; }
.wr-n { font-family: var(--wr-display); font-stretch: 84%; font-weight: 700; font-variant-numeric: tabular-nums; }
.wr-nb { white-space: nowrap; }
/* Boss links: the hit area grows past 44px without moving the text. */
a.wr-who { color: inherit; text-decoration: none; display: inline-block; padding: 12px 14px; margin: -12px -14px; }
/* A hairline ring keeps dark portraits from melting into the card. */
.wr-av { border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--wr-s2); box-shadow: 0 0 0 1px var(--wr-line2); flex: none; display: block; }
.wr-av-initial { display: grid; place-items: center; font-family: var(--wr-display); font-stretch: 68%; font-weight: 800; color: var(--wr-tx2); }
.wr-up { color: var(--wr-ac); }
.wr-down { color: var(--wr-tx3); }

/* ---------- header ---------- */
.wr-head { padding: 72px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; border-bottom: 1px solid var(--wr-line); }
.wr-eb { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wr-tx3); }
.wr-page .wr-title { font-size: 160px; margin-top: 14px; }
.wr-page .wr-sub { font-size: 20px; line-height: 1.5; color: var(--wr-tx2); max-width: 40ch; margin-top: 20px; }
.wr-bot { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--wr-line); border-radius: 16px; max-width: 340px; }
.wr-bot-mark { width: 48px; height: 48px; border-radius: 12px; background: var(--wr-s2); display: grid; place-items: center; color: var(--wr-ac); flex: none; }
.wr-bot b { display: block; font-size: 16px; }
.wr-bot > div > span { display: block; font-size: 14px; line-height: 1.4; color: var(--wr-tx3); }

/* The Wire's two views: the feed and the trade tracker. */
.wr-views { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.wr-page a.wr-view { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--wr-line2); color: var(--wr-tx2); font-size: 16px; font-weight: 700; }
.wr-page a.wr-view:hover { color: var(--wr-tx); border-color: var(--wr-tx3); }
.wr-page a.wr-view[data-wr-view="trades"]:not([aria-current]) { border-color: rgba(212, 255, 63, .55); color: var(--wr-tx); }
.wr-page a.wr-view[aria-current="page"], .wr-page a.wr-view[aria-current="page"]:hover { background: var(--wr-ac); border-color: var(--wr-ac); color: var(--wr-ink); }
.wr-view-n { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--wr-s2); color: var(--wr-tx); font-size: 15px; }
.wr-view[aria-current="page"] .wr-view-n { background: var(--wr-ink); color: var(--wr-ac); }

/* ---------- filters + layout ---------- */
.wr-chips-row { padding: 28px 0; display: flex; flex-direction: column; gap: 20px; }
.wr-chips-row--none { padding: 14px 0; }
.wr-fgroup { min-width: 0; }
.wr-page .wr-fl { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wr-tx3); margin: 0 0 10px; }
.wr-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; align-items: start; }
.wr-layout--solo { grid-template-columns: minmax(0, 1fr); }
.wr-layout--solo .wr-feed { max-width: 820px; }
.wr-feed { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.wr-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Desktop: the sidebar rides along with the much longer feed. */
@media (min-width: 1101px) {
  .wr-side { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; padding: 2px; margin: -2px; }
}
.wr-side [data-week-panel] { display: contents; }
/* Only the hand-written notes on the page: two of them sit side by side on wide screens. */
@media (min-width: 1101px) {
  .wr-layout--solo .wr-feed[data-count="2"] { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .wr-layout--solo .wr-feed[data-count="2"] > .wr-state { grid-column: 1 / -1; }
}

/* ---------- post card ---------- */
.wr-post { padding: 32px; container-type: inline-size; scroll-margin-top: 24px; }
.wr-meta { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 16px; }
.wr-tag { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wr-ac); }
.wr-date { font-size: 14px; color: var(--wr-tx3); }
.wr-live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wr-ink); background: var(--wr-ac); border-radius: 999px; padding: 4px 12px; }
.wr-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wr-ink); animation: wr-pulse 1.6s ease-in-out infinite; }
@keyframes wr-pulse { 50% { opacity: .25; } }
.wr-page .wr-h { font-size: 56px; overflow-wrap: anywhere; text-wrap: balance; }
.wr-page .wr-dek { font-size: 19px; line-height: 1.45; color: var(--wr-tx); margin-top: 16px; max-width: 54ch; }
.wr-page .wr-body { font-size: 17px; line-height: 1.65; color: var(--wr-tx2); margin-top: 14px; max-width: 62ch; }
.wr-post--note .wr-body { max-width: 58ch; }

.wr-page .wr-block { margin-top: 26px; }
.wr-page .wr-blabel { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wr-tx3); margin: 0 0 12px; }
.wr-page .wr-blabel--ac { color: var(--wr-ac); }
.wr-page .wr-foot { font-size: 14px; line-height: 1.5; color: var(--wr-tx3); margin-top: 16px; max-width: 64ch; }

.wr-toggle {
  margin-top: 26px; min-height: 44px; padding: 0 20px 0 22px; border-radius: 999px;
  border: 1px solid var(--wr-line); background: transparent; color: var(--wr-tx);
  font: inherit; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
}
.wr-toggle:hover { border-color: var(--wr-line2); }
.wr-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.wr-actions .wr-toggle { margin-top: 0; }
.wr-page a.wr-tracker-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(212, 255, 63, .45); color: var(--wr-ac); font-size: 15px; font-weight: 700; }
.wr-page a.wr-tracker-link:hover { border-color: var(--wr-ac); color: var(--wr-ac); }
.wr-toggle-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.wr-toggle[aria-expanded="true"] .wr-toggle-caret { transform: translateY(2px) rotate(-135deg); }

/* ---------- recap: scores, awards, standings ---------- */
.wr-scores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.wr-sc { padding: 14px; border-radius: 12px; background: var(--wr-s2); min-width: 0; }
.wr-page .wr-sc-row { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 15px; line-height: 1.9; }
.wr-sc-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.wr-sc-row.wr-win .wr-n { color: var(--wr-ac); }
.wr-sc-row.wr-lose { color: var(--wr-tx3); }
.wr-page .wr-sc-note { font-size: 14px; color: var(--wr-tx3); }
.wr-awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wr-awards[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.wr-awards[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wr-awards[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wr-awards[data-count="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wr-awards[data-count="5"] .wr-aw { grid-column: span 2; }
.wr-awards[data-count="5"] .wr-aw--wide { grid-column: span 3; }
.wr-aw { padding: 16px; border-radius: 12px; border: 1px solid var(--wr-line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wr-aw-l { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wr-ac); }
.wr-aw-w { font-size: 28px; line-height: 1; overflow-wrap: anywhere; }
.wr-aw-v { font-size: 17px; }
.wr-aw-s { font-size: 14px; line-height: 1.4; color: var(--wr-tx3); }

.wr-mini { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 5), auto); column-gap: 32px; }
.wr-mini-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 48px; border-bottom: 1px solid var(--wr-line); }
.wr-mini-rk { font-size: 20px; color: var(--wr-tx3); }
.wr-mini-name { font-weight: 600; min-width: 0; display: flex; align-items: center; gap: 8px; }
.wr-mini-rec { font-size: 18px; color: var(--wr-tx2); }
.wr-move { font-size: 14px; font-weight: 700; white-space: nowrap; }

/* ---------- desk: trades + waiver bids ---------- */
.wr-trades { display: flex; flex-direction: column; gap: 12px; }
.wr-trade { border: 1px solid var(--wr-line); border-radius: 14px; overflow: hidden; }
.wr-page .wr-trade-when { padding: 10px 20px; border-bottom: 1px solid var(--wr-line); font-size: 14px; color: var(--wr-tx3); background: rgba(255, 255, 255, .015); }
.wr-tsides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wr-tside { padding: 18px 20px; min-width: 0; }
.wr-tside + .wr-tside { border-left: 1px solid var(--wr-line); }
.wr-tside-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-height: 44px; }
.wr-tside-top > span:last-child { font-size: 14px; color: var(--wr-tx3); }
.wr-tside-name { font-weight: 700; font-size: 17px; }
.wr-assets { display: block; }
.wr-asset { font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.wr-asset em { font-style: normal; font-size: 14px; color: var(--wr-tx3); margin-left: 4px; white-space: nowrap; }
.wr-page .wr-none { font-size: 16px; color: var(--wr-tx3); }
.wr-page .wr-since { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--wr-line2); font-size: 14px; color: var(--wr-tx3); }
.wr-since .wr-n { font-size: 18px; color: var(--wr-tx); }
.wr-since--note { display: block; }
.wr-edge { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 14px 20px; border-top: 1px solid var(--wr-line); font-size: 14px; color: var(--wr-tx3); }
.wr-edge-v { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.wr-edge-v .wr-n { font-size: 18px; color: var(--wr-tx); }
.wr-edge-bar { flex: 1 1 96px; min-width: 96px; height: 8px; border-radius: 4px; background: var(--wr-line2); overflow: hidden; display: flex; }
.wr-edge-bar > span { display: block; height: 100%; background: var(--wr-tx); }
.wr-edge-bar > span.is-lead { background: var(--wr-ac); }

.wr-claims li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 60px; border-bottom: 1px solid var(--wr-line); }
.wr-claims li:last-child { border-bottom: 0; }
.wr-claim-n { font-size: 24px; color: var(--wr-ac); }
.wr-claim-main { min-width: 0; }
.wr-claim-main b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.wr-claim-main b em { font-style: normal; font-weight: 500; font-size: 14px; color: var(--wr-tx3); margin-left: 4px; }
.wr-claim-main > span { display: block; font-size: 14px; color: var(--wr-tx3); }

/* ---------- rankings ---------- */
.wr-rk-head, .wr-rk { display: grid; grid-template-columns: 36px 40px minmax(0, 1fr) 100px 176px; gap: 12px; align-items: center; }
.wr-rk-head { padding-bottom: 10px; border-bottom: 1px solid var(--wr-line); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wr-tx3); }
.wr-rk-head > span:nth-child(1) { grid-column: 1 / 3; }
.wr-rk-head > span:nth-child(2) { grid-column: 3; }
.wr-rk-head > span:nth-child(3) { grid-column: 4; }
.wr-rk-head > span:nth-child(4) { grid-column: 5; }
.wr-rk { padding: 12px 0; border-bottom: 1px solid var(--wr-line); min-height: 72px; }
.wr-rk:last-child { border-bottom: 0; }
.wr-rk-n { font-size: 24px; color: var(--wr-tx3); }
.wr-rk-who, .wr-rk-id { min-width: 0; }
.wr-page .wr-rk-name { font-weight: 700; font-size: 17px; line-height: 1.3; display: flex; align-items: center; gap: 10px; }
.wr-page .wr-rk-blurb { font-size: 16px; line-height: 1.45; color: var(--wr-tx2); margin-top: 2px; }
.wr-page .wr-rk-inline { display: none; font-size: 14px; color: var(--wr-tx3); }
.wr-rk-rec { display: flex; flex-direction: column; line-height: 1.3; }
.wr-rk-rec .wr-n { font-size: 20px; color: var(--wr-tx); }
.wr-rk-rec span:last-child { font-size: 14px; color: var(--wr-tx3); }
.wr-odds { display: flex; align-items: center; gap: 12px; }
.wr-track { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--wr-s2); overflow: hidden; }
.wr-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--wr-ac); }
.wr-odds-n { width: 48px; text-align: right; font-size: 20px; }

/* ---------- preview ---------- */
/* One compact unit, left aligned like the artboard: portrait, name and numbers, "vs", portrait, name and numbers. */
.wr-duo { display: grid; grid-template-columns: minmax(0, auto) auto minmax(0, auto) minmax(0, 1fr); column-gap: 28px; row-gap: 14px; align-items: center; padding: 18px 22px; border-radius: 14px; background: var(--wr-s2); }
.wr-duo--feature { padding: 22px 26px; }
.wr-duo-side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wr-duo-who { min-width: 0; }
.wr-vs { font-size: 28px; color: var(--wr-tx3); }
.wr-page .wr-duo-name { font-weight: 700; font-size: 18px; line-height: 1.2; }
.wr-duo-rec .wr-n { font-size: 20px; color: var(--wr-tx2); }
.wr-duo-line { font-size: 14px; color: var(--wr-tx3); }
.wr-page .wr-duo-odds { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 14px; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--wr-tx3); }
.wr-duo-odds > div { display: contents; }
.wr-page .wr-duo-odds dt { color: var(--wr-tx3); }
.wr-page .wr-duo-odds dd { color: var(--wr-tx); font-size: 16px; text-align: right; }
.wr-page .wr-duo-series { grid-column: 1 / -1; font-size: 15px; color: var(--wr-tx2); padding-top: 12px; border-top: 1px solid var(--wr-line2); }
.wr-duo--mini { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 14px 18px; column-gap: 24px; row-gap: 8px; }
.wr-duo--mini .wr-duo-name { font-size: 17px; }
.wr-duo--mini .wr-duo-rec { line-height: 1.35; }
.wr-duo--mini .wr-duo-rec .wr-n { font-size: 18px; }
.wr-duo--mini .wr-vs { font-size: 22px; }
.wr-page .wr-duo--mini .wr-duo-series { padding-top: 8px; font-size: 14px; color: var(--wr-tx3); }
.wr-slate { display: flex; flex-direction: column; gap: 10px; }
.wr-slate .wr-duo { background: transparent; border: 1px solid var(--wr-line); }
.wr-slate .wr-duo-series { border-top-color: var(--wr-line); }
.wr-page .wr-receipt { padding: 18px 20px; border-radius: 14px; border: 1px dashed var(--wr-line2); }
.wr-page .wr-receipt p { font-size: 17px; line-height: 1.5; }

/* ---------- sidebar ---------- */
.wr-panel { padding: 24px; }
.wr-page .wr-ph { font-size: 30px; margin-bottom: 14px; }
/* Deal makers: the heading and the tracker link share a row; the link drops under the heading when the panel is narrow. */
.wr-ph-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 14px; margin-bottom: 14px; }
.wr-page .wr-ph-row .wr-ph { margin-bottom: 0; }
.wr-page a.wr-more-link.wr-ph-link { margin-top: 0; }
.wr-srow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--wr-line); }
.wr-srow:last-child { border-bottom: 0; }
.wr-grow { flex: 1; min-width: 0; }
.wr-grow b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.wr-grow b em { font-style: normal; font-weight: 500; font-size: 14px; color: var(--wr-tx3); margin-left: 4px; }
.wr-grow > span { display: block; font-size: 14px; line-height: 1.4; color: var(--wr-tx3); }
.wr-big { font-size: 30px; color: var(--wr-ac); min-width: 26px; text-align: center; }
.wr-count { font-size: 22px; color: var(--wr-tx); }
.wr-srow-pts { font-size: 18px; color: var(--wr-tx2); white-space: nowrap; }
.wr-srow-link { font-weight: 700; font-size: 16px; }
.wr-page .wr-pnote { font-size: 14px; line-height: 1.45; color: var(--wr-tx3); margin-top: 12px; }
.wr-page a.wr-more-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-weight: 700; font-size: 15px; color: var(--wr-tx2); }
.wr-page a.wr-more-link:hover { color: var(--wr-ac); }

/* ---------- week browser ---------- */
.wr-weekhead { padding: 4px 0 8px; }
.wr-page .wr-weekhead-t { font-size: 72px; scroll-margin-top: 24px; overflow-wrap: anywhere; }
.wr-page .wr-weekhead-sub { font-size: 17px; color: var(--wr-tx2); margin-top: 12px; }
.wr-dot { margin: 0 .2em; color: var(--wr-tx3); }
.wr-weekhead .wr-live { margin-top: 12px; }
.wr-weeknav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wr-page a.wr-wn { display: flex; flex-direction: column; gap: 2px; min-height: 88px; padding: 16px 20px; border: 1px solid var(--wr-line); border-radius: 16px; background: var(--wr-s1); }
.wr-page a.wr-wn:hover { border-color: var(--wr-line2); color: var(--wr-tx); }
.wr-wn > span { display: block; }
.wr-wn--next { grid-column: 2; text-align: right; }
.wr-wn-dir { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wr-ac); }
.wr-wn-t { font-size: 36px; color: var(--wr-tx); }
.wr-wn-d { font-size: 14px; color: var(--wr-tx3); }

/* ---------- preview: projections ---------- */
.wr-proj { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(88px, 1fr) auto; align-items: center; gap: 8px 18px; padding-top: 14px; border-top: 1px solid var(--wr-line2); }
.wr-proj--nobar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wr-proj-l { grid-column: 1 / -1; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wr-tx3); }
.wr-proj-v { display: inline-flex; align-items: baseline; gap: 2px 10px; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
.wr-proj-v--r { flex-direction: row-reverse; justify-self: end; }
.wr-proj-pts { font-size: 20px; color: var(--wr-tx); }
.wr-proj-p { font-size: 14px; font-weight: 500; color: var(--wr-tx3); }
.wr-proj-p .wr-n { font-size: 16px; color: var(--wr-tx2); }
.wr-proj-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--wr-line2); }
.wr-proj-bar > span { display: block; height: 100%; background: var(--wr-tx3); }
.wr-proj-bar > span.is-lead { background: var(--wr-ac); }
.wr-slate .wr-proj { border-top-color: var(--wr-line); }

/* ---------- trade tracker ---------- */
.wr-tracker { display: flex; flex-direction: column; gap: 28px; padding: 28px 0 8px; }
.wr-page .wr-tintro-t { font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--wr-tx); }
.wr-tintro-t .wr-tintro-meta { display: inline-block; margin-left: 1em; font-weight: 600; color: var(--wr-tx3); white-space: nowrap; }
.wr-page .wr-tintro-s { font-size: 19px; line-height: 1.5; color: var(--wr-tx2); max-width: 52ch; margin-top: 12px; }
.wr-page a.wr-skiplink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--wr-tx2); }
.wr-page a.wr-skiplink:hover { color: var(--wr-ac); }
.wr-page .wr-sh { font-size: 44px; margin-bottom: 10px; }

/* Trade balance */
.wr-ledger { padding: 28px 32px; container: wrlg / inline-size; }
.wr-page .wr-ledger-dek { font-size: 16px; color: var(--wr-tx2); margin-bottom: 18px; }
.wr-lg { border-top: 1px solid var(--wr-line); }
.wr-lg-row { display: grid; grid-template-columns: 32px 40px minmax(150px, 1.1fr) 96px 96px minmax(190px, 1.3fr) minmax(0, 2.4fr); column-gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--wr-line); }
.wr-lg-row:last-child { border-bottom: 0; }
.wr-lg-rk { font-size: 24px; color: var(--wr-tx3); }
.wr-lg-who { min-width: 0; }
.wr-lg-name { font-size: 18px; font-weight: 700; line-height: 1.25; }
.wr-page .wr-lg-sub { font-size: 14px; color: var(--wr-tx3); }
.wr-lg-sub .wr-n { color: var(--wr-tx2); }
.wr-page .wr-lg-c { display: flex; flex-direction: column; line-height: 1.2; }
.wr-lg-l { font-size: 14px; color: var(--wr-tx3); }
/* Points in and out share the net cell's height (the bar sits under it), so the three read on one baseline. */
.wr-lg-in, .wr-lg-out { padding-bottom: 16px; }
.wr-lg-v { font-size: 22px; color: var(--wr-tx); }
.wr-lg-netv.is-pos { color: var(--wr-ac); }
.wr-lg-netv.is-neg { color: var(--wr-tx2); }
.wr-lg-net { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wr-div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px; }
.wr-div-h { display: flex; height: 8px; background: var(--wr-line); overflow: hidden; }
.wr-div-h > span { display: block; height: 100%; }
.wr-div-neg { justify-content: flex-end; border-radius: 4px 0 0 4px; }
.wr-div-pos { justify-content: flex-start; border-radius: 0 4px 4px 0; }
.wr-div-neg > span { background: var(--wr-tx3); }
.wr-div-pos > span { background: var(--wr-ac); }
.wr-lg-deals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.wr-page a.wr-lg-deal, .wr-lg-deal--plain { display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--wr-line); border-radius: 12px; line-height: 1.25; min-width: 0; }
.wr-page a.wr-lg-deal:hover { border-color: var(--wr-tx3); color: inherit; }
.wr-lg-dv { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; font-size: 14px; color: var(--wr-tx3); }
.wr-lg-dv .wr-n { font-size: 18px; color: var(--wr-tx); }
/* The name never splits from "with" unless it is too long for a line of its own. */
.wr-lg-with { min-width: 0; overflow-wrap: anywhere; }
.wr-page .wr-lg-none { font-size: 14px; color: var(--wr-tx3); }

/* Method note */
.wr-howto { padding: 28px 32px; }
.wr-page .wr-howto-lead { font-size: 18px; color: var(--wr-tx); margin-bottom: 18px; }
.wr-howto-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; }
.wr-page .wr-howto-list dt { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wr-ac); margin: 0 0 4px; }
.wr-page .wr-howto-list dd { font-size: 16px; line-height: 1.5; color: var(--wr-tx2); }

/* Every trade */
.wr-all { scroll-margin-top: 24px; }
.wr-tbar { display: flex; flex-direction: column; gap: 18px; margin: 14px 0 16px; }
.wr-page .wr-tstatus { font-size: 14px; color: var(--wr-tx3); margin-bottom: 16px; }
.wr-mchips { gap: 8px; }
.wr-mchip { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 6px; }
.wr-mchip--all { padding-left: 18px; }
.wr-tlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.wr-tmore { margin-top: 16px; }
.wr-tr { container: wrtr / inline-size; display: flex; flex-direction: column; overflow: hidden; scroll-margin-top: 24px; }
.wr-tr.is-target { border-color: var(--wr-ac); box-shadow: 0 0 0 1px var(--wr-ac); }
.wr-tr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--wr-line); }
.wr-tr-id { min-width: 0; }
.wr-page .wr-tr-h { font-size: 30px; overflow-wrap: anywhere; }
.wr-page .wr-tr-when { font-size: 14px; color: var(--wr-tx3); margin-top: 8px; }
.wr-page a.wr-tr-post { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -10px -8px 0 0; padding: 0 8px; font-size: 15px; font-weight: 700; color: var(--wr-tx2); white-space: nowrap; }
.wr-page a.wr-tr-post:hover { color: var(--wr-ac); }
.wr-tr .wr-tsides { flex: 1; }
.wr-page .wr-tr-net { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--wr-line); font-size: 14px; color: var(--wr-tx3); }
.wr-tr-net .wr-n { font-size: 18px; color: var(--wr-tx); }
.wr-tr-lead { font-size: 16px; font-weight: 700; color: var(--wr-tx); }

/* ---------- states ---------- */
.wr-loading { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; padding-top: 28px; }
.wr-loading > div:first-child { display: flex; flex-direction: column; gap: 20px; }
.wr-state { padding: 32px; }
.wr-page .wr-state-t { font-size: 34px; margin-bottom: 12px; }
.wr-state p:not(.wr-state-t) { color: var(--wr-tx2); max-width: 56ch; }
.wr-retry, .wr-older { font: inherit; font-weight: 700; cursor: pointer; }
.wr-retry { margin-top: 18px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--wr-line2); background: transparent; color: var(--wr-tx); font-size: 15px; }
.wr-retry:hover, .wr-older:hover { border-color: var(--wr-tx3); }
.wr-older { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; min-height: 56px; border-radius: 999px; border: 1px solid var(--wr-line); background: transparent; color: var(--wr-tx); font-size: 16px; }
.wr-older span { color: var(--wr-tx3); font-weight: 500; font-size: 15px; }

/* ---------- homepage cards: FBIWire.mountLatest ---------- */
.lw-latest { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.lw-card {
  display: flex; flex-direction: column; gap: 14px; padding: 28px; min-height: 300px;
  background: var(--wr-s1); border: 1px solid var(--wr-line); border-radius: 18px; color: var(--wr-tx);
  transition: border-color .15s ease;
}
a.lw-card:hover, .lw-latest a.lw-card:hover { border-color: var(--wr-line2); color: var(--wr-tx); }
.lw-card__tag { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wr-ac); }
.lw-card__headline { font-family: var(--wr-display); font-stretch: 68%; font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; font-size: 32px; overflow-wrap: anywhere; }
.lw-card--lead .lw-card__headline { font-size: 42px; }
.lw-card__dek { font-size: 16px; line-height: 1.5; color: var(--wr-tx2); }
.lw-card__foot { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--wr-tx3); }

/* ---------- container queries: the post card sets its own layout ---------- */
@container (max-width: 639px) {
  .wr-scores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wr-awards, .wr-awards[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr-awards[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
  .wr-awards[data-count="5"] .wr-aw, .wr-awards[data-count="5"] .wr-aw--wide { grid-column: auto; }
  .wr-aw:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
  /* Stacked rankings row: rank and portrait span the name and the record line;
     the odds bar gets its own row under them, with the percent at its right. */
  .wr-rk-head, .wr-rk { grid-template-columns: 28px 36px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; }
  .wr-rk-head > span:nth-child(3) { display: none; }
  .wr-rk-head > span:nth-child(4) { grid-column: 4; text-align: right; }
  .wr-rk { grid-template-areas: "n av id id" "n av meta meta" ". . bar pct" ". . bl bl"; align-items: center; }
  .wr-rk-n { grid-area: n; font-size: 20px; }
  .wr-rk > .wr-av { grid-area: av; }
  .wr-rk-who { display: contents; }
  .wr-rk-id { display: contents; }
  .wr-page .wr-rk-name { grid-area: id; align-self: end; }
  .wr-page .wr-rk-inline { grid-area: meta; display: block; align-self: start; }
  .wr-page .wr-rk-blurb { grid-area: bl; margin-top: 8px; }
  .wr-rk-rec { display: none; }
  .wr-odds { display: contents; }
  .wr-track { grid-area: bar; margin-top: 10px; }
  .wr-odds-n { grid-area: pct; width: auto; min-width: 44px; margin-top: 10px; font-size: 18px; }
  .wr-sc:last-child:nth-child(odd) { grid-column: auto; }
  .wr-mini { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
}
@container (max-width: 559px) {
  .wr-tsides { grid-template-columns: minmax(0, 1fr); }
  .wr-tside + .wr-tside { border-left: 0; border-top: 1px solid var(--wr-line); }
  .wr-edge { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
  .wr-edge-l { grid-column: 1 / -1; }
  .wr-edge-bar { grid-column: 1 / -1; order: 1; min-width: 0; }
  .wr-edge-v { order: 2; }
  .wr-edge-v--r { order: 3; justify-self: end; }
  /* Stacked projection: one line per side, the win-chance bar between them. */
  .wr-proj, .wr-proj--nobar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wr-proj-v, .wr-proj-v--r { display: flex; flex-direction: row; flex-wrap: wrap; justify-self: stretch; }
  .wr-proj-name { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  /* Stacked matchup: the portrait lines up with the name, not the middle of the text block. */
  .wr-duo, .wr-duo--mini { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 18px; }
  .wr-duo-side { align-items: flex-start; }
  .wr-vs { justify-self: start; font-size: 22px; margin-left: 4px; line-height: 1; }
}
@container (max-width: 419px) {
  .wr-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr-sc:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .wr-awards, .wr-awards[data-count] { grid-template-columns: minmax(0, 1fr); }
  .wr-aw { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 14px 16px; }
  .wr-aw-l, .wr-aw-s { grid-column: 1 / -1; }
  .wr-claims li { grid-template-columns: 60px minmax(0, 1fr); }
}
@container (max-width: 299px) {
  .wr-rk-head, .wr-rk { grid-template-columns: 24px 36px minmax(0, 1fr) auto; column-gap: 8px; }
  /* No room for both labels: the column heading is the one that matters here. */
  .wr-rk-head > span:nth-child(2) { display: none; }
  .wr-rk-head > span:nth-child(4) { grid-column: 3 / -1; }
}
@container (max-width: 279px) {
  .wr-scores { grid-template-columns: minmax(0, 1fr); }
}

/* Trade card heads: the desk link drops under the names when the card is narrow. */
@container wrtr (max-width: 479px) {
  .wr-tr-top { flex-direction: column; }
  .wr-page a.wr-tr-post { margin: 0 0 -8px -8px; }
}

/* ---------- container queries: trade balance ---------- */
/* Two lines per boss: portrait, name, points and net on the first; best and worst deal under them. */
@container wrlg (max-width: 1019px) {
  .wr-lg-row { grid-template-columns: 32px 40px minmax(0, 1fr) 90px 90px minmax(160px, 1.2fr); row-gap: 12px; }
  .wr-lg-deals { grid-column: 3 / -1; }
}
/* Stacked: name and net up top, then the bar, then points, then the two deal links. */
@container wrlg (max-width: 659px) {
  .wr-lg-row {
    grid-template-columns: 28px 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 10px;
    grid-template-areas: "rk av who netc" "bar bar bar bar" "in in out out" "deals deals deals deals";
  }
  .wr-lg-rk { grid-area: rk; font-size: 20px; }
  .wr-lg-row > .wr-av { grid-area: av; }
  .wr-lg-who { grid-area: who; }
  .wr-lg-net { display: contents; }
  .wr-lg-net .wr-lg-c { grid-area: netc; align-items: flex-end; text-align: right; }
  .wr-div { grid-area: bar; }
  .wr-lg-row .wr-lg-in, .wr-lg-row .wr-lg-out { flex-direction: row; align-items: baseline; gap: 8px; padding-bottom: 0; }
  .wr-lg-row .wr-lg-in { grid-area: in; }
  .wr-lg-row .wr-lg-out { grid-area: out; justify-content: flex-end; }
  .wr-lg-deals { grid-area: deals; }
  .wr-lg-deals > :only-child { grid-column: 1 / -1; }
  /* Narrow tiles: the name always sits under the figure, so every tile in the list reads the same way;
     a lone tile has the whole row and keeps them on one line. */
  .wr-lg-with { flex: 1 1 100%; }
  .wr-lg-deals > :only-child .wr-lg-with { flex: 0 1 auto; }
  .wr-lg-in .wr-lg-v, .wr-lg-out .wr-lg-v { font-size: 18px; }
  .wr-lg-row .wr-lg-in .wr-lg-l, .wr-lg-row .wr-lg-out .wr-lg-l { white-space: nowrap; }
  .wr-lg-netv { font-size: 24px; }
}
/* Too narrow for label and value side by side: the label goes back above its value. */
@container wrlg (max-width: 289px) {
  .wr-lg-row .wr-lg-in, .wr-lg-row .wr-lg-out { flex-direction: column; gap: 0; }
  .wr-lg-row .wr-lg-out { align-items: flex-end; text-align: right; }
}

/* ---------- responsive ---------- */
@media (min-width: 1240px) {
  .wr-tlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .wr-head { grid-template-columns: minmax(0, 1fr); }
  .wr-page .wr-title { font-size: 120px; }
  .wr-layout, .wr-loading { grid-template-columns: minmax(0, 1fr); }
  .wr-layout--solo .wr-feed { max-width: none; }
  /* The sidebar drops below the feed; its panels tile two or three across instead of stretching full width. */
  .wr-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .lw-latest { grid-template-columns: minmax(0, 1fr); }
  .lw-card { min-height: 0; }
}
@media (max-width: 900px) {
  .wr-side { grid-template-columns: minmax(0, 1fr); }
  .wr-howto-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wr-head { padding: 40px 0 28px; gap: 24px; }
  .wr-page .wr-title { font-size: clamp(64px, 24vw, 84px); }
  .wr-page .wr-sub { font-size: 17px; }
  .wr-chips-row { padding: 16px 0; gap: 14px; }
  .wr-views { margin-top: 22px; }
  .wr-page .wr-weekhead-t { font-size: 52px; }
  .wr-weeknav { grid-template-columns: minmax(0, 1fr); }
  .wr-wn--next { grid-column: 1; }
  .wr-page .wr-tintro-s { font-size: 17px; }
  .wr-page .wr-sh { font-size: 34px; }
  .wr-ledger, .wr-howto { padding: 20px; }
  .wr-page .wr-tr-h { font-size: 26px; }
  /* One strip that scrolls inside its own box, instead of three wrapped rows with an orphan. */
  .wr-chips-row .pt-chips, .wr-tbar .pt-chips { position: relative; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--pt-edge, 18px) * -1); padding: 6px var(--pt-edge, 18px); scroll-padding-inline: var(--pt-edge, 18px); }
  .wr-chips-row .pt-chips::-webkit-scrollbar, .wr-tbar .pt-chips::-webkit-scrollbar { display: none; }
  .wr-chips-row .pt-chip, .wr-tbar .pt-chip { flex: none; white-space: nowrap; }
  .wr-post { padding: 22px; }
  .wr-page .wr-h { font-size: 40px; }
  .wr-page .wr-dek { font-size: 17px; }
  .wr-panel { padding: 20px; }
  .wr-page .wr-state-t { font-size: 28px; }
  .wr-state { padding: 24px; }
  .lw-card { padding: 22px; }
  .lw-card__headline, .lw-card--lead .lw-card__headline { font-size: 34px; }
}
@media (max-width: 360px) {
  /* The brand and the Menu button share one line at 320. */
  .page-wire .pt-brand { white-space: nowrap; font-size: 15px; gap: 8px; }
  .page-wire .pt-menu-btn { padding: 0 14px; }
}
@media (forced-colors: active) {
  .wr-div-pos > span, .wr-proj-bar > span.is-lead { background: Highlight; forced-color-adjust: none; }
  .wr-div-neg > span, .wr-proj-bar > span { background: GrayText; forced-color-adjust: none; }
  .wr-page a.wr-view[aria-current="page"], .wr-tr.is-target { outline: 3px solid Highlight; outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .wr-live-dot { animation: none; }
  .wr-toggle-caret, .lw-card { transition: none; }
}

/* ---------- Franchise marks (wave 2) ----------
   Power rankings carry each franchise's 20 px micro mark; the
   preview's game of the week sets the two crests face to face (BRAND-SPEC §10). */
.wr-page .wr-crest { flex: none; width: 20px; height: 22px; }
.wr-page .wr-rk-name .wr-crest { margin-right: -2px; }
.wr-page .wr-duo-side--crest .wr-duo-crest { width: 64px; height: 70px; }
.wr-page .wr-duo--mini .wr-duo-side--crest .wr-duo-crest { width: 40px; height: 44px; }
@media (max-width: 640px) {
  .wr-page .wr-duo-side--crest .wr-duo-crest { width: 52px; height: 57px; }
  .wr-page .wr-duo--mini .wr-duo-side--crest .wr-duo-crest { width: 36px; height: 40px; }
}