/* ---------- Pluto TV on the cable receiver: its picture on the tube, and its section of the
   TV listings (pluto.js). Desktop copy only. ---------- */
#pluto-tv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: cover; /* 16:9 cropped to 4:3, pan & scan like the YouTube channels; 4:3 shows lose their side bars */
  background: #000;
  pointer-events: none;
}
#crt[data-input="av3"] #pluto-tv.on { display: block; }
/* the receiver's title card stays up only until the picture comes in */
#crt[data-input="av3"] #rx-screen.show.picture { display: none; }

#rx-screen[data-svc="pluto"] {
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.75) 0 1px, transparent 1.6px) 0 0 / 97px 83px,
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.5) 0 1px, transparent 1.5px) 0 0 / 61px 57px,
    radial-gradient(circle at 45% 75%, rgba(255,235,170,.45) 0 .8px, transparent 1.3px) 0 0 / 43px 39px,
    radial-gradient(ellipse at 50% 34%, #2b2452, #0a0816 72%);
}
#rx-screen[data-svc="pluto"] .rx-net { letter-spacing: 8px; text-shadow: 0 0 16px rgba(255,255,255,.25), 4px 4px 0 #000; }
#rx-screen[data-svc="pluto"] .rx-net span { margin-left: 16px; color: #ffe11a; text-shadow: 0 0 16px rgba(255,225,26,.4), 4px 4px 0 #000; }
#rx-screen[data-svc="pluto"] .rx-ticker { background: #ffe11a; color: #15121f; }

/* ---------- the magazine's PLUTO TV section ---------- */
.g-tabs .g-pluto-tab { margin-left: auto; }
.g-tabs .g-pluto-tab.on { color: #ffe11a; }

#gp-form { display: flex; align-items: center; gap: 8px; }
#gp-form label { font-weight: 700; font-size: 14px; letter-spacing: .5px; }
#gp-q {
  flex: 1;
  min-width: 0;
  font: 18px 'Archivo Narrow', sans-serif;
  padding: 5px 8px;
  border: 0;
  border-bottom: 2px solid #1b1b1b;
  background: rgba(255, 255, 255, .45);
  outline: none;
}
#gp-sec {
  max-width: 200px;
  font: 700 13px 'Archivo Narrow', sans-serif;
  letter-spacing: .5px;
  padding: 4px 4px;
  border: 2px solid #1b1b1b;
  background: transparent;
  cursor: pointer;
}

#gp-list { position: relative; flex: 1; overflow-y: auto; margin-top: 6px; padding-right: 6px; }
#gp-list::-webkit-scrollbar { width: 6px; }
#gp-list::-webkit-scrollbar-thumb { background: #8a7a58; }

.gp-item.on { background: rgba(212, 32, 42, .08); }
.gp-side { width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 1px; }
.gp-num {
  min-width: 40px;
  padding: 1px 6px;
  border: 2px solid #1b1b1b;
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
}
.gp-item.on .gp-num { background: #1b1b1b; color: #efe6cf; }
/* the channel's logo, printed in black ink */
.gp-logo { width: 64px; height: 32px; object-fit: contain; filter: brightness(0); opacity: .9; }
.gp-rating {
  margin-left: 7px;
  padding: 0 3px;
  border: 1px solid #1b1b1b;
  font-size: 10px;
  letter-spacing: .5px;
  vertical-align: 2px;
}
.gp-bar { display: flex; align-items: center; gap: 6px; margin: 5px 0 2px; font-size: 11.5px; font-weight: 700; color: #2a2620; }
.gp-track { flex: 1; max-width: 220px; height: 3px; background: rgba(27, 27, 27, .18); }
.gp-track i { display: block; height: 100%; background: #d4202a; }
.gp-left { font-weight: 400; font-style: italic; color: #5b5040; }
.g-body p.gp-next { margin-top: 1px; font-size: 12.5px; color: #3a3226; }
.g-body p.gp-next b { color: #1b1b1b; letter-spacing: .5px; }