/* Channel 3 closed-caption proof. Only the moving picture viewport is altered.
   Existing television shell, dials, readout and player chrome are untouched. */
.tv-viewport .tv-cc-toggle {
  position:absolute;
  left:4.5%;
  bottom:5.2%;
  width:36px;
  height:27px;
  border:0;
  background:transparent;
  padding:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:16;
  cursor:pointer;
  color:#fff;
  opacity:.38;
  transition:opacity .15s ease, background-color .15s ease;
  border-radius:4px;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}
.tv-viewport .tv-cc-toggle svg { width:100%;height:100%;display:block; }
.tv-viewport .tv-cc-toggle:hover,
.tv-viewport .tv-cc-toggle:focus-visible { opacity:.96; background:rgba(0,0,0,.35); }
.tv-viewport .tv-cc-toggle[aria-pressed="true"] { opacity:.85; }
.tv-viewport .tv-cc-toggle:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.tv-viewport .tv-cc-toggle[hidden] {display:none!important;}
.tv-viewport .tv-cc-caption {
  position:absolute;
  left:53%;
  transform:translateX(-50%);
  bottom:9.8%;
  z-index:15;
  display:block;
  width:max-content;
  max-width:72%;
  padding: .16em .48em .22em;
  border-radius:3px;
  background:rgba(0,0,0,.76);
  color:#fff;
  text-shadow:0 1px 2px #000,0 0 2px #000;
  font:600 clamp(12px,1.5vw,23px)/1.28 Arial,Helvetica,sans-serif;
  text-align:center;
  white-space:normal;
  overflow-wrap:normal;
  pointer-events:none;
}
.tv-viewport .tv-cc-caption[hidden] {display:none!important;}
.tv-viewport:fullscreen .tv-cc-toggle,
.tv-viewport.tv-expanded-fallback .tv-cc-toggle {
  width:56px;height:42px;left:3%;bottom:4.5%;
}
.tv-viewport:fullscreen .tv-cc-caption,
.tv-viewport.tv-expanded-fallback .tv-cc-caption {
  font-size:clamp(22px,2.8vw,46px);
  max-width:72%;
  bottom:9.2%;
  padding:.2em .6em;
}
@media (max-width:720px) {
  .tv-viewport .tv-cc-toggle {width:31px;height:26px;left:4%;bottom:3.8%;}
  .tv-viewport .tv-cc-caption {font-size:clamp(12px,2.7vw,18px);left:54%;bottom:11.5%;max-width:70%;line-height:1.18;}
  /* In compact fullscreen, leave a clear corridor beside the approved CC button. */
  .tv-viewport:fullscreen .tv-cc-caption,
  .tv-viewport.tv-expanded-fallback .tv-cc-caption {left:55%;max-width:64%;}
}
@media (prefers-reduced-motion:reduce) {
  .tv-viewport .tv-cc-toggle {transition:none;}
}