/* ==========================================================================
   Vstream — content layer (article, player, comments)
   Neomorphic companion to vstream.css
   ========================================================================== */

/* ------------------------------------------------------------- article --- */

.vs-article {
	display: block;
}

.vs-article__head {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	padding: 34px;
	margin-bottom: 34px;
	background-color: var(--n-bg);
	border-radius: var(--n-r-lg);
	box-shadow: var(--n-raise);
}

.vs-article__poster {
	position: relative;
	border-radius: var(--n-r);
	overflow: hidden;
	aspect-ratio: 2 / 3;
	background-color: var(--n-bg);
	box-shadow: var(--n-inset);
}

.vs-article__poster-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Poster + the vote row. The votes are siblings of the poster, not an overlay:
   sitting on the artwork they covered its lower third and clipped the title. */
.vs-article__media {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* Like/dislike under the poster, as two even buttons. */
.vs-article__votes {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.vs-article__votes .vote-pill {
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
	padding: 9px 10px;
	border-radius: var(--n-r-sm);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
}

.vs-article__votes .vote-pill--up:hover {
	color: #1f9d55;
}

.vs-article__votes .vote-pill--down:hover {
	color: #d43d51;
}

.vs-article__votes .vote-score {
	font-size: 15px;
	font-weight: 800;
	color: var(--n-text);
	align-self: center;
	padding: 0 4px;
}

.vs-article__votes .thread__stars {
	align-self: center;
}

.vs-article__playcue {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 62px;
	height: 62px;
	margin: -31px 0 0 -31px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--n-float-90);
	box-shadow: var(--n-raise);
	color: var(--n-accent);
	pointer-events: none;
}

.vs-article__playcue .icon {
	width: 24px;
	height: 24px;
	margin-left: 4px;
}

.vs-article__intro {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.vs-article__top {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.vs-article__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.vs-article__actions .icon-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	color: var(--n-muted);
	cursor: pointer;
	transition: color .2s ease, box-shadow .2s ease;
}

.vs-article__actions .icon-action:hover,
.vs-article__actions .icon-action.is-active {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-article__actions .icon {
	width: 17px;
	height: 17px;
}

.vs-article__pin {
	padding: 5px 12px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.vs-article__title {
	font-size: 40px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.6px;
	color: var(--n-ink);
	margin: 0 0 22px;
}

.vs-article__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.vs-article__scores {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 18px;
}

.vs-score {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 84px;
	padding: 12px 16px;
	border-radius: var(--n-r);
	background-color: var(--n-gold-soft);
	color: #b97c05;
}

.vs-score b {
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
}

.vs-score span {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 5px;
	opacity: .8;
}

.vs-score--imdb {
	background-color: var(--n-accent-soft);
	color: var(--n-accent-dk);
}

/* The rating badges moved up into the header row beside the action buttons.
   At their original 84px/min-width and 26px numerals they dwarfed the row, so
   they are flattened into pills here. */
.vs-article__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.vs-article__rating .vs-score {
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
	padding: 7px 13px;
	border-radius: var(--n-r-pill);
}

.vs-article__rating .vs-score b {
	font-size: 17px;
}

.vs-article__rating .vs-score span {
	margin-top: 0;
	font-size: 10px;
}

.vs-article__genre {
	font-size: 14px;
	color: var(--n-muted);
	/* Was `margin: auto 0 0`, which pushed the genre row to the bottom of the
	   flex column to balance the tall poster. With the story moved in here that
	   would leave a hole above the text, so it is a normal gap now. */
	margin: 18px 0 0;
	max-width: 62ch;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.vs-article__genre span {
	font-weight: 700;
	color: var(--n-text);
}

/* -------------------------------------------------------------- player --- */

/* the vendor block inherits .vs-player__mount sizing from the Player section */
/* ------------------------------------------------------------- content --- */

/* Facts table: original title, director and cast. Label/value rows keep long
   cast lists readable and let the empty fields simply be absent from the DOM
   rather than leaving blank rows behind. */
.vs-article__info {
	margin: 0 0 18px;
	padding: 14px 18px;
	border-radius: var(--n-r-sm);
	background-color: var(--n-dark);
	box-shadow: var(--n-inset-sm);
}

.vs-article__info-row {
	display: flex;
	gap: 12px;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.55;
}

.vs-article__info-row + .vs-article__info-row {
	border-top: 1px solid var(--n-line);
}

.vs-article__info dt {
	flex: none;
	width: 46%;
	color: var(--n-muted);
}

.vs-article__info dd {
	margin: 0;
	min-width: 0;
	color: var(--n-text);
	overflow-wrap: anywhere;
}

/* Same as the card badge: {link-category} emits one anchor per genre, so the
   header chip keeps only the primary section. */
.vs-article__top .vs-chip .cat-link + .cat-link {
	display: none;
}

/* The story now lives in the narrow column next to the poster, so it needs a
   comfortable measure and its own spacing rather than full-width block rules.
   The short synopsis is merged into this block, so it keeps the same measure as
   the facts table above it. */
.vs-article__body {
	font-size: 15px;
	line-height: 1.75;
	color: var(--n-text);
	max-width: 62ch;
	/* The facts table above already carries an 18px bottom margin, so this
	   block adds none on top of it: that would open a 38px gap. */
	margin-top: 0;
}

.vs-article__body img,
.vs-page .text img {
	border-radius: var(--n-r);
	box-shadow: var(--n-raise-sm);
}

.vs-article__body h2,
.vs-article__body h3 {
	font-weight: 800;
	margin: 34px 0 14px;
	color: var(--n-ink);
}

.vs-article__body blockquote {
	margin: 24px 0;
	padding: 18px 24px;
	border-radius: var(--n-r);
	background-color: var(--n-bg);
	box-shadow: var(--n-inset-sm);
	color: var(--n-text);
}

.vs-article__body a,
.vs-page .text a {
	color: var(--n-accent);
	font-weight: 600;
}

.vs-article__body a:hover {
	text-decoration: underline;
}

.vs-article__body iframe {
	max-width: 100%;
	border: 0;
	border-radius: var(--n-r);
	box-shadow: var(--n-raise-sm);
}

.vs-article__note {
	margin-top: 28px;
	padding: 14px 18px;
	border-radius: var(--n-r-sm);
	background-color: var(--n-bg);
	box-shadow: var(--n-inset-sm);
	font-size: 13px;
	color: var(--n-muted);
}

.vs-article__pages {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 28px;
}

.vs-article__pages a,
.vs-article__pages span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	color: var(--n-muted);
	font-size: 14px;
	font-weight: 700;
}

.vs-article__pages b,
.vs-article__pages .current {
	background-color: var(--n-accent);
	color: #fff;
	box-shadow: none;
}

.vs-article__tags {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 34px;
	padding-top: 24px;
}

.vs-article__tags-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 800;
	color: var(--n-ink);
}

.vs-article__tags-list a {
	display: inline-block;
	padding: 6px 14px;
	margin: 0 8px 8px 0;
	border-radius: var(--n-r-pill);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	color: var(--n-muted);
	font-size: 13px;
	font-weight: 600;
}

.vs-article__tags-list a:hover {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-poll {
	margin-top: 34px;
	padding: 26px 30px;
	border-radius: var(--n-r);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise);
}

.vs-counter {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 12px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	vertical-align: middle;
}

/* ---------------------------------------------------------- story nav --- */

.vs-story-nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.vs-story-nav__item {
	display: block;
	padding: 20px 24px;
	border-radius: var(--n-r);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise);
	transition: transform .25s ease, box-shadow .25s ease;
}

.vs-story-nav__item:hover {
	transform: translateY(-3px);
	box-shadow: var(--n-raise-lg);
	color: var(--n-ink);
}

.vs-story-nav__item--next {
	text-align: right;
}

.vs-story-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--n-accent);
	margin-bottom: 8px;
}

