/* Coming Soon redesign (2026-10-16) — stage, shelves, calendar, filter bar.
   Scoped under .csx / body.csx-on. House system: black #000, surfaces
   #101010/#1B1B1B, lines #2C2C2C, silver #A5ACAF, signal red #E10600,
   Marathon display (var(--pv-serif)), regular 400 only. No pills, no
   carousel arrows. Phone and laptop are separate compositions. */

.csx-hidden-legacy { display: none !important; }

/* ---------------- stage ---------------- */
.csx-stage { position: relative; background: #000; border-bottom: 1px solid #2C2C2C;
  overflow: hidden; outline: none; }
.csx-stage:focus-visible { box-shadow: inset 0 0 0 2px #E10600; }
.csx-stage__art { position: absolute; inset: 0; }
.csx-stage__img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .55s ease; }
.csx-stage__img.on { opacity: 1; }
.csx-stage__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #000 26%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.12) 80%, rgba(0,0,0,0) 100%),
              linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,0) 34%); }
.csx-stage__body { position: relative; z-index: 2; display: flex; flex-direction: column;
  justify-content: flex-end; min-height: 600px; max-width: 660px;
  padding: 56px 20px 96px 48px; }
.csx-eyebrow { margin: 0 0 14px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #A5ACAF; }
.csx-eyebrow b { color: #E10600; font-weight: 700; }
.csx-stage__title { margin: 0 0 16px; font-family: var(--pv-serif);
  font-weight: 400; text-transform: uppercase; color: #fff;
  font-size: clamp(46px, 5.6vw, 92px); line-height: .98; letter-spacing: .01em; }
.csx-stage__desc { margin: 0 0 26px; font-size: 15.5px; line-height: 1.55;
  color: #dcdcdc; max-width: 52ch; }
.csx-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.csx-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 46px;
  padding: 11px 22px; border-radius: 4px; font-size: 14.5px; font-weight: 700;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease; }
.csx-btn--red { background: #E10600; color: #fff; }
.csx-btn--red:hover { background: #f21408; }
.csx-btn--ghost { background: rgba(0,0,0,.35); border-color: #4a4a4a; color: #fff; }
.csx-btn--ghost:hover { border-color: #A5ACAF; }
.csx-btn--ghost[aria-pressed="true"] { border-color: #E10600; color: #fff;
  background: rgba(225,6,0,.16); }
.csx-btn--text { background: none; border: none; color: #A5ACAF; padding: 11px 6px; }
.csx-btn--text:hover { color: #fff; }
.csx-btn:focus-visible, .csx-tab:focus-visible, .csx-thumb:focus-visible,
.csx-card:focus-visible, .csx-cell:focus-visible, .csx-rail-item:focus-visible {
  outline: 2px solid #E10600; outline-offset: 2px; }
.csx-thumbs { position: absolute; z-index: 3; right: 22px; bottom: 26px;
  display: flex; flex-direction: column; gap: 10px; }
.csx-thumb { display: none; width: 158px; padding: 0; border: 1px solid #2C2C2C;
  background: #000; cursor: pointer; text-align: left; border-radius: 4px; overflow: hidden; }
.csx-thumb img { display: block; width: 100%; height: 74px; object-fit: cover;
  object-position: 50% 30%; }
.csx-thumb span { display: block; padding: 6px 8px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #A5ACAF; line-height: 1.35; }
.csx-thumb.csx-win { display: block; }
.csx-thumb[aria-current="true"] { border-color: #E10600; }
.csx-thumb[aria-current="true"] span { color: #fff; }

/* ---------------- filter / view bar ---------------- */
.csx-bar { display: flex; align-items: center; justify-content: space-between;
  position: relative;
  gap: 12px; padding: 0 20px; border-bottom: 1px solid #2C2C2C; background: #000;
  overflow-x: auto; scrollbar-width: none; }
.csx-bar::-webkit-scrollbar { display: none; }
.csx-tabs { display: flex; gap: 4px; }
.csx-tab { appearance: none; background: none; border: none; cursor: pointer;
  padding: 15px 10px 13px; font-size: 14px; font-weight: 600; color: #A5ACAF;
  box-shadow: inset 0 -2px 0 transparent; white-space: nowrap; }
.csx-tab:hover { color: #fff; }
.csx-tab[aria-selected="true"], .csx-tab[aria-pressed="true"] { color: #fff;
  box-shadow: inset 0 -2px 0 #E10600; }
.csx-view { display: flex; gap: 4px; align-items: center; color: #2C2C2C; }

/* ---------------- shelves ---------------- */
.csx-shelf { padding: 30px 0 4px; }
/* The module is a self-contained dark surface (approved mocks): the
   shelves + calendar hosts carry the black ground themselves so their
   silver/white text never depends on the host page's scheme. */
#csx-shelves, #csx-cal { background: #000; }


/* ---------------- quick date ranges (prompt 3C) ------------------- */
.csx-range { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 10px 0 2px; }
.csx-range__btn { appearance: none; background: none; border: none; cursor: pointer;
  color: #A5ACAF; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 6px 1px;
  border-bottom: 2px solid transparent; }
.csx-range__btn:hover { color: #fff; }
.csx-range__btn[aria-pressed="true"] { color: #fff; border-bottom-color: #E10600; }
.csx-range__btn:focus-visible { outline: 2px solid #E10600; outline-offset: 2px; }
.csx-cell--out { opacity: .3; }

/* ---------------- bar tagline (prompt §1 supporting line) ---------- */
.csx-tagline { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); color: #A5ACAF; font-size: 13px;
  letter-spacing: .06em; white-space: nowrap; pointer-events: none; }
@media (max-width: 1199px) { .csx-tagline { display: none; } }

/* ---------------- list density (prompt 3D, compact state) ----------
   Scoped overrides on the legacy rows; the exhaustive register stays
   the page's own markup — this only tightens its rhythm. */
#csList.csx-compact .cs-ev { padding-top: 8px; padding-bottom: 8px; }
#csList.csx-compact .cs-art { width: 44px; }
#csList.csx-compact .cs-art img { width: 44px; height: 60px; object-fit: cover; }
#csList.csx-compact .cs-ev p:not(.cs-why) { display: none; }
#csList.csx-compact .cs-date b { font-size: 15px; }
.csx-shelf__head { display: flex; align-items: baseline; gap: 14px;
  padding: 0 20px; margin-bottom: 14px; flex-wrap: wrap; }
.csx-shelf__title { margin: 0; font-family: var(--pv-serif); font-weight: 400;
  text-transform: uppercase; font-size: clamp(24px, 2.6vw, 32px); color: #fff;
  letter-spacing: .01em; }
.csx-shelf__meta { font-size: 12.5px; color: #A5ACAF; }
.csx-rail { display: flex; gap: 14px; overflow-x: auto; padding: 2px 20px 14px;
  scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 95%, transparent 100%); }
.csx-rail::-webkit-scrollbar { display: none; }
.csx-card { position: relative; flex: 0 0 auto; width: 160px; scroll-snap-align: start;
  background: none; border: none; padding: 0; text-align: left; cursor: pointer;
  color: #fff; font: inherit; }
.csx-card__art { position: relative; border-radius: 6px; overflow: hidden;
  background: #101010; aspect-ratio: 2 / 3; }
.csx-card--music .csx-card__art { aspect-ratio: 1 / 1; }
.csx-card__art img { width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 18%; display: block; }
.csx-card__art--type { display: flex; align-items: flex-end; padding: 12px;
  background: #1B1B1B; aspect-ratio: 2 / 3; }
.csx-card__art--type span { font-family: var(--pv-serif); font-size: 21px;
  line-height: 1.12; text-transform: uppercase; color: #fff; }
.csx-card__title { margin: 9px 0 3px; font-size: 13.5px; font-weight: 650;
  line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.csx-card__meta { margin: 0; font-size: 11.5px; color: #A5ACAF; line-height: 1.4; }
.csx-card__row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.csx-mini-remind { appearance: none; background: none; border: 1px solid #2C2C2C;
  color: #A5ACAF; border-radius: 4px; font-size: 11.5px; font-weight: 650;
  padding: 5px 9px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.csx-mini-remind:hover { border-color: #A5ACAF; color: #fff; }
.csx-mini-remind[aria-pressed="true"] { border-color: #E10600; color: #fff;
  background: rgba(225,6,0,.14); }
/* game day cards: typographic, no poster */
.csx-gcard { flex: 0 0 auto; width: 238px; scroll-snap-align: start;
  background: #101010; border: 1px solid #2C2C2C; border-radius: 6px;
  padding: 14px 16px; color: #fff; text-align: left; cursor: pointer; font: inherit; }
.csx-gcard:hover { border-color: #A5ACAF; }
.csx-gcard__league { margin: 0 0 7px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #E10600; }
.csx-gcard__match { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.csx-gcard__when { margin: 0; font-size: 12px; color: #A5ACAF; }

/* ---------------- calendar ---------------- */
.csx-cal { padding: 26px 20px 8px; }
.csx-cal__counts { display: flex; gap: 34px; margin-bottom: 18px; flex-wrap: wrap; }
.csx-stat b { display: block; font-family: var(--pv-serif); font-weight: 400;
  font-size: 30px; color: #fff; line-height: 1; }
.csx-stat span { font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #A5ACAF; }
.csx-cal__wrap { display: grid; grid-template-columns: 1fr; gap: 30px; }
.csx-cal__head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; }
.csx-cal__month { margin: 0; font-family: var(--pv-serif); font-weight: 400;
  font-size: 26px; text-transform: uppercase; color: #fff; }
.csx-cal__nav { display: flex; gap: 4px; align-items: baseline; }
.csx-cal__nav button { appearance: none; background: none; border: none;
  color: #A5ACAF; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 6px 8px; }
.csx-cal__nav button:hover { color: #fff; }
.csx-cal__nav button + button { border-left: 1px solid #2C2C2C; }
.csx-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.csx-dow { font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  color: #A5ACAF; text-transform: uppercase; padding: 2px 2px 6px; }
.csx-cell { position: relative; border: 1px solid #2C2C2C; border-radius: 5px;
  background: #101010; min-height: 92px; padding: 0; overflow: hidden;
  cursor: pointer; text-align: left; font: inherit; color: #fff; }
.csx-cell--empty { background: transparent; border-color: #1B1B1B; cursor: default; }
.csx-cell--dim { opacity: .28; }
.csx-cell img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%; border-radius: inherit; }
.csx-cell__shade { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 36%),
    linear-gradient(0deg, rgba(0,0,0,.74), rgba(0,0,0,0) 55%); }
.csx-cell__d { position: absolute; top: 6px; left: 8px; z-index: 2;
  font-size: 12.5px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.csx-cell__n { position: absolute; left: 8px; bottom: 7px; z-index: 2;
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #A5ACAF; }
.csx-cell--today { box-shadow: inset 0 0 0 2px #E10600; }
.csx-cell--sel { box-shadow: inset 0 0 0 2px #fff; }
.csx-rail-list { display: none; }
.csx-rail-item { display: flex; gap: 12px; width: 100%; padding: 8px 0;
  background: none; border: none; border-bottom: 1px solid #1B1B1B;
  cursor: pointer; text-align: left; color: #fff; font: inherit; align-items: center; }
.csx-rail-item img { width: 46px; height: 62px; object-fit: cover;
  object-position: 50% 18%; border-radius: 4px; flex: 0 0 auto; }
.csx-rail-item b { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.csx-rail-item span { font-size: 11.5px; color: #A5ACAF; }
.csx-rail-h { margin: 2px 0 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #A5ACAF; }

/* builder alt-date line inside list rows */
#csList .cs-altdate { margin: 2px 0 0; font-size: 12px; color: #A5ACAF; }

/* ---------------- pop-up dossier + more-today strip ---------------- */
.csx-dossier { display: flex; gap: 18px; padding: 0 24px 8px; }
.csx-dossier__poster { width: 128px; aspect-ratio: 2 / 3; object-fit: cover;
  object-position: 50% 18%; border-radius: 5px; flex: 0 0 auto; }
.csx-dossier__about { margin: 2px 0 0; font-size: 14.5px; line-height: 1.6;
  color: #e6e6e6; }
@media (max-width: 640px) {
  .csx-dossier { padding: 0 18px 6px; gap: 13px; }
  .csx-dossier__poster { width: 92px; }
}
/* All-red wordmark in pop-up chrome (rendered only when the modal
   builder hasn't supplied its own brand element). */
.pv-modal__head:not(:has(.pv-brand))::before {
  content: "Previously."; font-family: var(--pv-serif); font-size: 19px;
  color: #E10600; margin-right: 16px; white-space: nowrap; }

/* ---------------- pop-up "more today" strip ---------------- */
.csx-more { padding: 6px 24px 22px; }
.csx-more__rail { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.csx-more__rail::-webkit-scrollbar { display: none; }
.csx-more__item { flex: 0 0 auto; width: 74px; background: none; border: none;
  padding: 0; cursor: pointer; text-align: left; color: #fff; font: inherit; }
.csx-more__item img { width: 74px; height: 100px; object-fit: cover;
  object-position: 50% 18%; border-radius: 4px; display: block; }
.csx-more__item span { display: block; margin-top: 5px; font-size: 11px;
  font-weight: 650; line-height: 1.3; }

/* ---------------- laptop composition ---------------- */
@media (min-width: 1200px) {
  .csx-cal__wrap { grid-template-columns: minmax(0, 1fr) 302px; }
  .csx-rail-list { display: block; }
  .csx-cell { min-height: 108px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .csx-cell { min-height: 100px; }
}

/* ---------------- phone composition ---------------- */
@media (max-width: 1023px) {
  .csx-stage { display: flex; flex-direction: column; }
  .csx-stage__art { position: relative; inset: auto; height: 44vh; min-height: 290px; }
  .csx-stage__shade { background: linear-gradient(0deg, #000 2%, rgba(0,0,0,0) 46%); }
  .csx-stage__body { min-height: 0; max-width: none; padding: 0 20px 24px; margin-top: -64px; }
  .csx-stage__title { font-size: clamp(37px, 10.6vw, 54px); }
  .csx-stage__desc { font-size: 14.5px; }
  .csx-thumbs { display: none; }
  .csx-actions .csx-btn { flex: 1 1 auto; justify-content: center; }
  .csx-actions .csx-btn--text { flex: 0 0 auto; }
  .csx-card { width: 138px; }
  .csx-gcard { width: 218px; }
  .csx-grid { gap: 4px; }
  .csx-cell { min-height: 64px; border-radius: 4px; }
  .csx-cell__d { font-size: 11px; top: 4px; left: 5px; }
  .csx-cal { padding: 22px 12px 4px; }
  .csx-shelf__head, .csx-rail { padding-left: 16px; padding-right: 16px; }
  .csx-bar { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .csx-stage__img { transition: none; }
  .csx-rail { scroll-behavior: auto; }
}

/* ================= HOUSE CONVERSION — frame + legacy zones (fx1, 2026-10-16) =================
   Root cause (defects 2/3/5): this page still loads /css/theme-desert.css,
   which remaps the whole --pv-* token family on body to the retired Desert
   palette (cream canvas #FAF6EE, white cards, ink text, burnt-orange accent
   #C2410C / ember #E8762D). The csx zones above pin their own colors, but
   every legacy zone — title zone, search/toggle, Coming Up feed, register
   list, footer — reads the tokens, so the page rendered desert around and
   below the black module, inside a white body frame (.pv-content gutter).
   This block re-pins the token family to the house system for THIS page
   only (this file is page-scoped and loads last), makes the canvas black
   edge-to-edge at phone widths, compacts the title zone (defect 6),
   converts the masthead zone (defect 5), and gives pv-marks.js's buttons
   their missing component geometry in house colors (defect 4: the page
   loads pv-marks.js but never linked pv-marks.css, so the marks rendered
   as bare UA-default buttons — the stray white boxes). */

/* ---- canvas + token re-pin (full inversion of the desert remap) ---- */
html { background: #000 !important; }
body {
  background: #000; color-scheme: dark;
  --desert-bg: #000000; --desert-card: #101010; --desert-pressed: #1B1B1B;
  --desert-ink: #F4F4F4; --desert-ink-dim: rgba(165,172,175,.88);
  --desert-ink-faint: rgba(165,172,175,.66);
  --desert-rule: #2C2C2C;
  --desert-accent: #E10600; --desert-accent-deep: #A80400;
  --desert-accent-soft: rgba(225,6,0,.14); --desert-accent-faint: rgba(225,6,0,.08);
  --desert-accent-ember: #E10600;
  --desert-accent-glow: rgba(225,6,0,.35); --desert-accent-glow-lg: rgba(225,6,0,.5);
  --desert-ink-rgb: 165,172,175; --desert-card-rgb: 16,16,16;
  --desert-bg-rgb: 0,0,0; --desert-shadow-rgb: 0,0,0;
  --pv-noir: #000000; --pv-noir-2: #101010; --pv-noir-3: #1B1B1B;
  --pv-ivory: #F4F4F4; --pv-ivory-dim: rgba(165,172,175,.92);
  --pv-ivory-faint: rgba(165,172,175,.6);
  --pv-rule: #2C2C2C; --pv-glass: rgba(0,0,0,.92);
  --pv-red: #E10600; --pv-red-ember: #E10600; --pv-red-deep: #8F0400;
  --pv-on-red: #FFFFFF;
}

/* ---- frame: full-bleed at phone widths (defect 2) ---- */
@media (max-width: 767px) {
  .pv-content { padding-inline: 0; }
  /* legacy text zones that relied on the shell gutter keep their inset */
  .pvn-title-zone, .cu-searchzone, .cs-toggle, #csFeed, #csListWrap, #csDayList { padding-inline: 20px; }
}

/* ---- masthead zone (defect 5): house header treatment ---- */
.pv-site-head { background: #000; }
.pv-site-head .topbar { color: #A5ACAF; }
.pv-site-head .topbar .hide-m { color: #A5ACAF; }
.pv-site-head .brand .word { font-family: 'Previously Display', Georgia, 'Times New Roman', serif; color: #E10600; }
.pv-site-head .brand .word em { color: #E10600; }
.pv-site-head .desk { color: #A5ACAF; }

/* ---- title zone (defect 6): compact — the stage is the first content ---- */
.pvn-title-zone { margin-top: 0; padding: 18px 20px 8px; text-align: left; }
.pvn-page-title { font-family: 'Previously Display', Georgia, 'Times New Roman', serif;
  font-weight: 400; font-size: clamp(30px, 8.4vw, 44px); line-height: 1.05;
  letter-spacing: .01em; color: #fff; margin: 0; }
.pvn-page-title em { font-style: normal; color: #E10600; }

/* ---- Coming Up feed (defect 3) ---- */
.cu-kicker { color: #E10600; }
.cs-feed-sub { color: #A5ACAF; }
.cs-feed-card { background: #101010; border-color: #2C2C2C; position: relative; }
.cs-feed-card:hover { background: #1B1B1B; border-color: #A5ACAF; }
.cs-feed-art { background: #1B1B1B; }
.cs-feed-meta { color: #E10600; }
.cs-feed-title { color: #fff; }

/* ---- register list (defect 3) ---- */
.cs-ev { color: #A5ACAF; }
.cs-ev h3, .cs-ev h3 a { color: #fff; }
.cs-ev p { color: #A5ACAF; }
.cs-ev p b { color: #fff; }
.cs-why { color: #F4F4F4; border-left-color: #E10600; }
.cs-date b { color: #fff; }
.cs-date span { color: #E10600; }
.cs-type { color: #E10600; }
.cs-type.t-game, .cs-type.t-launch { color: #A5ACAF; }
.cs-count { color: #E10600; }
.cs-art { background: #101010; }
.cs-remind { background: #1B1B1B; color: #F4F4F4; border-color: #2C2C2C; }
.cs-remind:hover { border-color: #A5ACAF; }
.cs-remind[aria-pressed="true"] { background: #E10600; border-color: #E10600; color: #fff; }
.cs-trailer-btn { background: transparent; color: #F4F4F4; border-color: #2C2C2C; }
.cs-tickets { background: rgba(225,6,0,.12); color: #F4F4F4; border-color: #E10600; }
.cs-empty { color: #A5ACAF; }
.cs-legend { color: #A5ACAF; }
.cs-buzz-ep { color: #fff; }
.cs-buzz-take { color: #A5ACAF; }

/* ---- search + view toggle ---- */
.cu-searchzone .pv-search input { background: #101010; color: #F4F4F4; border-color: #2C2C2C; }
.cu-searchzone .pv-search input::placeholder { color: rgba(165,172,175,.75); }
.cs-toggle { color: #A5ACAF; }
.cs-toggle button { color: #A5ACAF; }
.cs-toggle button[aria-pressed="true"] { color: #fff; }

/* ---- marks (defect 4): pv-marks.css geometry, house colors ---- */
.cs-spot-card { position: relative; }
.pv-marks-stack { position: absolute; top: 54px; right: 8px; z-index: 6;
  display: flex; flex-direction: column; gap: 6px; }
#csList .pv-marks-stack { position: static; flex-direction: row; }
.pv-marks-stack .pv-mark { width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(165,172,175,.4); background: rgba(10,10,10,.62);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; }
.pv-marks-stack .pv-mark svg { width: 16px; height: 16px; fill: none;
  stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none; }
.pv-marks-stack .pv-mark-watched[aria-pressed="true"] { background: #E10600; border-color: #E10600; }
.pv-marks-stack .pv-mark-want[aria-pressed="true"] { background: #A5ACAF; border-color: #A5ACAF; }
.pv-marks-stack .pv-mark-want[aria-pressed="true"] svg { stroke: #000; }
.pv-marks-stack .pv-mark:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pv-mark-labeled { border: 1.5px solid #2C2C2C; background: #101010; color: #F4F4F4; border-radius: 6px; }
.pv-mark-labeled[aria-pressed="true"] { background: #1B1B1B; color: #fff; }
.pv-mark-watched.pv-mark-labeled[aria-pressed="true"] { background: #E10600; border-color: #E10600; color: #fff; }

/* ---- footer zone ---- */
.pvf-footer { background: #000; color: #A5ACAF; }

/* ================= fx2 (2026-10-16): Marathon display type, range row, today cell =================
   Defect 7: the module's display type pointed at var(--pv-serif), which
   THIS page's local tokens.css maps to Playfair Display — so every csx
   heading rendered Playfair, not Marathon. (On converted pages the same
   var resolves to the Marathon alias.) Pin the Marathon face explicitly:
   'Previously Display' is the CSS alias for Marathon Long Run Display
   (see /css/fonts.css); the @font-face below mirrors the root sheet so
   the face is guaranteed present on this page. Regular 400 only. */
@font-face {
  font-family: 'Previously Display';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/css/fonts/marathon-long-run-display-latin.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-024F, U+2000-2064, U+2066-206F, U+20AC;
}
.csx-stage__title, .csx-shelf__title, .csx-cal__month, .csx-stat b,
.csx-card__art--type span, .csx-card__title, .csx-gcard__match,
.csx-rail-item b {
  font-family: 'Previously Display', Georgia, 'Times New Roman', serif;
}
.pv-modal__head:not(:has(.pv-brand))::before {
  font-family: 'Previously Display', Georgia, 'Times New Roman', serif;
}

/* canvas: beat the tokens.css dark-scheme body rule (specificity) */
html body { background: #000; }

/* Defect 8b: quick ranges = one clean underline-tab row, scrollable */
.csx-range { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.csx-range::-webkit-scrollbar { display: none; }
.csx-range__btn { flex: 0 0 auto; white-space: nowrap; line-height: 1.3; }

/* Defect 9: calendar cell content stacks legibly — date number, TODAY
   marker beneath it, count on one line at the bottom; nothing overlaps. */
.csx-cell__d { display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.15; }
.csx-cell__d > span { display: block; margin-top: 1px; }
.csx-cell__n { white-space: nowrap; letter-spacing: .05em; }
@media (max-width: 1023px) {
  .csx-cell__n { font-size: 9px; }
  .csx-cell__d > span { font-size: 8.5px !important; }
}

/* ================= fx3 (2026-10-16): search component =================
   .pv-search__bar paints itself with rgba(var(--desert-ink-rgb), .82) —
   a dark-glass pill in the desert scheme (ink = dark). The fx1 silver
   ink-rgb pin inverted it into a light pill. Pin the component's own
   colors here (bar, input, results panel) to the house system. */
body { --desert-pressed-rgb: 27,27,27; }
.cu-searchzone .pv-search__bar { background: rgba(16,16,16,.88);
  border-color: #2C2C2C; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.cu-searchzone .pv-search__input { color: #F4F4F4; }
.cu-searchzone .pv-search__input::placeholder { color: rgba(165,172,175,.75); }
.cu-searchzone .pv-search__icon { color: rgba(165,172,175,.85); }
.cu-searchzone .pv-search__results { background: #101010; border-color: #2C2C2C; color: #A5ACAF; }
.cu-searchzone .pv-search__meta { color: #A5ACAF; }
.cu-searchzone .pv-search__meta strong { color: #F4F4F4; }
.cu-searchzone .pv-search__opt-t { color: #F4F4F4; }
.cu-searchzone .pv-search__opt-s { color: #A5ACAF; }
.cu-searchzone .pv-search__empty .pv-search__q { color: #F4F4F4; }

/* ================= fx4 (2026-10-16): modal scrim =================
   cs-modals.css paints the overlay scrim rgba(var(--desert-ink-rgb), .74)
   (dark glass in the desert scheme). The fx1 silver ink-rgb pin inverted
   it into a light wash behind the (correctly dark) modal. Restore a true
   dark scrim. */
.pv-ovl { background: rgba(0,0,0,.74); }

/* ============ matchup cards (2026-10-17, mu1): verified ESPN logos ============
   Data-driven template for game matchups with no poster art: both teams'
   real logos (logoDark || logo, stamped by build_feed.py from the game's
   own ESPN payload), AT composition, league + date line from the card's
   real data. Unverifiable matchups get the centered typographic --versus
   card — never a blank square, never a wrong logo. House system: black
   ground, silver secondary, signal red #E10600 divider, Marathon
   ('Previously Display') for names/abbreviations. */
.csx-card__art--match { display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  padding: 14px 10px; background: #101010; }
.csx-match__league { font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #A5ACAF; }
.csx-match__teams { display: flex; align-items: center;
  justify-content: center; gap: 8px; width: 100%; }
.csx-match__team { display: flex; flex-direction: column;
  align-items: center; gap: 7px; flex: 1 1 0; min-width: 0; }
.csx-match__team img { width: 56px; height: 56px; max-width: 100%;
  object-fit: contain; display: block; }
.csx-match__team span { font-family: 'Previously Display', Georgia,
  'Times New Roman', serif; font-size: 14px; letter-spacing: .06em;
  color: #fff; }
.csx-match__at { font-family: 'Previously Display', Georgia,
  'Times New Roman', serif; font-size: 13px; color: #E10600; }
.csx-card__art--versus { flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 5px; padding: 14px 10px; }
.csx-card__art--versus .csx-versus__league { font-size: 10px;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #A5ACAF; font-family: inherit; }
.csx-card__art--versus .csx-versus__name { font-family: 'Previously Display',
  Georgia, 'Times New Roman', serif; font-size: 19px; line-height: 1.15;
  text-transform: uppercase; color: #fff; }
.csx-card__art--versus .csx-versus__at { font-family: 'Previously Display',
  Georgia, 'Times New Roman', serif; font-size: 12px; color: #E10600; }
.csx-gcard__logos { display: flex; align-items: center; gap: 8px;
  margin: 0 0 7px; }
.csx-gcard__logos img { width: 30px; height: 30px; object-fit: contain;
  display: block; }
.csx-gcard__logos span { font-family: 'Previously Display', Georgia,
  'Times New Roman', serif; font-size: 10.5px; color: #E10600; }
@media (max-width: 1023px) {
  .csx-match__team img { width: 40px; height: 40px; }
  .csx-match__teams { gap: 5px; }
  .csx-card__art--match { gap: 9px; }
}