/* One final media layout for previews, both inline player paths, and editors. */
.scv-immersive-toolbar, .scv-reveal-controls { display: none; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 {
  --scv-header-height: 52px;
  --scv-footer-height: 56px;
  --scv-strip-height: 64px;
  --scv-editor-width: 600px;
  position: fixed !important;
  padding: 16px !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 .media-viewer:has(.media-viewer-story-card) {
  width: min(1520px, calc(var(--scv-viewport-height, 100vh) * 1.6), calc(100% - 16px)) !important;
  max-width: 100% !important;
  height: var(--scv-media-frame-height) !important;
  max-height: 100% !important;
  padding: 0 !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage {
  position: relative !important;
  display: grid !important;
  grid-template-areas: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) var(--scv-strip-height) !important;
  gap: 0 !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage:not(:has(.media-viewer-photo-strip)),
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage:has(.is-editing) {
  grid-template-rows: minmax(0, 1fr) !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-story-card {
  position: relative !important;
  grid-area: 1 / 1 !important;
  grid-template-areas: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: var(--scv-header-height) minmax(0, 1fr) var(--scv-footer-height) !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-story-video-card {
  grid-template-columns: minmax(0, 1fr) 48px 48px 60px !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-story-title {
  display: block !important;
  padding: 0 64px 0 80px !important;
  font-size: 17px !important;
  line-height: var(--scv-header-height) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 .media-viewer .media-viewer-close {
  top: max(0px, calc((var(--scv-header-height) - 44px) / 2)) !important;
  right: 8px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage :is(.media-viewer-photo-counter, .media-viewer-story-counter) {
  top: calc((var(--scv-header-height) - 28px) / 2) !important;
  left: 10px !important;
  white-space: nowrap !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-story-card > img,
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-media-surface {
  grid-area: 2 / 1 / 3 / -1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-media-surface {
  display: grid !important;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
  place-items: center !important;
  overflow: hidden !important;
  container-type: normal !important;
  background: #000 !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-media-surface > :is(.media-viewer-video-thumb, iframe, video) {
  grid-area: 1 / 1 !important;
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: var(--scv-player-width, 100%) !important;
  height: var(--scv-player-height, 100%) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: hidden !important;
  object-fit: contain !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-media-surface :is(img, .media-viewer-youtube-inline-frame) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-story-gradient { display: none !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-media-footer:not(.is-editing) {
  padding: 4px 12px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-media-footer-main {
  margin-right: 0 !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-story-video-card:has(.media-viewer-photo-nav) .media-viewer-media-footer-main {
  margin-right: 104px !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-story-video-card:has(.media-viewer-photo-nav) .media-viewer-media-footer:not(:has(.media-viewer-media-edit-btn)) .media-viewer-media-footer-main {
  margin-right: 152px !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage :is(.media-viewer-media-date, .media-viewer-media-note) {
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-photo-nav {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-photo-strip {
  display: flex !important;
  grid-area: 2 / 1 !important;
  height: 100% !important;
  padding: 6px 8px !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-photo-strip::-webkit-scrollbar { display: none !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-photo-thumb {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  flex: 0 0 48px !important;
}
#mediaViewerBackdrop .media-viewer-photo-thumb.scv-thumbnail-unavailable {
  position: relative;
}
#mediaViewerBackdrop .media-viewer-photo-thumb.scv-thumbnail-unavailable img {
  visibility: hidden !important;
}
#mediaViewerBackdrop .media-viewer-photo-thumb.scv-thumbnail-unavailable::after {
  content: 'Photo';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c1ccda;
  font-size: 10px;
  pointer-events: none;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .scv-photo-strip-toggle {
  display: none !important;
  min-height: 36px !important;
  flex: 0 0 auto !important;
  padding: 6px 12px !important;
  border: 1px solid #53667c !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: white !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-tablet-media { padding: 8px !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-tablet-media .media-viewer:has(.media-viewer-story-card) {
  width: min(1440px, 100%) !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-phone-media {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-phone-media .media-viewer:has(.media-viewer-story-card) {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-phone-media #mediaViewerStage .media-viewer-story-title { font-size: 16px !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-short-landscape {
  --scv-header-height: 44px;
  --scv-footer-height: 48px;
  --scv-strip-height: 56px;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-short-landscape:not(.scv-thumbs-expanded) #mediaViewerStage {
  grid-template-rows: minmax(0, 1fr) !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-short-landscape:not(.scv-thumbs-expanded) #mediaViewerStage .media-viewer-photo-strip { display: none !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-short-landscape #mediaViewerStage .scv-photo-strip-toggle { display: inline-flex !important; align-items: center !important; }

/* Content-sized form; only the fields scroll when the keyboard reduces height. */
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage:has(.is-editing) .media-viewer-photo-strip { display: none !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-story-card:has(.is-editing) {
  grid-template-rows: var(--scv-header-height) minmax(0, 1fr) 0px !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .media-viewer-media-footer.is-editing {
  position: absolute !important;
  display: flex !important;
  flex-direction: column !important;
  inset: auto auto 8px 50% !important;
  width: min(var(--scv-editor-width), calc(100% - 20px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100% - var(--scv-header-height) - 16px) !important;
  padding: 14px !important;
  transform: translateX(-50%) !important;
  background: #0c213d !important;
  border: 1px solid #53667c !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .is-editing .media-viewer-note-edit-shell {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  grid-template: none !important;
  overflow: hidden !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .scv-media-edit-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 2px !important;
  overscroll-behavior: contain;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .is-editing .media-viewer-edit-field {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  grid-area: auto !important;
  width: 100% !important;
  gap: 6px !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .is-editing .media-viewer-edit-label {
  display: block !important;
  flex: 0 0 auto !important;
  grid-area: auto !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  color: #c6d2e1 !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .is-editing :is(input, textarea) {
  flex: 0 0 auto !important;
  grid-area: auto !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: none !important;
  padding: 9px 12px !important;
  color: #fff !important;
  background: #243954 !important;
  border: 1px solid #607188 !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  box-shadow: none !important;
  outline-offset: 1px !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .is-editing textarea { height: 70px !important; min-height: 70px !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .is-editing :is(input, textarea)::placeholder { color: #c1ccda !important; opacity: 1 !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .is-editing :is(input, textarea):focus { outline: 2px solid #438df1 !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .is-editing .media-viewer-edit-error {
  flex: 0 0 auto !important;
  grid-area: auto !important;
  margin: 0 !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .is-editing .media-viewer-note-edit-actions {
  display: grid !important;
  grid-template: 44px / minmax(0, 1fr) minmax(0, 1fr) !important;
  flex: 0 0 44px !important;
  grid-area: auto !important;
  align-self: stretch !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2 #mediaViewerStage .is-editing .media-viewer-note-edit-actions button {
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-side-editor {
  --scv-editor-width: min(360px, 40%);
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-side-editor #mediaViewerStage .media-viewer-media-footer.is-editing {
  inset: calc(var(--scv-header-height) + (100% - var(--scv-header-height)) / 2) 8px auto auto !important;
  transform: translateY(-50%) !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-side-editor #mediaViewerStage .media-viewer-story-card:has(.is-editing) > :is(img, .media-viewer-media-surface) {
  width: calc(100% - var(--scv-editor-width) - 24px) !important;
  justify-self: start !important;
}

/* Landscape viewing reserves no rows for chrome. Editors retain their layout. */
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media .media-viewer:has(.media-viewer-story-card) {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage,
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage .media-viewer-story-card {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
  background: #07101d !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage .media-viewer-story-card > :is(img, .media-viewer-media-surface) {
  grid-area: 1 / 1 !important;
  z-index: 0 !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage .media-viewer-story-title {
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 68px !important;
  line-height: 48px !important;
  padding: 0 76px !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .76), transparent) !important;
  color: #fff !important;
  text-shadow: 0 1px 4px #000 !important;
  z-index: 25 !important;
  pointer-events: none !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage :is(.media-viewer-photo-counter, .media-viewer-story-counter) {
  top: 10px !important;
  z-index: 26 !important;
  pointer-events: none !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media .media-viewer .media-viewer-close {
  top: 4px !important;
  z-index: 60 !important;
  background: rgba(8, 18, 32, .68) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage .media-viewer-photo-nav {
  position: absolute !important;
  grid-area: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  background: rgba(8, 18, 32, .6) !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 50% !important;
  color: #fff !important;
  z-index: 30 !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage .media-viewer-photo-nav.prev { left: 8px !important; right: auto !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage .media-viewer-photo-nav.next { right: 8px !important; left: auto !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage .media-viewer-media-footer:not(.is-editing) {
  position: absolute !important;
  grid-area: auto !important;
  inset: auto 0 0 !important;
  height: 56px !important;
  justify-content: flex-end !important;
  overflow: visible !important;
  background: transparent !important;
  z-index: 35 !important;
  pointer-events: none !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage .media-viewer-media-footer > button {
  pointer-events: auto !important;
  margin: 0 !important;
  background: rgba(8, 18, 32, .78) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage .media-viewer-media-footer-main {
  display: none !important;
  position: absolute !important;
  inset: auto 12px 56px !important;
  margin: 0 !important;
  max-height: min(120px, 35vh) !important;
  padding: 10px 14px !important;
  background: rgba(8, 18, 32, .9) !important;
  border-radius: 10px !important;
  pointer-events: auto !important;
  overflow-y: auto !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media.scv-details-expanded #mediaViewerStage .media-viewer-media-footer-main { display: block !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media.scv-thumbs-expanded #mediaViewerStage .media-viewer-media-footer-main { bottom: 124px !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage .media-viewer-photo-strip {
  position: absolute !important;
  grid-area: auto !important;
  inset: auto 0 56px !important;
  height: 64px !important;
  width: 100% !important;
  background: rgba(8, 18, 32, .88) !important;
  z-index: 35 !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media:not(.scv-thumbs-expanded) #mediaViewerStage .media-viewer-photo-strip { display: none !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media #mediaViewerStage .scv-photo-strip-toggle { display: inline-flex !important; align-items: center !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media :is(.scv-immersive-toolbar, .scv-reveal-controls) {
  position: absolute;
  bottom: 6px;
  left: 10px;
  z-index: 60;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media .scv-immersive-toolbar {
  display: flex;
  gap: 6px;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media :is(.scv-immersive-toolbar button, .scv-reveal-controls) {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 12px;
  background: rgba(8, 18, 32, .78);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
#mediaViewerBackdrop .scv-immersive-toolbar button[hidden] { display: none !important; }
#mediaViewerBackdrop.scv-immersive-media :is(button, a):focus-visible { outline: 3px solid #71baff !important; outline-offset: 2px !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media.scv-media-fill #mediaViewerStage .media-viewer-story-card > img,
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media.scv-media-fill #mediaViewerStage .media-viewer-media-surface > video { object-fit: cover !important; }
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media.scv-controls-hidden :is(.media-viewer-story-title, .media-viewer-photo-counter, .media-viewer-story-counter, .media-viewer-photo-nav, .media-viewer-media-footer, .media-viewer-photo-strip, .media-viewer-close, .scv-immersive-toolbar) {
  visibility: hidden !important;
  pointer-events: none !important;
}
#mediaViewerBackdrop.scv-stable-media.scv-media-v2.scv-immersive-media.scv-controls-hidden .scv-reveal-controls { display: block; }