.vs-story-nav__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	color: var(--n-ink);
}

.vs-related {
	margin-top: 52px;
}

.vs-comments {
	margin-top: 52px;
}

/* ==========================================================================
   Comments — DLE ships its own markup (thread__*), so style the real
   classes rather than guessed ones.
   ========================================================================== */

.vs-comments .thread {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 34px;
}

.vs-comments .thread__item {
	position: relative;
	padding: 20px 22px;
	border-radius: var(--n-r);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
}

/* DLE renders replies flat, so `thread__item--reply` means "this comment has
   replies" — mark it with an accent edge instead of indenting it. */
.vs-comments .thread__item--reply {
	box-shadow: var(--n-raise-sm), inset 3px 0 0 var(--n-accent);
}

.vs-comments .thread__top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.vs-comments .thread__avatar,
.vs-comments .avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	box-shadow: var(--n-raise-sm);
}

.vs-comments .avatar--initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--n-accent-soft);
	color: var(--n-accent-dk);
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
}

.vs-comments .thread__ident {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vs-comments .thread__author {
	font-size: 15px;
	font-weight: 700;
	color: var(--n-ink);
	line-height: 1.3;
}

.vs-comments .thread__author:hover {
	color: var(--n-accent);
}

.vs-comments .thread__group,
.vs-comments .thread__badge {
	font-size: 11px;
	font-weight: 700;
	color: var(--n-muted);
}

/* DLE wraps the group name in a nested <b><span style="color:#f00">, which
   would otherwise override the muted colour in both themes. */
.vs-comments .thread__group b,
.vs-comments .thread__group span,
.vs-comments .thread__badge b,
.vs-comments .thread__badge span {
	color: inherit !important;
}

.vs-comments .thread__online {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--n-green);
	box-shadow: 0 0 0 3px rgba(53, 192, 138, .18);
	flex: none;
}

