/* RTNTS Connect — playback styles (shared by the Windows app, the portal preview and the demo) */
.sgp-stage { position: absolute; inset: 0; overflow: hidden; background: #000; cursor: none; }
.sgp-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms ease; }
.sgp-layer.on { opacity: 1; }
.sgp-layer { will-change: opacity, transform; backface-visibility: hidden; }
.sgp-guest { z-index: 4; }
.sgp-media { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sgp-media.cover { object-fit: cover; }
.sgp-media.contain { object-fit: contain; }
.sgp-idle, .sgp-off { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0;
  transition: opacity 600ms ease; pointer-events: none; text-align: center; }
.sgp-idle.on, .sgp-off.on { opacity: 1; }
.sgp-idle { background: radial-gradient(120% 100% at 50% 0%, #2b4f99 0%, #1B3A7B 55%, #10244f 100%); color: #ffffff; }
.sgp-off { background: #111; color: #888; font: 500 2.4vmin/1.4 Poppins, system-ui, sans-serif; }
.sgp-idle-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sgp-idle-shade { position: absolute; inset: 0; background: #0b1020; }
.sgp-idle.pic .sgp-idle-box { position: relative; text-shadow: 0 .3vmin 2vmin rgba(0, 0, 0, .45); }
.sgp-idle-box { display: flex; flex-direction: column; align-items: center; gap: 1.6vmin; padding: 4vmin; }
.sgp-logo { max-width: 46vmin; max-height: 30vmin; object-fit: contain; }
.sgp-title { font: 600 10vmin/1.05 Poppins, system-ui, sans-serif; letter-spacing: .01em; color: #ffffff; max-width: 90vw; }
.sgp-sub { font: 400 3.4vmin/1.3 Poppins, system-ui, sans-serif; color: rgba(255, 255, 255, .82); }
.sgp-time { margin-top: 3vmin; font: 300 12vmin/1 Poppins, system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #ffffff; }
.sgp-date { font: 400 3.6vmin/1.2 Poppins, system-ui, sans-serif; color: rgba(255, 255, 255, .78); letter-spacing: .04em; }
.sgp-msg { margin-top: 3vmin; font: 400 2.4vmin/1.4 Poppins, system-ui, sans-serif; color: rgba(255, 255, 255, .82); opacity: .9; }
.sgp-ident { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); opacity: 0;
  background: rgba(27, 58, 123, .94); color: #ffffff; padding: 3vmin 6vmin; border-radius: 2vmin; border: .5vmin solid #C8CDD5;
  font: 600 7vmin/1.15 Poppins, system-ui, sans-serif; transition: opacity .3s, transform .3s; pointer-events: none; text-align: center; width: max-content; max-width: 80%; z-index: 5; }
.sgp-ident.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Sizes follow the screen itself (the stage), so small previews in the portal look like the TV. */
@supports (width: 1cqmin) {
  .sgp-stage { container-type: size; }
  .sgp-off { font: 500 2.4cqmin/1.4 Poppins, system-ui, sans-serif; }
  .sgp-idle.pic .sgp-idle-box { text-shadow: 0 .3cqmin 2cqmin rgba(0, 0, 0, .45); }
  .sgp-idle-box { gap: 1.6cqmin; padding: 4cqmin; }
  .sgp-logo { max-width: 46cqmin; max-height: 30cqmin; }
  .sgp-title { font: 600 10cqmin/1.05 Poppins, system-ui, sans-serif; max-width: 90cqw; }
  .sgp-sub { font: 400 3.4cqmin/1.3 Poppins, system-ui, sans-serif; }
  .sgp-time { margin-top: 3cqmin; font: 300 12cqmin/1 Poppins, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
  .sgp-date { font: 400 3.6cqmin/1.2 Poppins, system-ui, sans-serif; }
  .sgp-msg { margin-top: 3cqmin; font: 400 2.4cqmin/1.4 Poppins, system-ui, sans-serif; }
  .sgp-ident { padding: 3cqmin 6cqmin; border-radius: 2cqmin; border: .5cqmin solid #C8CDD5; font: 600 7cqmin/1.15 Poppins, system-ui, sans-serif; }
}