/* Review Scout landing demo & workspace viewport foundation */
html {
  max-width: 100%;
  overflow-x: clip;
}
body {
  max-width: 100%;
  overflow-x: visible;
  margin: 0;
  min-width: 0;
}

/* Banner actions: open/reset never touch each other; long text wraps first. */
.rs-demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rs-demo-banner .rs-demo-actions a,
.rs-demo-banner .rs-demo-actions button {
  white-space: nowrap;
}
.rs-demo-reset-error {
  flex: 1 1 100%;
  font-weight: 700;
}

/* Desktop sticky sidebar guarantee: sticky top 0, independent scrolling without breaking ancestors */
@media (min-width: 651px) {
  body > aside {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Mobile sidebar fallback: static position with compact nav */
@media (max-width: 650px) {
  body > aside {
    position: static;
    height: auto;
    overflow-y: visible;
  }
}

.rs-demo-banner{position:static!important}

/* The banner is a small demo toolbar, never a sticky page header. Keep the
   copy and controls in separate, shrinkable columns so long translations do
   not push a select or reset action off a 320px viewport. */
.rs-demo-banner-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 240px;
}
.rs-demo-banner-title,
.rs-demo-session-note {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.rs-demo-session-note {
  color: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 500;
}
.rs-demo-actions {
  flex: 0 1 auto;
  min-width: 0;
}
.rs-demo-scenario-label {
  color: rgba(255,255,255,.82);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.rs-demo-scenario {
  min-width: 132px;
  min-height: 34px;
  max-width: 100%;
  padding: 5px 28px 5px 9px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 7px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font: inherit;
  line-height: 1.35;
}
.rs-demo-scenario option {
  color: #293747;
  background: #fff;
}
.rs-demo-reset {
  min-width: 0;
}
@media (max-width: 650px) {
  .rs-demo-banner {
    align-items: stretch!important;
    gap: 9px!important;
  }
  .rs-demo-banner-copy,
  .rs-demo-actions {
    flex-basis: 100%;
  }
  .rs-demo-actions {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 7px;
  }
  .rs-demo-scenario { width: 100%; min-width: 0; }
  .rs-demo-reset { justify-self: end; }
}
@media (max-width: 360px) {
  .rs-demo-actions { grid-template-columns: 1fr 1fr; }
  .rs-demo-scenario-label { grid-column: 1; }
  .rs-demo-scenario { grid-column: 2; }
  .rs-demo-reset { grid-column: 1 / -1; justify-self: start; }
}

/* Comparison warnings are content panels, not the workspace sidebar.  Keep
   them in normal flow so the landing demo never stretches them to viewport
   height or pins them while the matrix scrolls. */
.comparison-warning-panel {
  position: static;
  align-self: auto;
  height: auto;
  min-height: 0;
  overflow: visible;
}