.vs-comments .thread__when {
	margin-left: auto;
	font-size: 12px;
	color: var(--n-faint);
	white-space: nowrap;
}

.vs-comments .thread__text {
	font-size: 15px;
	line-height: 1.75;
	color: var(--n-text);
	overflow-wrap: anywhere;
}

.vs-comments .thread__text.text {
	color: var(--n-text);
}

.vs-comments .thread__rate {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--n-muted);
}

.vs-comments .thread__stars {
	color: var(--n-gold);
	letter-spacing: 1px;
}

.vs-comments .thread__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding-top: 12px;
	border-radius: var(--n-r-sm);
	box-shadow: var(--n-inset-sm);
	padding: 8px 10px;
}

.vs-comments .thread__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 0;
	border-radius: var(--n-r-pill);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	color: var(--n-muted);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: color .2s ease, box-shadow .2s ease;
}

.vs-comments .thread__btn:hover {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-comments .thread__btn--danger:hover {
	color: var(--n-danger);
}

.vs-comments .thread__btn .icon {
	width: 14px;
	height: 14px;
}

.vs-comments .thread__replies {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vs-comments .thread__signature {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--n-line);
	font-size: 13px;
	color: var(--n-faint);
}

.vs-comments .thread__images img {
	border-radius: var(--n-r-sm);
	max-width: 180px;
	margin: 6px 8px 0 0;
	box-shadow: var(--n-raise-sm);
}

.vs-comments .thread__mass {
	margin-bottom: 18px;
}

/* DLE renders the add-comment form with its own .reply-form block, which the
   Air base paints white. Re-skin it as a raised soft-UI surface. */
.vs-body .vs-comments .reply-form {
	background-color: var(--n-bg);
	border-radius: var(--n-r);
	box-shadow: var(--n-raise);
	padding: 26px 28px;
	color: var(--n-text);
}

.vs-body .vs-comments .reply-form__title {
	font-size: 19px;
	font-weight: 800;
	color: var(--n-ink);
	margin: 0 0 6px;
}

.vs-body .vs-comments .reply-form__note {
	font-size: 13px;
	color: var(--n-muted);
	margin: 0 0 18px;
}

.vs-body .vs-comments .form-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--n-muted);
	margin-bottom: 6px;
}

.vs-body .vs-comments .form-input,
.vs-body .vs-comments .reply-form textarea,
.vs-body .vs-comments .reply-form input[type="text"],
.vs-body .vs-comments .reply-form input[type="email"] {
	width: 100%;
	padding: 13px 18px;
	border: 0;
	border-radius: var(--n-r-sm);
	background-color: var(--n-bg);
	box-shadow: var(--n-inset-sm);
	color: var(--n-text);
	font-family: inherit;
	font-size: 14px;
	outline: none;
}

.vs-body .vs-comments .form-input:focus,
.vs-body .vs-comments .reply-form textarea:focus,
.vs-body .vs-comments .reply-form input:focus {
	box-shadow: var(--n-inset);
}

