/* Scena Studio — home: synchronized "Your week in a browser tab" vs "In Scena Studio" live comparison */
[data-vs-section] {
  --vs-ease: cubic-bezier(.2, .75, .25, 1);
  --vs-edge: #dce0e8;
  --vs-radius: 14px;
  background: linear-gradient(180deg, #fff 32%, #f7f8fb);
  scroll-margin-block-start: 70px;
}

.vs-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-block: 15px 9px;
  color: #555762;
  font-size: 11px;
}

.vs-playback {
  min-height: 36px;
  padding: 5px 11px;
  border: 1px solid var(--vs-edge);
  border-radius: 8px;
  background: #fff;
  color: #303743;
  font-size: 12px;
  font-weight: 660;
}

.vs-playback:hover { background: #eef0f5; }
[data-vs-enhanced] > .vs-compare-panels { margin-top: 0 !important; }

.vs-type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Equal-height columns for Left & Right panels */
.vs-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Left Panel: Browser Tabs Chaos */
.vs-tabs {
  position: relative;
  flex: 1 1 auto;
  min-height: 266px !important;
  height: auto !important;
  overflow: hidden;
  border-radius: var(--vs-radius) !important;
  background: linear-gradient(156deg, #e9edf3 0%, #f5f6f9 80%) !important;
  border: 1px solid var(--vs-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 18px rgba(23, 24, 28, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.vs-bstrip {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 8px;
  background: #e7eaf0;
  border-bottom: 1px solid var(--vs-edge);
  font-size: 10.5px;
  color: #55595F;
  overflow: hidden;
  flex: 0 0 auto;
  z-index: 6;
}
.vs-bdots {
  display: inline-flex;
  gap: 4px;
  margin-right: 4px;
  flex: 0 0 auto;
}
.vs-bdots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.vs-btab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 23px;
  padding: 2px 7px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  font-size: 10.5px;
  font-weight: 600;
  color: #55595F;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.vs-btab:hover { background: #f6f7fa; }
.vs-btab:focus-visible { outline-offset: 0 !important; }
.vs-btab.is-active {
  background: #FFFFFF;
  color: #17181C;
  border-color: #c9d0dd;
}
.vs-bcount {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(198, 40, 40, 0.12);
  color: #B4341A;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.vs-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 204px;
}

.vs-tab {
  position: absolute;
  width: min(226px, 48%) !important;
  border: 1px solid #C8CBD0;
  border-radius: 5px;
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(23, 24, 28, 0.11);
  transition: transform 280ms var(--vs-ease), box-shadow 220ms ease, border-color 220ms ease;
  cursor: pointer;
  z-index: 2;
}
.vs-tab.is-active {
  z-index: 8 !important;
  border-color: #D8411C !important;
  box-shadow: 0 10px 25px rgba(133, 61, 42, .16) !important;
  transform: translateY(-2px) rotate(0deg) !important;
}
.vs-tab.is-active .vs-type {
  color: #17181C;
}
.vs-tab.is-active .vs-cr {
  background: #F8D2C6 !important;
  color: #9E2A12 !important;
}

.vs-tfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 5px 11px;
  background: #FFF5F2;
  border-top: 1px solid #F1D3C9;
  font-size: 10.5px;
  line-height: 1.35;
  color: #9E2A12;
  font-weight: 600;
  flex: 0 0 auto;
  z-index: 6;
  box-sizing: border-box;
}
.vs-tfoot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D8411C;
  flex: 0 0 auto;
}

/* Middle Arrow Connector */
.vs-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  align-self: center;
  padding-top: 24px;
}
.vs-mid-badge {
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(216, 65, 28, 0.1);
  border: 1px solid rgba(216, 65, 28, 0.26);
  color: #C0391A;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.vs-arrow-svg {
  overflow: visible;
}
/* Right Panel: Scena Studio Unified Queue */
.vs-studio {
  flex: 1 1 auto;
  min-height: 266px !important;
  height: auto !important;
  border-radius: var(--vs-radius) !important;
  border: 1px solid var(--vs-edge) !important;
  background: #FFFFFF !important;
  overflow: hidden;
  box-shadow: 0 12px 28px -14px rgba(33, 42, 62, .28) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.vs-qhead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 11px;
  background: #17181C;
  color: #FFFFFF;
  font-size: 11px;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.vs-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1.5px 6px;
  border-radius: 3px;
  background: rgba(12, 133, 119, 0.22);
  border: 1px solid rgba(127, 208, 140, 0.35);
  color: #7FD08C;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.vs-live-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7FD08C;
}

.vs-qlist {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: space-between;
  background: #FFFFFF;
}
.vs-qrow {
  display: grid;
  grid-template-columns: 58px minmax(0, 1.25fr) minmax(54px, 0.85fr) 58px 68px;
  gap: 8px;
  align-items: center;
  min-height: 39px;
  padding: 6px 11px;
  border-top: 1px solid #F1F2F4;
  font-size: 11px;
  line-height: 1.25;
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
  box-sizing: border-box;
}
.vs-qrow:first-child {
  border-top: 0;
}
.vs-qrow.is-active {
  background: #fff4ed !important;
  box-shadow: inset 2px 0 #d36343;
}
.vs-qbar-wrap {
  height: 5px;
  border-radius: 3px;
  background: #ECEEF1;
  overflow: hidden;
  position: relative;
}
.vs-qbar {
  display: block;
  height: 100%;
  border-radius: 3px;
}
[data-vs-enhanced] .vs-qbar {
  width: 100% !important;
  transform: scaleX(var(--vs-progress, 0));
  transform-origin: left center;
  transition: transform 520ms var(--vs-ease), background-color 220ms ease;
}
.vs-qscore {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.vs-qfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 5px 11px;
  background: #F6F7F9;
  border-top: 1px solid #E5E7EB;
  font-size: 10.5px;
  line-height: 1.35;
  color: #44484E;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.vs-col > div:first-child {
  flex-wrap: wrap;
  gap: 4px 10px;
}

[data-vs-section] .vs-tfoot > span:first-child {
  overflow: visible !important;
  white-space: normal !important;
}

[data-vs-section] .vs-tfoot,
[data-vs-section] .vs-qfoot {
  min-height: 44px;
}

[data-vs-section] [data-vs-qcount],
[data-vs-section] [data-vs-crsum] {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.vs-compare-notes > span:not(:empty) {
  padding-block: 3px 7px;
  border-bottom: 1px solid #e7e9ef;
}

[data-block="vspic"] > a {
  min-height: 44px !important;
  border-radius: 9px !important;
  background: #fff;
}

@media (max-width: 1023px) {
  .vs-qrow {
    grid-template-columns: 56px minmax(0, 1fr) 50px 62px;
  }
  .vs-qrow .vs-qscore {
    display: none;
  }
}

@media (max-width: 849px) {
  .vs-compare-panels {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px !important;
  }
  .vs-compare-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .vs-compare-notes > span:empty { display: none; }
  .vs-mid {
    flex-direction: row;
    padding-top: 0;
  }
  .vs-arrow-svg {
    width: 34px;
    height: 20px;
    transform: rotate(90deg);
  }
  .vs-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    min-height: 0;
  }
  .vs-tab {
    position: relative;
    inset: auto !important;
    width: auto !important;
    min-width: 0;
    transform: none !important;
  }
  .vs-tab.is-active { transform: none !important; }
  .vs-type { max-width: none !important; }
  .vs-bstrip { flex-wrap: wrap; padding-block: 6px; }
}

@media (max-width: 599px) {
  .vs-stage { grid-template-columns: minmax(0, 1fr); padding: 9px; }
  .vs-btab { min-height: 32px; }
  .vs-playback { min-height: 40px; }
  .vs-controls { justify-content: space-between; }
  .vs-qhead { flex-wrap: wrap; gap: 5px 8px; padding-block: 7px; }
  .vs-qrow {
    grid-template-columns: 50px minmax(0, 1fr) 40px minmax(60px, auto);
    gap: 5px;
    padding-inline: 8px;
  }
  .vs-qrow [data-vs-status] { white-space: normal !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-vs-section] *,
  [data-vs-section] *::before,
  [data-vs-section] *::after {
    transition-duration: 0s !important;
    animation: none !important;
  }
}