/* Shared surfaces, actions and media frames for Scena Studio. */
:root {
  --night: #0B0D11;
  --obsidian: #111318;
  --ember: #D8411C;
  --tungsten: #E85A34;
  --paper: #F5F4F0;
  --hairline-light: #DFDDD6;
  --hairline-dark: rgba(255, 255, 255, 0.09);
}
::selection { background: rgba(216, 65, 28, 0.22); color: #111318; }

/* Use a solid dark surface behind media and technical examples. */
div[style*="position: relative; background: #17181C"],
div[style*="position: relative; background: rgb(23, 24, 28)"] {
  background: #111318 !important;
  border-bottom: 1px solid var(--hairline-dark);
}

.sec[style*="background: #17181C"]:not([style*="padding-top: 34px"]),
.sec[style*="background: rgb(23, 24, 28)"]:not([style*="padding-top: 34px"]),
div[style*="background: #17181C"][style*="border-radius"],
div[style*="background: rgb(23, 24, 28)"][style*="border-radius"] {
  background: #171a20 !important;
}

.sec[style*="background: #17181C; padding-top: 34px"],
.sec[style*="background: rgb(23, 24, 28); padding-top: 34px"] {
  background: #090B0E !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Hide decorative background spans exported by the page generator. */
span[aria-hidden="true"][style*="radial-gradient(circle"],
span[aria-hidden="true"][style*="radial-gradient(closest-side"] {
  display: none !important;
}
div[style*="position: relative; background: #17181C"]::before,
div[style*="position: relative; background: rgb(23, 24, 28)"]::before {
  display: none !important;
  content: none !important;
}

.reel {
  border-radius: 6px !important;
  box-shadow: 0 0 0 1px var(--hairline-dark) !important;
}

div[style*="border-bottom: 1px solid #E3E4E6; background: #FFFFFF"],
div[style*="border-bottom: 1px solid rgb(227, 228, 230); background: rgb(255, 255, 255)"] {
  background: #fff !important;
  border-bottom-color: #e2e0d8 !important;
}

.sec[style*="background: #F4F5F6"],
.sec[style*="background: #F7F8F9"],
.sec[style*="background: rgb(244, 245, 246)"],
.sec[style*="background: rgb(247, 248, 249)"] {
  background: #F5F4F0 !important;
  border-top: 1px solid #E2E0D8 !important;
  border-bottom: 1px solid #E2E0D8 !important;
}

.card, .cap, .plan {
  border-radius: 8px !important;
  border-color: var(--hairline-light);
}

select, input, textarea { border-radius: 6px !important; }

/* Use a consistent radius for full-size buttons and filters. */
a[style*="min-height: 48px"], a[style*="min-height: 46px"], a[style*="min-height: 44px"], a[style*="min-height: 42px"],
button[style*="min-height: 48px"], button[style*="min-height: 46px"], button[style*="min-height: 44px"], button[style*="min-height: 42px"],
.fchip {
  border-radius: 6px !important;
}
a[style*="min-height: 48px"], a[style*="min-height: 46px"], a[style*="min-height: 44px"], a[style*="min-height: 42px"] {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* Make button priority visible through solid fills and direct feedback. */
a[style*="background: #D8411C"], a[style*="background: rgb(216, 65, 28)"],
button[style*="background: #D8411C"], button[style*="background: rgb(216, 65, 28)"] {
  background: #b5331b !important;
  border: 1px solid rgba(255, 255, 255, .16);
}

a[style*="background: #D8411C"]:hover, a[style*="background: rgb(216, 65, 28)"]:hover,
button[style*="background: #D8411C"]:hover, button[style*="background: rgb(216, 65, 28)"]:hover {
  background: #912713 !important;
}

a[style*="background: #17181C"], a[style*="background: rgb(23, 24, 28)"],
button[style*="background: #17181C"], button[style*="background: rgb(23, 24, 28)"] {
  background: #1b1d22 !important;
}

a[style*="background: #17181C"]:hover, a[style*="background: rgb(23, 24, 28)"]:hover {
  background: #30343b !important;
}

a.card:hover, .card.lift:hover { border-color: #969289 !important; }

/* Cinema Production Slate Eyebrow — monospace tally tag */
.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  background: rgba(216, 65, 28, 0.08) !important;
  border: 1px solid rgba(216, 65, 28, 0.24) !important;
  font-family: 'JetBrains Mono', Consolas, 'SF Mono', ui-monospace, monospace !important;
  color: #C23614 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.eyebrow::before {
  display: inline-block !important;
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 1px !important;
  background: #D8411C !important;
  box-shadow: none !important;
}
/* Media frames on the feature, guide, showcase and editorial pages. */
body > .page main :is(
  figure[data-block="capture"],
  figure[style*="border-radius"]:has(> img, > div img),
  figure > div[style*="overflow: hidden"]:has(> img),
  .post > span[style*="overflow: hidden"]:has(> img)
) {
  border-radius: 6px !important;
  box-shadow: none !important;
}

body > .page main figure[data-block="capture"] > div:first-child {
  background: #212329 !important;
}

body > .page main figure[data-block="capture"] > div:nth-child(2) {
  background: #f0efeb !important;
}

body > .page main :is([data-insight-upgrade], figure[data-topic-visual]) img[style*="border-radius"] {
  border-radius: 8px !important;
}

body > .page main .cap-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(23, 24, 28, 0.12);
}

/* Keep the poster's existing gradient and labels above the video preview. */
body > .page main section ol > li > div:first-child:has(> img[src*="/shots/"]) {
  isolation: isolate;
}

body > .page main section ol > li > div:first-child:has(> img[src*="/shots/"]) > div {
  z-index: 2;
}

body > .page main section ol > li > div:first-child:has(> img[src*="/shots/"]) > video + span {
  inset: 50% auto auto 50% !important;
  z-index: 3 !important;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  max-width: calc(100% - 24px);
  width: max-content;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: rgba(14, 16, 21, 0.86) !important;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  body > .page main :is(.cap, .card, .post):hover .cap-media::after,
  body > .page main .cap-media:hover::after {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(216, 65, 28, 0.55);
  }

  body > .page main section ol > li:is(:hover, :focus-within) > div:first-child:has(> img[src*="/shots/"]) > video + span {
    background: #B93616 !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
  }
}

body > .page main a.post:focus-visible .cap-media::after,
body > .page main a.cap-media:focus-visible::after {
  box-shadow: inset 0 0 0 2px #D8411C;
}

#scena-showcase-modal {
  background: rgb(10 11 14 / 92%) !important;
}

#scena-showcase-modal > div {
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 14%) !important;
}

#scena-showcase-modal > div > div:first-child {
  background: #1b1e25 !important;
}

#scena-showcase-modal video {
  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
  body > .page main .cap-media::after {
    transition: box-shadow .24s ease;
  }
}