.vs-body .vs-comments .primary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 30px;
	border: 0;
	border-radius: var(--n-r-pill);
	background-color: var(--n-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	box-shadow: 4px 6px 14px rgba(91, 108, 255, .4);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.vs-body .vs-comments .primary-button:hover {
	background-color: var(--n-accent-dk);
	transform: translateY(-1px);
}

.vs-body .vs-comments .form-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.vs-body .vs-comments .form-actions__hint {
	font-size: 12px;
	color: var(--n-faint);
}

/* TinyMCE paints its own canvas — keep it on the surface, not pure white. */
.vs-body .vs-comments .tox .tox-edit-area__iframe {
	background-color: var(--n-bg) !important;
}

/* The editor canvas lives in an iframe, so page CSS cannot reach inside it.
   Frame it as an inset field instead, so whatever DLE paints reads as
   intentional rather than as a foreign white/dark block. */
.vs-body .vs-comments .tox .tox-edit-area {
	border-radius: var(--n-r-sm);
	box-shadow: var(--n-inset-sm);
	overflow: hidden;
	margin-top: 6px;
}

.vs-body .vs-comments .tox .tox-toolbar,
.vs-body .vs-comments .tox .tox-toolbar__group {
	background-color: var(--n-bg) !important;
}

.vs-body .vs-comments .tox .tox-tbtn {
	color: var(--n-muted) !important;
}

.vs-body .vs-comments .tox .tox-tbtn:hover {
	background-color: var(--n-dark) !important;
	color: var(--n-ink) !important;
}
/* ------------------------------------------------------- static pages --- */

.vs-page .text,
.vs-article-wrap .text {
	font-size: 16px;
	line-height: 1.8;
	color: var(--n-text);
}

.vs-page .text h1,
.vs-article-wrap .text h1 {
	font-size: 30px;
	font-weight: 800;
	margin: 34px 0 14px;
}

.vs-page .text h2,
.vs-article-wrap .text h2 {
	font-size: 23px;
	font-weight: 800;
	margin: 30px 0 12px;
}

.vs-page .text table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--n-r);
	overflow: hidden;
	box-shadow: var(--n-raise-sm);
}

.vs-page .text table td,
.vs-page .text table th {
	padding: 12px 16px;
	background-color: var(--n-bg);
	border-bottom: 1px solid var(--n-dark);
	text-align: left;
}

.vs-page .text table th {
	font-weight: 800;
	color: var(--n-ink);
	box-shadow: var(--n-raise-sm);
}

.vs-article-wrap > *:not(.vs-article) {
	margin-top: 24px;
}

/* --------------------------------------------- DLE rating / vote widgets --- */

.vs-body .vote-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-bg);
	box-shadow: var(--n-inset-sm);
	font-size: 12px;
	font-weight: 700;
	color: var(--n-muted);
	cursor: pointer;
	transition: color .2s ease, box-shadow .2s ease;
}

.vs-body .vote-pill .icon {
	width: 14px;
	height: 14px;
}

.vs-body .vote-pill--up:hover {
	color: var(--n-green);
	box-shadow: var(--n-inset);
}

.vs-body .vote-pill--down:hover {
	color: #e2564c;
	box-shadow: var(--n-inset);
}

.vs-body .vote-score {
	font-size: 15px;
	font-weight: 800;
	color: var(--n-ink);
}

.vs-body .thread__stars {
	color: var(--n-gold);
	font-size: 15px;
}

/* DLE renders the add-comment form with its own .reply-form block, which the
   Air base paints white. Re-skin it as a raised soft-UI surface. */
.vs-body .vs-comments .reply-form {
	background-color: var(--n-bg);
	border-radius: var(--n-r);
	box-shadow: var(--n-raise);
	padding: 26px 28px;
	color: var(--n-text);
}

.vs-body .vs-comments .reply-form textarea,
.vs-body .vs-comments .reply-form input[type="text"],
.vs-body .vs-comments .reply-form input[type="email"] {
	background-color: var(--n-bg);
	box-shadow: var(--n-inset-sm);
	border-radius: var(--n-r-sm);
	color: var(--n-text);
}

.vs-body .vs-comments .reply-form textarea:focus,
.vs-body .vs-comments .reply-form input:focus {
	box-shadow: var(--n-inset);
	outline: none;
}

/* TinyMCE paints its own canvas — keep it on the surface, not pure white. */
.vs-body .vs-comments .tox .tox-edit-area__iframe {
	background-color: var(--n-bg) !important;
}

/* The editor canvas lives in an iframe, so page CSS cannot reach inside it.
   Frame it as an inset field instead, so whatever DLE paints reads as
   intentional rather than as a foreign white/dark block. */
