/* Line 16286 (netshow-com-theater-episode-player-r1): Tonight's show, the Theater's free episode player. Reads the Theater's
   own sheet (netshow-theater.css) and the dark --ns-* tokens; 375 px first: the stage (argument map as scenery behind the
   drawn speakers, the caption under them) on top, the episode's words under it; from 900 px side by side. The only control
   near the speakers is the small menu at the stage's corner, shown on hover or tap. */

.nstt-home { display: inline-block; padding: 12px 0; line-height: 20px; color: inherit; text-decoration: none; }
.nstt-stage { gap: 10px; padding-top: 28px; cursor: pointer; }
.nstt-stage--dark { cursor: default; }

.nstt-menu { position: absolute; top: 24px; right: 10px; z-index: 2; opacity: .35; transition: opacity .2s; }
.nstt-stage:hover .nstt-menu, .nstt-menu[open], .nstt-menu:focus-within { opacity: 1; }
.nstt-menu summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; list-style: none; cursor: pointer; font-size: 20px;
    background: rgba(0, 0, 0, .45); color: var(--ns-text, #e8eaed); }
.nstt-menu summary::-webkit-details-marker { display: none; }
.nstt-menu__list { position: absolute; right: 0; top: 50px; display: grid; min-width: 190px; padding: 6px; border-radius: 12px;
    background: var(--ns-chrome, rgba(32, 33, 36, .96)); border: 1px solid var(--ns-border-strong, rgba(232, 234, 237, .2)); }
.nstt-menu__list button, .nstt-menu__list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none;
    color: var(--ns-text, #e8eaed); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.nstt-menu__list button:hover, .nstt-menu__list a:hover, .nstt-menu__list button:focus-visible { background: var(--ns-elevated, #35363a); }

.nstt-map { width: 100%; max-width: 640px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--ns-gold-border, rgba(245, 166, 35, .32));
    background: rgba(0, 0, 0, .25); color: var(--ns-text-2, #9aa0a6); font-size: 14px; }
.nstt-map__title { margin: 0 0 6px; text-align: center; font-weight: 600; color: var(--ns-gold, #f5a623); }
.nstt-map__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.nstt-map__cols[hidden], .nstt-map__items[hidden], .nstt-map__floor[hidden] { display: none; }
.nstt-map__col { padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.nstt-map__side { margin: 0; font-weight: 600; color: var(--ns-text, #e8eaed); }
.nstt-map__side span { display: block; font-weight: 400; font-size: 13px; color: var(--ns-text-2, #9aa0a6); }
.nstt-map__claim { margin: 4px 0 0; line-height: 1.35; }
.nstt-map__items { margin: 0; padding-left: 18px; }
.nstt-map__floor { margin: 6px 0 0; text-align: center; font-style: italic; }

.nstt-cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.nstt-seat { display: grid; justify-items: center; gap: 2px; padding: 6px 8px; border-radius: 14px; transition: background .2s, transform .2s; }
.nstt-seat.is-speaking { background: rgba(94, 234, 212, .08); transform: translateY(-2px); }
.nstt-face { margin: 0; font: 600 13px/1.1 ui-monospace, 'SFMono-Regular', Menlo, monospace; color: var(--ns-gold, #f5a623); white-space: pre; }
.nstt-seat.is-speaking .nstt-face { color: var(--ns-speaking, #5eead4); }
.nstt-name { margin: 0; font-weight: 600; font-size: 15px; }
.nstt-stance { margin: 0; font-size: 12px; color: var(--ns-text-2, #9aa0a6); }

.nstt-speaker { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--ns-gold, #f5a623); text-align: center; }
.nstt-caption { width: 100%; }
.nstt-progress { width: 100%; max-width: 640px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.nstt-progress span { display: block; width: 0; height: 100%; background: var(--ns-gold, #f5a623); transition: width .16s linear; }

.nstt-topic { margin: 0; font-size: 19px; font-weight: 500; }
.nstt-transcript summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--ns-gold, #f5a623); }
.nstt-transcript ol { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; }
.nstt-label { margin-left: 4px; font-size: 13px; color: var(--ns-text-2, #9aa0a6); }

@media (min-width: 900px) {
    .nstt-face { font-size: 16px; }
    .nstt-cast { gap: 12px 28px; }
}