/* READABILITY, ON EVERY PAGE (Eric, 9 Oct 2026). Hand-written; studio/seo-pass.py links it into
   every page whichever builder made it, last in the head. The selectors are wrapped in
   :root:root :is(...) so they outrank the pages' own !important rules, some of which are more
   specific than a plain attribute match (Lore's year labels).

   WHITE TEXT ON THE RED, A SHADE DARKER ("slightly darker red behind white text, DO IT").
   White on #ED1C24 is 4.38:1 and the readable minimum is 4.5; #E31A22 is 4.73. ONLY behind white
   text: the brand red itself stays, because red TEXT on the black only just passes (4.52) and a
   darker red would fail there instead. The red theme only - gold and green keep their own. Every
   component that puts white words on the red, found by scanning the drawn pages; most get their
   red inline or from a script, hence the style matches. */
:root { --csm-a-on: var(--csm-a); }
:root:not([data-accent]), :root[data-accent="red"] { --csm-a-on: #E31A22; }
:root:root :is(
  [data-active][data-afilter], [data-active][data-efilter], [data-active][data-eview],
  [data-pillbevel][style*="var(--csm-a)"],
  [data-estatuslabel][style*="var(--csm-a)"],
  [data-srow] span[style*="var(--csm-a)"],
  [data-ecap][style*="var(--csm-a)"], [data-scap][style*="var(--csm-a)"],
  [data-eday][style*="var(--csm-a)"], [data-sday][style*="var(--csm-a)"],
  [data-cmembers], [data-nmain],
  [data-yearcell][data-active] [data-plate], [data-schedrow][data-yearon] [data-scheddate],
  [data-p5row][data-major="1"]:not([data-target="1"]) [data-p5anum],
  .gb-mark.gb-on .gb-chip
) {
  background-color: var(--csm-a-on) !important;
}

/* The calendars' red event chips carry a second line - the time, the act, the show - in a pale
   pink (white at 85% or less, or faded), which no red behind it makes readable. White, on the red chips
   only. */
:root:root :is([data-ecap], [data-scap])[style*="var(--csm-a)"] * {
  color: #fff !important;
  opacity: 1 !important;
}


@media (max-width: 720px) {
  /* NOTHING UNDER 12PX ON A PHONE ("no text under 12 px on phones. DO IT"). The design sizes most
     small print inline, so the sizes it uses are matched as written - the page's own spelling and
     the one the browser writes back after React draws it, and a clamp() whose floor is under
     12px - and the rest are the stylesheet rules
     a scan of every page found under 12px. */
  :root:root :is(
    [style*="font-size:7.5px"], [style*="font-size: 7.5px"], [style*="font-size:8px"], [style*="font-size: 8px"],
    [style*="font-size:8.5px"], [style*="font-size: 8.5px"], [style*="font-size:9px"], [style*="font-size: 9px"],
    [style*="font-size:9.5px"], [style*="font-size: 9.5px"], [style*="font-size:10px"], [style*="font-size: 10px"],
    [style*="font-size:10.5px"], [style*="font-size: 10.5px"], [style*="font-size:11px"], [style*="font-size: 11px"],
    [style*="font-size:11.5px"], [style*="font-size: 11.5px"],
    [style*="font-size:clamp(8px"], [style*="font-size: clamp(8px"],
    [style*="font-size:clamp(9px"], [style*="font-size: clamp(9px"],
    [style*="font-size:clamp(10px"], [style*="font-size: clamp(10px"],
    [style*="font-size:clamp(11px"], [style*="font-size: clamp(11px"],
    [data-cmeta], [data-cmeta] span, [data-cviews], [data-cdur], [data-cnew], [data-nstat], [data-nhandle],
    [data-mobflegal] a, [data-mobfcopy], [data-ukdaysub], [data-ukdaydate], [data-ukdaynum], [data-ukhdate],
    [data-ukarrow], [data-db], [data-csm-biocredit] a, .c-eyebrow, .c-live, .c-live b, .c-num b, .c-plus
  ) {
    font-size: 12px !important;
  }
}

/* THE RELEASE CALENDAR'S SPACE, HELD (PageSpeed, 9 Oct 2026). schedule-cal.js fills the grid a
   moment after the page is drawn, so it opened 0px tall and then shoved the footer down by its own
   height - a layout shift of 0.22 on the Schedule page. Until its days are in, it keeps the shape
   a month has (about 1.65 wide to 1 tall). Phones show the list instead of the grid. */
@media (min-width: 721px) {
  [data-scalgrid]:not(:has([data-sday])) { aspect-ratio: 1.65; }
}