.vs-body .vs-comments .tox .tox-edit-area {
	border-radius: var(--n-r-sm);
	box-shadow: var(--n-inset-sm);
	overflow: hidden;
	margin-top: 6px;
}

.vs-body .vs-comments .tox .tox-toolbar,
.vs-body .vs-comments .tox .tox-toolbar__group {
	background-color: var(--n-bg) !important;
}

.vs-body .vs-comments .tox .tox-tbtn {
	color: var(--n-muted) !important;
}

.vs-body .vs-comments .tox .tox-tbtn:hover {
	background-color: var(--n-dark) !important;
	color: var(--n-ink) !important;
}

/* ==========================================================================
   Player
   ========================================================================== */

.vs-player {
	margin: 0 0 34px;
}

.vs-player__frame {
	position: relative;
	padding: 14px;
	border-radius: var(--n-r-lg);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-lg);
	/* The player frame is the rounded inset well, so clip here. Without it the
	   vendor player can size itself past the frame and push the whole document
	   into horizontal scroll on narrow screens. */
	overflow: hidden;
}

.vs-player__frame::before {
	content: "";
	display: block;
	padding-top: 56.25%;
	border-radius: var(--n-r);
	background-color: var(--n-bg);
	box-shadow: var(--n-inset);
}

.vs-player__mount,
.vs-player .dreams-player {
	position: absolute;
	inset: 14px;
	border-radius: var(--n-r);
	overflow: hidden;
	background-color: var(--n-bg);
	box-shadow: var(--n-inset);
	font-size: 14px;
	color: var(--n-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
}

/* the vendor script injects its own canvas/iframe — keep it inside the well */
.vs-player .dreams-player > * {
	max-width: 100%;
	border-radius: var(--n-r-sm);
}

/* ------------------------------------------------------- custom controls --- */

.vp {
	position: absolute;
	inset: 14px;
	border-radius: var(--n-r);
	overflow: hidden;
	background-color: #0d1017;
	color: #fff;
	outline: none;
}

.vp.is-fullscreen {
	border-radius: 0;
}

.vp__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: #0d1017;
	display: block;
}

.vp__poster,
.vp__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.vp__poster {
	background-size: cover;
	background-position: center;
	opacity: 1;
	transition: opacity .45s ease;
}

.vp__shade {
	background: linear-gradient(to top, rgba(6, 8, 12, .78) 0%, rgba(6, 8, 12, .18) 34%, rgba(6, 8, 12, .30) 100%);
}

/* once playback starts the poster is replaced by the first frame */
.vp.is-playing .vp__poster,
.vp.is-ended .vp__poster {
	opacity: 0;
}

.vp__headline {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	pointer-events: none;
	transition: opacity .35s ease;
}

.vp__title {
	font-family: var(--n-font);
	font-size: clamp(26px, 4.4vw, 58px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -.5px;
	text-align: center;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
	max-width: 90%;
}

.vp.is-playing .vp__headline,
.vp.is-paused .vp__headline {
	opacity: 0;
}

.vp__bigplay {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .16);
	backdrop-filter: blur(10px);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: scale(.85);
	transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
}

.vp__bigplay .vp-ico {
	width: 40px;
	height: 40px;
	margin-left: 5px;
	fill: #fff;
}

.vp:hover .vp__bigplay,
.vp:focus-within .vp__bigplay,
.vp.is-ended .vp__bigplay {
	opacity: 1;
	transform: scale(1);
}

.vp__bigplay:hover {
	background-color: var(--n-accent);
}

.vp__bar {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 16px;
	border-radius: 28px;
	background-color: rgba(16, 20, 28, .58);
	backdrop-filter: blur(14px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s ease;
}

.vp:hover .vp__bar,
.vp:focus-within .vp__bar,
.vp.is-paused .vp__bar,
.vp.is-ended .vp__bar {
	opacity: 1;
	transform: translateY(0);
}

.vp__btn {
	flex: none;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: rgba(255, 255, 255, .88);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.vp__btn:hover {
	background-color: rgba(255, 255, 255, .16);
	color: #fff;
}

.vp-ico {
	width: 21px;
	height: 21px;
	fill: currentColor;
	display: block;
}

.vp__time {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .88);
	min-width: 42px;
	text-align: center;
}

/* ------------------------------------------------------- volume control --- */

.vp__vol {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.vp__volume {
	-webkit-appearance: none;
	appearance: none;
	width: 0;
	padding: 0;
	margin: 0;
	height: 20px;
	background: transparent;
	cursor: pointer;
	opacity: 0;
	transition: width .22s ease, opacity .22s ease;
}

/* The control bar is already dense, so the slider grows out of the mute button
   on hover/focus instead of permanently stealing width from the seek bar. */
.vp__bar:hover .vp__volume,
.vp__volume:focus-visible {
	width: 84px;
	opacity: 1;
}

.vp__volume::-webkit-slider-runnable-track {
	height: 5px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, .26);
}

.vp__volume::-moz-range-track {
	height: 5px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, .26);
}

