/* ==========================================================================
   Soap2Day 2026 — Coming Soon (IMDb calendar) preview
   S2D26_COMING_SOON_CSS_20260918

   Scoped to body.s2d26-coming-soon-page (added by the mu-plugin), so nothing
   here can reach another page. Colours come from the theme's own variables;
   only the two values the theme states literally for this exact heading
   (#333333 light — css/psyplay-api-popular.css line ~52 — and #eeeeee dark)
   are repeated here, and they are the accessible half of the pair.

   Rule 27 applies: this stylesheet is enqueued, so it prints BEFORE the
   hardcoded s2d26/header.css <link>. Every override therefore carries
   `html body` plus the body class and !important. Do not "simplify" those
   selectors.

   Hover contract (project-wide):
     - `@media (hover:hover) and (pointer:fine)` -> the background changes and
       NOTHING else: transform stays none, so nothing scales or translates.
     - `@media (hover:none)` -> the hover fill is neutralised, `:active` gives
       the press feedback, and no transform is inherited.
     - `:focus-visible` mirrors hover for the keyboard.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — the theme's variables, with the two schemes the theme has.
   -------------------------------------------------------------------------- */

html body.s2d26-coming-soon-page {
  --s2d26-cs-ink: var(--s2d26-modal-text, #182229);
  --s2d26-cs-muted: var(--s2d26-modal-muted, rgba(24, 34, 41, .48));
  --s2d26-cs-line: var(--s2d26-modal-line, rgba(24, 34, 41, .17));
  --s2d26-cs-surface: #ffffff;
  /* S2D26_CS_CARD_SURFACE_20260918 - the card is an opaque surface in both
     schemes, so the site's decorative pattern can never read through a poster. */
  --s2d26-cs-card-solid: #ffffff;
  --s2d26-cs-surface-soft: rgba(24, 34, 41, .045);
  --s2d26-cs-accent: var(--s2d26-accent, #67ddd7);
  --s2d26-cs-heading-ink: #333333;
  --s2d26-cs-heading-accent: #00aeb5;
  --s2d26-cs-hover: rgba(24, 34, 41, .07);
  --s2d26-cs-hover-strong: rgba(24, 34, 41, .13);
  --s2d26-cs-shadow: rgba(14, 27, 35, .12);
}

html.night-mode body.s2d26-coming-soon-page,
html[data-theme="dark"] body.s2d26-coming-soon-page {
  --s2d26-cs-ink: var(--s2d26-modal-text, #f3f6f7);
  --s2d26-cs-muted: var(--s2d26-modal-muted, rgba(255, 255, 255, .43));
  --s2d26-cs-line: var(--s2d26-modal-line, rgba(255, 255, 255, .14));
  --s2d26-cs-surface: rgba(255, 255, 255, .045);
  --s2d26-cs-card-solid: #12191d;
  --s2d26-cs-surface-soft: rgba(255, 255, 255, .055);
  --s2d26-cs-accent: var(--s2d26-accent, #67ddd7);
  --s2d26-cs-heading-ink: #eeeeee;
  --s2d26-cs-heading-accent: #20d5d9;
  --s2d26-cs-hover: rgba(108, 221, 215, .11);
  --s2d26-cs-hover-strong: rgba(108, 221, 215, .2);
  --s2d26-cs-shadow: rgba(0, 0, 0, .4);
}

/* --------------------------------------------------------------------------
   2. Page chrome
   -------------------------------------------------------------------------- */

html body.s2d26-coming-soon-page #main.s2d26-cs-main {
  box-sizing: border-box !important;
  margin-top: 0 !important;
  padding-top: var(--s2d26-listing-header-clearance, var(--s2d26-header-height, 70px)) !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-head {
  box-sizing: border-box !important;
  position: static !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}

/*
 * Defensive: the theme styles the BARE `header` element (position:fixed,
 * z-index 99990), so any content that uses a <header> tag becomes a second
 * fixed bar painted over its own page — measured as the H1 sitting at y=19
 * underneath the site logo. The markup uses <div> for that reason; these
 * resets mean a future edit that reintroduces the tag cannot resurrect it.
 */
html body.s2d26-coming-soon-page .s2d26-cs-head,
html body.s2d26-coming-soon-page .s2d26-cs-switcher,
html body.s2d26-coming-soon-page .s2d26-cs-foot {
  position: static !important;
  z-index: auto !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-eyebrow {
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: var(--s2d26-cs-accent) !important;
  font: 700 11px/1.2 var(--s2d26-menu-font, Montserrat, Arial, sans-serif) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-title {
  position: relative !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 0 10px !important;
  border: 0 !important;
  background: none !important;
  /* S2D26_CS_H1_SITE_STYLE_20260918 - the owner asked for the site's own
     listing-heading look on the page title: the same family, tracking and
     accent corner the section headings use, at the page-title size. The markup
     also carries psyplay-api-popular-title and s2d26-listing-heading-rail. */
  color: var(--s2d26-cs-heading-ink) !important;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
  font-size: clamp(26px, 2.6vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-title::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -11px !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 13px !important;
  height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 2px solid var(--s2d26-cs-heading-accent) !important;
  border-left: 2px solid var(--s2d26-cs-heading-accent) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-title::after {
  content: "" !important;
  position: absolute !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 340px !important;
  height: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, rgba(108, 221, 215, .95) 0%, rgba(108, 221, 215, .2) 100%) !important;
  box-shadow: 0 0 10px rgba(108, 221, 215, .45) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-lede {
  /* S2D26_CS_LEDE_ONE_LINE_20260918 - the owner wants the sentence on ONE line:
     the 74ch cap was what wrapped it, not the text. Small screens still wrap,
     which is unavoidable and fine. */
  max-width: none !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: var(--s2d26-cs-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-stamp {
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: var(--s2d26-cs-muted) !important;
  font-size: 11.5px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-foot {
  box-sizing: border-box !important;
  margin: 30px 0 10px !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--s2d26-cs-line) !important;
  color: var(--s2d26-cs-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-foot code,
html body.s2d26-coming-soon-page .s2d26-cs-notice code {
  padding: 1px 5px !important;
  border-radius: 4px !important;
  background: var(--s2d26-cs-surface-soft) !important;
  color: var(--s2d26-cs-ink) !important;
  font-size: .92em !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-empty {
  box-sizing: border-box !important;
  margin: 0 0 20px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--s2d26-cs-line) !important;
  border-radius: 10px !important;
  background: var(--s2d26-cs-surface-soft) !important;
  color: var(--s2d26-cs-ink) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* The "your data is stale / failed" strip. Never blank: if there is no data
   this is what the page shows instead of nothing. */
html body.s2d26-coming-soon-page .s2d26-cs-notice {
  box-sizing: border-box !important;
  margin: 0 0 20px !important;
  padding: 12px 16px !important;
  border: 1px solid var(--s2d26-cs-line) !important;
  border-left: 3px solid var(--s2d26-cs-accent) !important;
  border-radius: 8px !important;
  background: var(--s2d26-cs-surface-soft) !important;
  color: var(--s2d26-cs-ink) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-notice p {
  margin: 0 !important;
  color: inherit !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-notice-detail {
  display: block !important;
  margin-top: 4px !important;
  color: var(--s2d26-cs-muted) !important;
  font-size: 12.5px !important;
}

/* --------------------------------------------------------------------------
   3. Variant switcher
   -------------------------------------------------------------------------- */

html body.s2d26-coming-soon-page .s2d26-cs-switcher {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-switch {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid var(--s2d26-cs-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--s2d26-cs-ink) !important;
  font-family: var(--s2d26-menu-font, Montserrat, Arial, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  transform: none !important;
  transition: background-color .16s ease, border-color .16s ease !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-switch-key {
  color: var(--s2d26-cs-accent) !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-switch.is-active {
  border-color: var(--s2d26-cs-accent) !important;
  background: var(--s2d26-cs-surface-soft) !important;
}

/* --------------------------------------------------------------------------
   4. The rail heading — the site's own treatment, with a readable light value
   -------------------------------------------------------------------------- */

html body.s2d26-coming-soon-page .s2d26-cs-heading {
  position: relative !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 36px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 16px !important;
  padding: 6px 0 8px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--s2d26-cs-heading-ink) !important;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1.06 !important;
  text-align: left !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  isolation: isolate;
}

html body.s2d26-coming-soon-page .s2d26-cs-heading::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -11px !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 13px !important;
  height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 2px solid var(--s2d26-cs-heading-accent) !important;
  border-left: 2px solid var(--s2d26-cs-heading-accent) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-heading::after {
  content: "" !important;
  position: absolute !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, rgba(108, 221, 215, .95) 0%, rgba(108, 221, 215, .2) 100%) !important;
  box-shadow: 0 0 10px rgba(108, 221, 215, .45) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-heading-count {
  display: inline-block !important;
  margin: 0 0 0 8px !important;
  padding: 2px 8px !important;
  border: 1px solid var(--s2d26-cs-line) !important;
  border-radius: 999px !important;
  background: var(--s2d26-cs-surface-soft) !important;
  color: var(--s2d26-cs-muted) !important;
  font-family: var(--s2d26-menu-font, Montserrat, Arial, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
}

/* --------------------------------------------------------------------------
   5. Variant A — poster grid under month headings
   -------------------------------------------------------------------------- */

html body.s2d26-coming-soon-page .s2d26-cs-month {
  box-sizing: border-box !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  background: none !important;
  clear: both !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-month .psyplay-api-popular-inner {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: 16px 14px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* S2D26_CS_CARD_SURFACE_20260918 - see the late override at the end of this
   file: the r39 card rule out-specifies this selector, so the opaque surface is
   declared there instead. */
html body.s2d26-coming-soon-page .s2d26-cs-item,
html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item {
  box-sizing: border-box !important;
  position: relative !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: var(--s2d26-cs-surface-soft) !important;
  aspect-ratio: 2 / 3 !important;
  contain: layout paint;
}

html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link {
  box-sizing: border-box !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: inherit !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  text-decoration: none !important;
  transform: none !important;
  transition: background-color .16s ease !important;
}

/* The theme's own mask overlay and play glyph are for titles you can watch.
   Neither belongs on a film that is not on the site yet, and the play glyph
   would be a misleading control. Hover must change the background only. */
html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link::before,
html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link::after {
  content: none !important;
  display: none !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-thumb {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-thumb--none {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  background: var(--s2d26-cs-surface-soft) !important;
  color: var(--s2d26-cs-muted) !important;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
}

/* The fallback letter is sized to its own box; a poster-sized 34px glyph in a
   44px-wide agenda thumbnail is what made it look like a stray floating
   character (it was absolutely positioned against a distant ancestor, because
   the thumbnail wrappers are not positioned). */
html body.s2d26-coming-soon-page .s2d26-cs-tl-thumb .s2d26-cs-thumb--none {
  font-size: 20px !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-thumb .s2d26-cs-thumb--none {
  font-size: 16px !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item .mli-info {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  top: auto !important;
  box-sizing: border-box !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 26px 10px 9px !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(180deg, rgba(4, 9, 11, 0) 0%, rgba(4, 9, 11, .82) 62%, rgba(4, 9, 11, .95) 100%) !important;
  z-index: 3 !important;
  transform: none !important;
  transition: background-color .16s ease !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item .mli-info .h2 {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f4f9f9 !important;
  font-family: var(--s2d26-menu-font, Montserrat, Arial, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.28 !important;
  text-align: left !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65) !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item .mli-info .s2d-card-genres {
  display: block !important;
  margin: 3px 0 0 !important;
  color: rgba(244, 249, 249, .74) !important;
  font-size: 10.5px !important;
  letter-spacing: .02em !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item .mli-add {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 4 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-badge {
  display: inline-block !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(218, 250, 248, .26) !important;
  border-radius: 999px !important;
  background: rgba(3, 8, 10, .82) !important;
  -webkit-backdrop-filter: blur(8px) saturate(118%) !important;
  backdrop-filter: blur(8px) saturate(118%) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4) !important;
  color: #f4fbfb !important;
  font-family: var(--s2d26-menu-font, Montserrat, Arial, sans-serif) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   6. Variant B — chronological timeline, the date beside every entry
   -------------------------------------------------------------------------- */

html body.s2d26-coming-soon-page .s2d26-cs-timeline {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-month {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-month:not(:first-child) .s2d26-cs-heading {
  margin-top: 22px !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-item {
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--s2d26-cs-line) !important;
  list-style: none !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-link {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 62px 52px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  color: var(--s2d26-cs-ink) !important;
  text-decoration: none !important;
  transform: none !important;
  transition: background-color .16s ease !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-date {
  display: grid !important;
  gap: 1px !important;
  justify-items: start !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-day {
  color: var(--s2d26-cs-ink) !important;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-mon {
  color: var(--s2d26-cs-accent) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1.2 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-dow {
  color: var(--s2d26-cs-muted) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  line-height: 1.2 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-thumb {
  display: block !important;
  box-sizing: border-box !important;
  width: 52px !important;
  height: 78px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  background: var(--s2d26-cs-surface-soft) !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-thumb .s2d26-cs-thumb {
  border-radius: inherit !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-body {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-title {
  display: block !important;
  color: var(--s2d26-cs-ink) !important;
  font-family: var(--s2d26-menu-font, Montserrat, Arial, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-year {
  display: inline-block !important;
  margin: 0 0 0 6px !important;
  color: var(--s2d26-cs-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-genres,
html body.s2d26-coming-soon-page .s2d26-cs-tl-stars {
  display: block !important;
  margin: 2px 0 0 !important;
  color: var(--s2d26-cs-muted) !important;
  font-size: 12px !important;
  line-height: 1.36 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-tl-stars {
  font-size: 11.5px !important;
}

/* --------------------------------------------------------------------------
   7. Variant C — calendar agenda, grouped by release day
   -------------------------------------------------------------------------- */

html body.s2d26-coming-soon-page .s2d26-cs-agenda-month {
  display: block !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--s2d26-cs-line) !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-date {
  display: grid !important;
  align-content: start !important;
  justify-items: start !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 2px 10px 0 0 !important;
  border-right: 2px solid var(--s2d26-cs-accent) !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-num {
  color: var(--s2d26-cs-ink) !important;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-dow {
  color: var(--s2d26-cs-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  line-height: 1.2 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-link {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background-color: var(--s2d26-cs-surface-soft) !important;
  color: var(--s2d26-cs-ink) !important;
  text-decoration: none !important;
  transform: none !important;
  transition: background-color .16s ease, border-color .16s ease !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-thumb {
  display: block !important;
  box-sizing: border-box !important;
  width: 42px !important;
  height: 63px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 5px !important;
  background: var(--s2d26-cs-surface-soft) !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-thumb .s2d26-cs-thumb {
  border-radius: inherit !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-body {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-title {
  display: -webkit-box !important;
  color: var(--s2d26-cs-ink) !important;
  font-family: var(--s2d26-menu-font, Montserrat, Arial, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-genres {
  display: block !important;
  margin: 2px 0 0 !important;
  color: var(--s2d26-cs-muted) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   8. Hover / touch / keyboard — background only, never a transform
   -------------------------------------------------------------------------- */

/* Desktop pointer: the background changes and nothing else. */
@media (hover: hover) and (pointer: fine) {
  html body.s2d26-coming-soon-page .s2d26-cs-switch:hover,
  html body.s2d26-coming-soon-page .s2d26-cs-switch:focus-visible {
    background-color: var(--s2d26-cs-hover) !important;
    transform: none !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-tl-link:hover,
  html body.s2d26-coming-soon-page .s2d26-cs-tl-link:focus-visible,
  html body.s2d26-coming-soon-page .s2d26-cs-day-link:hover,
  html body.s2d26-coming-soon-page .s2d26-cs-day-link:focus-visible {
    background-color: var(--s2d26-cs-hover) !important;
    border-color: var(--s2d26-cs-line) !important;
    transform: none !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link:hover,
  html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link:focus-visible {
    background-color: var(--s2d26-cs-hover) !important;
    transform: none !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link:hover .mli-info,
  html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link:focus-visible .mli-info {
    background-color: var(--s2d26-cs-hover-strong) !important;
    transform: none !important;
  }
}

/* Touch: a tap leaves :hover applied until the next tap, so the desktop fill
   is neutralised here and :active carries the press. No transform is
   inherited, so nothing can stay stuck lifted. Controls that have a resting
   fill keep it; controls that have none must not gain one. */
@media (hover: none) {
  html body.s2d26-coming-soon-page .s2d26-cs-switch:not(.is-active):hover,
  html body.s2d26-coming-soon-page .s2d26-cs-tl-link:hover,
  html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link:hover {
    background-color: transparent !important;
    transform: none !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link:hover .mli-info {
    background-color: transparent !important;
    transform: none !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-day-link:hover {
    background-color: var(--s2d26-cs-surface-soft) !important;
    border-color: transparent !important;
    transform: none !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-switch:active,
  html body.s2d26-coming-soon-page .s2d26-cs-tl-link:active,
  html body.s2d26-coming-soon-page .s2d26-cs-day-link:active,
  html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link:active {
    background-color: var(--s2d26-cs-hover-strong) !important;
    transform: none !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link:active .mli-info {
    background-color: var(--s2d26-cs-hover-strong) !important;
    transform: none !important;
  }
}

html body.s2d26-coming-soon-page .s2d26-cs-switch:focus-visible,
html body.s2d26-coming-soon-page .s2d26-cs-tl-link:focus-visible,
html body.s2d26-coming-soon-page .s2d26-cs-day-link:focus-visible,
html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link:focus-visible {
  outline: 2px solid var(--s2d26-cs-accent) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   9. Phones — a real 390px column count, not a desktop grid squeezed
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  html body.s2d26-coming-soon-page .s2d26-cs-title {
    font-size: clamp(24px, 8vw, 30px) !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-heading {
    max-width: calc(100vw - 24px) !important;
    font-size: 19px !important;
  }

  /* The corner is not rendered at phone width, matching the site's own
     listings (s2d26/header.css hides it under the same breakpoint). */
  html body.s2d26-coming-soon-page .s2d26-cs-heading::before {
    content: none !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 10px !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-tl-link {
    grid-template-columns: 50px 44px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 8px 6px !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-tl-thumb {
    width: 44px !important;
    height: 66px !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-tl-day {
    font-size: 19px !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-tl-title {
    font-size: 14px !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-day {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-day-date {
    padding-right: 8px !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-day-num {
    font-size: 21px !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-day-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-day-link {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 56px !important;
    padding: 5px 7px !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-day-thumb {
    width: 38px !important;
    height: 57px !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-switch {
    min-height: 32px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.s2d26-coming-soon-page .s2d26-cs-switch,
  html body.s2d26-coming-soon-page .s2d26-cs-tl-link,
  html body.s2d26-coming-soon-page .s2d26-cs-day-link,
  html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item > .s2d26-cs-link,
  html body.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item .mli-info {
    transition: none !important;
  }
}


/* ==========================================================================
   S2D26_CS_CARD_DATE_CHIP_20260918

   Variant A's release-date chip existed, reported visible, and was never
   painted. Measured on the live page:

       .mli-add    computed position: static
       card        top 353  bottom 592   (overflow:hidden, contain:layout paint)
       .mli-add    top 591  bottom 613   <- 21px of it below the card's edge
       document.elementFromPoint(chip centre) -> the GRID, not the chip

   The chip was laid out as a normal-flow block after the absolutely positioned
   .mli-info, so it began exactly at the card's bottom edge and the card's own
   clip removed it. Nothing was missing and nothing was hidden: the DOM said
   visible and the paint said otherwise.

   The rule that beat this file is the theme's FEATURED-card override:

       html.s2d-featured-v3.s2d-featured-style-2
         .psyplay-api-popular-grid > .ml-item .mli-add
         { position:static !important; inset:auto !important; display:block !important }

   It matches this page only because <html> carries s2d-featured-v3 and
   s2d-featured-style-2 and this grid carries psyplay-api-popular-grid - the
   same class, under a scope that was never meant for this template (Rule 52).
   It is (0,5,1); the .mli-add rule further up this file is (0,4,2); both sides
   are !important, so specificity decides and the theme wins.

   The repeated body class below is the mechanism, not noise: (0,5,2) beats
   (0,5,1). Do not "simplify" it, and keep `inset` explicit - the theme's
   `inset:auto` is a shorthand that resets all four edges.

   Scope: variant A's grid only. The chip's own colours (#f4fbfb on
   rgba(3,8,10,.82)) are scheme-independent, so this needs no per-scheme copy.
   ========================================================================== */
html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item .mli-add {
  position: absolute !important;
  inset: 8px 8px auto auto !important;
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 4 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  transform: none !important;
}


/* ==========================================================================
   S2D26_CS_AGENDA_CARDS_20260918

   Variant C is the page now (the owner chose the calendar agenda), and its
   cards are the design he asked for: THREE per row at desktop width, each card a
   large portrait poster that fills the card EDGE TO EDGE — no padding, no
   letterboxing, and no card or page colour visible around the artwork on any
   side, in either scheme. Two at tablet width, one at phone width.

   Why the card can fill its box (measured, not assumed): the stored poster is
   IMDb's 380x562 thumbnail, 380/562 = 0.676, against the card's own 2/3 = 0.667.
   `object-fit: cover` therefore trims ~1.4% of the width and leaves NOTHING
   below or beside the image. The card keeps a background of its own only for the
   case where a title has no poster at all, and that fallback is the letter tile
   (.s2d26-cs-thumb--none), not a colour showing through the poster.

   The day grid reuses .s2d26-cs-grid on purpose: variant A's card, poster, title
   overlay and date-chip rules (sections 5 and 9 above) are the proven ones, and
   this page has already paid for their bugs once. Only what differs is stated
   here: the column count, and a fully transparent card.

   Rule 27 still applies: this file is enqueued and therefore prints BEFORE the
   hardcoded s2d26/header.css <link>, so every override repeats `html body` plus
   the body class, and (0,5,2) selectors double it where a theme rule has to be
   beaten.
   ========================================================================== */

/*
 * S2D26_CS_LISTING_GEOMETRY_20260918 — THE CARD GEOMETRY IS THE LISTING'S.
 *
 * The owner asked for the same posters as the listing pages, so nothing here is
 * invented. These are the listing's own rules (theme css/custom.css):
 *
 *   @media screen and (min-width: 992px) {
 *     html.s2d-listing-cols-N .page-category .movies-list-full {
 *       display: grid; align-items: start; gap: 28px 24px;
 *       grid-template-columns: repeat(N, minmax(0, 1fr)); }
 *     ... > .ml-item { float: none; width: auto; height: auto; margin: 0;
 *                      aspect-ratio: 2 / 3; }
 *     ... > .ml-item > .ml-mask,
 *     ... > .ml-item > .ml-mask > img.mli-thumb { width: 100%; height: 100%; }
 *     ... > .ml-item > .ml-mask > img.mli-thumb {
 *       display: block; min-height: 0; object-fit: contain;
 *       object-position: center center; }
 *   }
 *   @media screen and (max-width: 991px), (hover: none) and (pointer: coarse) {
 *     ... > .ml-item { height: auto; aspect-ratio: 2 / 3; } }
 *
 * and the listing's card WIDTHS (theme css/main.css, .movies-list .ml-item):
 * 23% to 991px (four per row), 31.3% to 520px (three), 47% below 480px (two).
 *
 * The one number the owner fixed himself is the count: FOUR per row here, where
 * a listing uses seven. The rest - the 2:3 box, the flushed mask and poster,
 * contain instead of cover, and the phone's two-per-row - is the listing's.
 */
html body.s2d26-coming-soon-page .s2d26-cs-grid.s2d26-cs-day-grid {
  display: grid !important;
  align-items: start !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  overflow: visible !important;
}

/* The artwork owns every pixel of the card: no card colour, no padding, no
   border, no shadow around it. (0,5,2) so it also beats the featured-style rule
   that out-specified this file's earlier card rules (Rule 52). */
html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-day-grid > .ml-item > .s2d26-cs-link,
html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-day-grid > .ml-item > .s2d26-cs-link > .s2d26-cs-thumb {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  /* S2D26_CS_LISTING_GEOMETRY_20260918 - the sizes are the listing's, and the
     FIT stays cover. The listing fits the poster inside the 2:3 box with
     `object-fit: contain`; the stored poster is 380x562 (0.676) against a 2:3 box
     (0.667), so contain would leave a ~1.4% sliver of card on the sides - and the
     owner asked for artwork that fills the card edge to edge (r39), which is what
     cover does with that 1.4% trimmed instead. Measured, not assumed. */
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

/* A bigger card needs a readable overlay: same colours, sized for the width. */
html body.s2d26-coming-soon-page .s2d26-cs-day-grid > .ml-item .mli-info {
  padding: 40px 14px 13px !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-grid > .ml-item .mli-info .h2 {
  font-size: 16px !important;
  line-height: 1.24 !important;
  -webkit-line-clamp: 3 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-grid > .ml-item .mli-info .s2d-card-genres {
  margin-top: 4px !important;
  font-size: 12px !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-day-grid .s2d26-cs-badge {
  padding: 5px 10px !important;
  font-size: 11.5px !important;
}

/* Tablet: still four, with the tighter spacing the listing uses there. */
@media (max-width: 1023px) {
  html body.s2d26-coming-soon-page .s2d26-cs-grid.s2d26-cs-day-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px 14px !important;
  }
}

/* Phone, wide: the listing's 31.3% card - three per row. */
@media (max-width: 767px) {
  html body.s2d26-coming-soon-page .s2d26-cs-grid.s2d26-cs-day-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px 11px !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-day-grid > .ml-item .mli-info .h2 {
    font-size: 14px !important;
  }
}

/* Phone: the listing's 47% card - TWO per row, portrait 2:3. This is the size
   the owner asked for ("как в листингах фильмов"): at 390px the card is about
   170px wide, the same as a listing card at that width, and it may never
   overflow the viewport. */
@media (max-width: 479px) {
  html body.s2d26-coming-soon-page .s2d26-cs-grid.s2d26-cs-day-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px 11px !important;
  }
}


/* ==========================================================================
   S2D26_CS_MARK_CONTROLS_20260918

   The two per-account controls on every card: the site's own notification bell
   (.ofa-title-action--notification — the markup class-ofa-ui.php emits, copied
   value for value) and the Reddit-style upvote whose count is this page's
   waiting rating.

   The look is the site's reference control, exactly as the landing's card
   controls already render it (s2d26/mobile-surface-fixes.css,
   S2D26_LANDING_CARD_ACTIONS_LEFT_20260918): a 28px glass circle,
   rgba(3,8,10,.85) over blur(10px), a 14px stroked icon, the heart's saved
   colour #ff526b for "my vote is in", #53e4de for "my bell is on". The upvote is
   the same shape with the count inside it and a rounded pill instead of a
   circle, because the count is the rating the page sorts by and a hidden number
   would hide the feature.

   Two schemes: these colours are the CHIP colours, not scheme colours — the
   control sits on the poster, and the poster does not change with the theme. The
   date chip beside it is scheme-independent for the same reason and already
   ships that way.

   Hover contract (project-wide, and this control is a control):
     - desktop pointer -> the BACKGROUND changes and nothing else: no scale, no
       translate, and the saved colours are untouched;
     - touch -> the hover fill is neutralised, :active carries the press;
     - :focus-visible -> background plus an outline, never a transform.

   The selectors carry the body class TWICE (0,5,2) because the plugin styles
   these buttons from several scopes with !important, including
   `html:not(.dark-mode) .ofa-card-actions > .ofa-title-action` in a light
   prefers-color-scheme query — one class alone loses to it.
   ========================================================================== */

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions {
  position: absolute !important;
  z-index: 12 !important;
  top: 8px !important;
  right: auto !important;
  bottom: auto !important;
  left: 8px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  transform: none !important;
  isolation: isolate;
}

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions::before {
  display: none !important;
  content: none !important;
}

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action {
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(3, 8, 10, .85) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .42) !important;
  -webkit-backdrop-filter: blur(10px) saturate(118%) !important;
  backdrop-filter: blur(10px) saturate(118%) !important;
  color: rgba(247, 252, 252, .94) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background-color .16s ease, color .16s ease !important;
}

/* The upvote carries its count: the pill grows with the number instead of hiding
   it in a corner badge. */
html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .s2d26-cs-vote {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 10px 0 7px !important;
}

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action .s2d26-cs-vote-count {
  position: static !important;
  inset: auto !important;
  display: block !important;
  min-width: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: Inter, Montserrat, Arial, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 760 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.015em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: none !important;
  transform: none !important;
}

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action .ofa-title-action__icon,
html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action .ofa-title-action__icon svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action .ofa-title-action__icon svg {
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .72));
}

/* The plugin's state dot is not part of this page's control; keep the markup
   identical to the site's and keep the dot out of the picture. */
html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action .ofa-title-action__state-dot {
  display: none !important;
}

/* My vote is in / my bell is on. Background only on hover, so these survive it. */
html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .s2d26-cs-vote.is-saved {
  color: #ff526b !important;
}

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .s2d26-cs-vote.is-saved .ofa-title-action__icon svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action--notification.is-saved {
  color: #53e4de !important;
}

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action--notification.is-saved .ofa-bell-body {
  fill: currentColor !important;
}

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action[aria-busy="true"] {
  opacity: .72 !important;
  cursor: wait !important;
}

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action.s2d26-cs-mark-error {
  outline: 2px solid #ff526b !important;
  outline-offset: 2px !important;
}

/* Desktop pointer: the background, and nothing else. */
@media (hover: hover) and (pointer: fine) {
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action:hover,
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action:focus-visible {
    background: rgba(9, 15, 28, .88) !important;
    transform: none !important;
  }
}

/* Touch: a tap leaves :hover applied until the next tap, so the desktop fill is
   neutralised and :active carries the press. No transform is inherited. */
@media (hover: none) {
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action:hover {
    background: rgba(3, 8, 10, .85) !important;
    transform: none !important;
  }

  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action:active {
    background: rgba(9, 15, 28, .88) !important;
    transform: none !important;
  }
}

html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action:focus-visible {
  outline: 2px solid var(--s2d26-cs-accent) !important;
  outline-offset: 2px !important;
}

@media (max-width: 767px) {
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions {
    top: 7px !important;
    left: 7px !important;
    gap: 5px !important;
  }

  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action {
    flex-basis: 27px !important;
    width: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
  }

  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .s2d26-cs-vote {
    flex-basis: auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 9px 0 6px !important;
  }

  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action .ofa-title-action__icon,
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action .ofa-title-action__icon svg {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.s2d26-coming-soon-page .s2d26-cs-actions > .ofa-title-action {
    transition: none !important;
  }
}


/* ==========================================================================
   S2D26_CS_MONTH_JUMPS_20260918

   Two refinements from the owner, in the same release:

   1. MONTH JUMP LINKS. Every month section now carries id="month-YYYY-MM" and
      its heading row has quick IN-PAGE anchors to the next three months that
      have releases (href="#month-2026-10" — a real fragment, no reload, no query
      parameter). A month with no releases is not in the agenda at all, so it
      gets neither a section nor a link. The heading is left exactly as it was,
      inside a flex row: the rail-heading element is a sibling of the links, not
      a parent of them, so its own corner and colours are untouched.

      `scroll-margin-top` is what stops the theme's own FIXED header (position:
      fixed, z-index 99990, ~70px) from covering the month a link jumps to. This
      page already paid for that header once (see the <header> note in section
      2), so the offset uses the theme's own variable with the same fallback.

   2. THE SORT SWITCH IS IN PLACE. It is two <button>s, not links: no
      navigation, no reload, no state in the URL. The reorder happens in the DOM
      (mu-plugin, applySort) by moving the existing card nodes. These rules only
      make the buttons look and behave exactly like the variant pills they sit
      beside, and give them a real touch target on a phone.

      In both schemes: the colours come from the page's own tokens
      (--s2d26-cs-ink / --s2d26-cs-line / --s2d26-cs-surface-soft), which the
      theme's night-mode and data-theme="dark" block above already defines.
   ========================================================================== */

html body.s2d26-coming-soon-page .s2d26-cs-month-head {
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 14px !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-month-head .s2d26-cs-heading {
  margin: 0 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-jumps {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.s2d26-coming-soon-page .s2d26-cs-jump {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--s2d26-cs-line) !important;
  border-radius: 999px !important;
  background: var(--s2d26-cs-surface-soft) !important;
  color: var(--s2d26-cs-ink) !important;
  font-family: var(--s2d26-menu-font, Montserrat, Arial, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
}

/* The section a jump link lands on must clear the fixed site header. */
html body.s2d26-coming-soon-page .s2d26-cs-agenda-month {
  scroll-margin-top: calc(var(--s2d26-header-height, 70px) + 18px) !important;
}

/* The sort buttons are buttons: same shape and weight as the variant pills,
   with the browser's own button chrome removed and a cursor that says so. */
html body.s2d26-coming-soon-page button.s2d26-cs-sort {
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  text-align: center !important;
  text-transform: none !important;
}

html body.s2d26-coming-soon-page button.s2d26-cs-sort .s2d26-cs-switch-label {
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  html body.s2d26-coming-soon-page .s2d26-cs-jump:hover,
  html body.s2d26-coming-soon-page .s2d26-cs-jump:focus-visible {
    background-color: var(--s2d26-cs-hover) !important;
    border-color: var(--s2d26-cs-accent) !important;
    transform: none !important;
  }
}

@media (hover: none) {
  html body.s2d26-coming-soon-page .s2d26-cs-jump:hover {
    background-color: var(--s2d26-cs-surface-soft) !important;
    border-color: var(--s2d26-cs-line) !important;
    transform: none !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-jump:active {
    background-color: var(--s2d26-cs-hover-strong) !important;
    transform: none !important;
  }
}

html body.s2d26-coming-soon-page .s2d26-cs-jump:focus-visible {
  outline: 2px solid var(--s2d26-cs-accent) !important;
  outline-offset: 2px !important;
}

@media (max-width: 767px) {
  html body.s2d26-coming-soon-page .s2d26-cs-month-head {
    gap: 8px !important;
  }

  /* A phone thumb needs a real target, and the three links must fit one row
     under a 46px day rail at 390px: 3 x ~72px + gaps. */
  html body.s2d26-coming-soon-page .s2d26-cs-jump {
    min-height: 30px !important;
    padding: 0 11px !important;
    font-size: 11.5px !important;
  }

  html body.s2d26-coming-soon-page .s2d26-cs-jumps {
    gap: 5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.s2d26-coming-soon-page .s2d26-cs-jump {
    transition: none !important;
  }
}


/* S2D26_CS_POSTER_VISIBLE_20260918
 *
 * The theme leaves a listing poster hidden until it is revealed. The Coming Soon
 * card never took that path, so every image sat in the DOM fully loaded and sized
 * (naturalWidth 380, 274x411) with visibility:hidden and opacity:0 - the cards read
 * as empty grey panels. The template now also carries s2d-listing-image-ready, the
 * class the site's own listing images use once revealed; this block guarantees the
 * poster is painted even if another rule still withholds it.
 */
.s2d26-cs-item .s2d26-cs-thumb,
.s2d26-cs-item img.s2d26-cs-thumb {
  visibility: visible !important;
  opacity: 1 !important;
}
.s2d26-cs-item .s2d26-cs-thumb--none {
  visibility: visible !important;
  opacity: 1 !important;
}


/* S2D26_CS_ABOVE_BG_CLOUD_20260918
 *
 * The site paints a decorative tag cloud behind the content on these pages. This
 * template's markup does not establish a stacking context the way the listing
 * templates do, so that cloud was drawn OVER the posters - every card looked
 * washed out and the artwork was unreadable. Raise this page's content above it.
 * The cloud is decoration and must never cover content on any page.
 */
.s2d26-cs-main {
  position: relative !important;
  z-index: 2 !important;
}
.s2d26-cs-item,
.s2d26-cs-agenda-month,
.s2d26-cs-head {
  position: relative !important;
  z-index: 1 !important;
}
.s2d26-cs-item {
  isolation: isolate !important;
}

/* S2D26_CS_CARD_SURFACE_LATE_20260918
 *
 * S2D26_CS_CARD_SURFACE_20260918 - an opaque surface under the artwork, so the
 * site's decorative pattern can never read through a poster's transparent
 * pixel, its rounded corner, or the moment before the image paints.
 *
 * It lives HERE, at the end of the stylesheet, for one reason: the r39 block
 * above says the artwork owns every pixel of the card and sets
 * `background: transparent !important` on the doubled-class selector
 * `html body.s2d26-coming-soon-page.s2d26-coming-soon-page .ml-item` (0,5,2).
 * A single-class rule loses to it whatever the order, so this one repeats the
 * class and is read last: equal specificity, later wins.
 */
html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-item,
html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-grid > .ml-item {
  background: var(--s2d26-cs-card-solid) !important;
}


/* ==========================================================================
   S2D26_CS_UPVOTE_FLOAT_20260918 — the upvote arrow drifts while the pointer is
   on the control, the way the owner asked ("стрелочка вверх-вниз плавно плавает").

   It animates the individual `translate` property, NOT `transform`: the control
   block above pins `transform: none !important` on the icon and its svg, and a
   keyframe transform loses to that. Nothing else on the page touches `translate`.

   Pointer devices only, and never against the visitor's own motion preference.
   ========================================================================== */
@keyframes s2d26-cs-upvote-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -3px; }
}

@media (hover: hover) and (pointer: fine) {
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .s2d26-cs-vote:hover .ofa-title-action__icon,
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .s2d26-cs-vote:hover .ofa-title-action__icon svg,
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .s2d26-cs-vote:focus-visible .ofa-title-action__icon,
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .s2d26-cs-vote:focus-visible .ofa-title-action__icon svg {
    animation: s2d26-cs-upvote-float 1.15s ease-in-out infinite !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .s2d26-cs-vote:hover .ofa-title-action__icon,
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .s2d26-cs-vote:hover .ofa-title-action__icon svg,
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .s2d26-cs-vote:focus-visible .ofa-title-action__icon,
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > .s2d26-cs-vote:focus-visible .ofa-title-action__icon svg {
    animation: none !important;
  }
}

/* S2D26_CS_SORT_FLIP_20260918 — the card being re-sorted is animated by the
   inline script (it has to measure before and after), so all this does is let
   the movement run on the compositor and keep the moving card above its
   neighbours while it travels. No transform rule exists on the card anywhere in
   this file, which is what makes an inline transform usable here. */
html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-day-grid > .ml-item {
  will-change: transform;
}


/* ==========================================================================
   S2D26_CS_GUEST_CONTROLS_20260918 — one click, one request, and a sensible one.

   A visitor with no account sees the same two controls, but as links: the markup
   is an <a class="ofa-title-action …"> so the plugin's own control styling applies
   unchanged, and all this adds is what a button had and an anchor does not —
   no underline, a pointer cursor, and the site's accent on hover in the pointer
   branch only.
   ========================================================================== */
html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > a.ofa-title-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

@media (hover: hover) and (pointer: fine) {
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > a.s2d26-cs-vote:hover,
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > a.s2d26-cs-vote:focus-visible {
    color: #ff526b !important;
  }

  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > a.ofa-title-action--notification:hover,
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > a.ofa-title-action--notification:focus-visible {
    color: #53e4de !important;
  }
}

@media (hover: none) {
  html body.s2d26-coming-soon-page.s2d26-coming-soon-page .s2d26-cs-actions > a.ofa-title-action:active {
    opacity: .72 !important;
  }
}