.vp__volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	margin-top: -4px;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

.vp__volume::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

.vp__volume:focus-visible {
	outline: 2px solid var(--n-accent);
	outline-offset: 3px;
}

.vp__seek {
	position: relative;
	flex: 1 1 auto;
	height: 20px;
	display: flex;
	align-items: center;
	cursor: pointer;
	touch-action: none;
}

.vp__seek::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 5px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, .28);
}

.vp__buffered,
.vp__played {
	position: absolute;
	left: 0;
	height: 5px;
	border-radius: 3px;
	width: 0;
}

.vp__buffered {
	background-color: rgba(255, 255, 255, .38);
}

.vp__played {
	background-color: var(--n-accent);
}

.vp__knob {
	position: absolute;
	width: 13px;
	height: 13px;
	margin-left: -6px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .2s ease;
}

.vp__seek:hover .vp__knob,
.vp__seek:focus-visible .vp__knob {
	opacity: 1;
}

.vp__menuWrap {
	position: relative;
	flex: none;
}

.vp__menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	min-width: 108px;
	padding: 6px;
	border-radius: 16px;
	background-color: rgba(16, 20, 28, .94);
	backdrop-filter: blur(14px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

.vp__menu[hidden] {
	display: none;
}

.vp__menu button {
	display: block;
	width: 100%;
	padding: 8px 12px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: rgba(255, 255, 255, .78);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.vp__menu button:hover {
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
}

.vp__menu button.is-on {
	color: var(--n-accent);
}

.vp.is-error .vp__headline,
.vp.is-error .vp__bigplay {
	display: none;
}

/* On touch devices there is no hover, so the bar must stay reachable. */
@media (hover: none) {
	.vp__bar {
		opacity: 1;
		transform: translateY(0);
	}

	.vp__bigplay {
		opacity: 1;
		transform: scale(1);
	}

	.vp__knob {
		opacity: 1;
	}
}

@media only screen and (max-width: 576px) {
	.vp,
	.vs-player__mount,
	.vs-player .dreams-player {
		inset: 8px;
	}

	.vs-player__frame {
		padding: 8px;
	}

	.vp__bar {
		left: 8px;
		right: 8px;
		bottom: 8px;
		height: 48px;
		padding: 0 10px;
		gap: 6px;
	}

	.vp__bigplay {
		width: 62px;
		height: 62px;
		margin: -31px 0 0 -31px;
	}

	.vp__bigplay .vp-ico {
		width: 28px;
		height: 28px;
	}
}

/* ---------------------------------------------------------- responsive --- */

@media only screen and (max-width: 992px) {
	.vs-article__head {
		grid-template-columns: 200px 1fr;
		gap: 26px;
		padding: 26px;
	}

	.vs-article__title {
		font-size: 30px;
	}
}

@media only screen and (max-width: 768px) {
	.vs-story-nav {
		grid-template-columns: 1fr;
	}

	.vs-article__actions {
		margin-left: 0;
	}

	/* A 46% label column leaves too little for long cast lists on a phone,
	   so each fact becomes label-over-value instead of a squeezed row. */
	.vs-article__info-row {
		flex-direction: column;
		gap: 2px;
	}

	.vs-article__info dt {
		width: auto;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .04em;
	}
}

@media only screen and (max-width: 576px) {
	.vs-article__head {
		grid-template-columns: 1fr;
		padding: 20px;
	}

	.vs-article__poster {
		/* Was capped at 220px, but the media column is 320px here. The poster
		   sat narrow in a wide column and the vote buttons below it were
		   squeezed to 61px each, so the poster now fills the column. */
		max-width: 100%;
	}

	.vs-article__title {
		font-size: 24px;
	}

	.vs-player__frame {
		padding: 8px;
	}

	.vs-player .dreams-player {
		inset: 8px;
	}
}