:root {
	/*--dark-color: #0f1624;*/
	--dark-color: #002347;
	--light-text-color: #fff5ed;
	/*--main-color: #4f1461;*/
	--main-color: #003366;
	/*--light-color: #edf1f8;*/
	--light-color: #f98125;
	--dark-text-color: #132039;
	--green-color: #00ff15;
	--red-color: #e63c41;
	--content-color: #4d7fb3;

	--blue-color: #007bff;
	--purple-color: #6f42c1;
	--teal-color: #20c997;
	--orange-color: #f98125;
	--yellow-color: #ffc107;
	--gray-color: #6c757d;
	--darker-background-color: rgba(0, 35, 71, 0.3);
	--background-color: rgba(0, 51, 102, 0.2);
	--border-color: rgba(0, 51, 102, 0.3);

	--button-main-color: #f98125;
	--button-red-color: #993f3f;
	--button-green-color: #379937;
	--button-blue-color: #4d7fb3;
	--button-dark-color: #002347;
	--button-black-color: #1a1a1ae6;
}

html{
	min-height: 100%;
	background-color: var(--dark-color);
}

body{
	color: var(--light-color);
	font-size: 16px;
	font-family: Helvetica, "Helvetica Neue", Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	width: 100%;
	max-width: 100%;
	min-width: 800px;
	min-height: 100vh;
	padding: 0;
	display: flex;
	align-items: stretch;
	background-color: var(--dark-color);
}

a {
	color: var(--light-color);
}

a:hover {
	color: var(--light-text-color);
}

/* ===      === */
/*  MENU 		*/
/* ===      === */
/* Removes the mobile double-tap-zoom delay on everything tappable - without it
   Safari waits ~300ms after a tap to see whether a second one follows. */
a, button, input, label {
	touch-action: manipulation;
}

.menu{
	width: 8em;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	align-self: flex-start;
	height: 100vh;
	background-color: var(--dark-color);
}

.menu ul {
	list-style: none;
	padding: 0;
}

.menu li {
	height: 2.8em;
}

.menu a {
	display: block;
	color: var(--light-text-color);
	font-weight: bold;
	text-align: center;
	vertical-align: 50%;
	width: 100%;
	height: 100%;
	padding: 0.8em 0.1em 0.1em 0.1em;
	border-right: 2px solid var(--light-color);
	text-decoration: none;
}

.menu a:hover, .menu .active {
	border-left: 5px var(--light-color) solid;
	background-color: var(--main-color);
	text-decoration: none;
	border-right: none;
}

/* ===      === */
/*  SUBMENU 	*/
/* ===      === */

.submenu{
	width: 21em;
	flex-shrink: 0;
	background-color: var(--main-color);
	z-index: 2;
}

.submenu-inner{
	position: sticky;
	top: 0;
	overflow: hidden;
}

/* ===      === */
/*  CONTENT		*/
/* ===      === */

.content {
	flex: 1;
	min-width: 0;
	background-color: var(--content-color);
	color: var(--dark-color);
	overflow: visible;
	position: relative;
	display: flex;
	flex-direction: column;
}

.content > [id^="snippet--"] {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.content-inner {
	padding-left: 2em;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 2em;
}

.content label {
	color: var(--dark-color);
}
.content .flash {
	padding: 1em;
	position: absolute;
	width: 100%;

	z-index: 100;

	animation:signup-response 5.0s 1;
	-webkit-animation:signup-response 5.0s 1;
	animation-fill-mode: forwards;

	animation-delay:4s;
	-webkit-animation-delay:4s; /* Safari and Chrome */
	-webkit-animation-fill-mode: forwards;
}

@keyframes signup-response{
	from {opacity :1;}
	to {opacity :0;}
}

@-webkit-keyframes signup-response{
	from {opacity :1;}
	to {opacity :0;}
}

.flash-green {
	color: var(--green-color);
	background-color: var(--dark-color);
	border-bottom: 1px solid var(--green-color);
}
.flash-yellow {
	color: var(--light-color);
	background-color: var(--dark-color);
	border-bottom: 1px solid var(--light-color);
}
.flash-red {
	color: var(--red-color);
	background-color: var(--dark-color);
	border-bottom: 1px solid var(--red-color);
}

/* =====================================================================================================      === */
/*  OLD */
/* ===      === */

.admin.half, .favorite.half {
	width: 200px;
	height: auto;
}

.popup{
	display: block;
	background-color: var(--dark-color);
}

/* ===     === */
/*  SUB MENU */
/* ===     === */

.submenu{

}
.submenu h1, .submenu .h1{
	font-size: 2em;
	width: 100%;
	text-align: center;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.submenu h2{
	font-size: 1.5em;
	width: 100%;
	text-align: center;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.submenu a{
	color: #ffffff;
	font-weight: bold;
}
.submenu .action{
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 15px;
	padding-right: 15px;
}

/* The submenu's form controls. Every text field in the side column is a .submenu-input
   and every submit is a .submenu-button, whichever page the form belongs to - the guess
   answer box, the site search, the movie and show filters. They were three separate
   looks before, and the input carried the class name "guess" even on the search form.

   3em tall and 16px of text: the field is the one place on a phone where a smaller
   font would make iOS zoom the page on focus. */
.submenu-input{
	box-sizing: border-box;
	width: 100%;
	height: 3em;
	padding-left: 0.8em;
	font-size: 16px;
	border: none;
}

.submenu-button{
	box-sizing: border-box;
	height: 3em;
	color: #ffffff;
	background-color: var(--dark-color);
	vertical-align: middle;
	font-weight: bold;
	border: none;
	cursor: pointer;
}
.submenu-button:hover{
	text-shadow:  0.1em 0.1em 0.2em black;
	color: var(--light-color);
}

/* A query and its submit ride on one line. Only the guess form still has a submit - the
   search box submits itself now - so the split is asked for by the button's presence rather
   than applied to every .action form and then undone. */
.submenu .action form:has(.submenu-button) .submenu-input{
	float: left;
	width: 70%;
}
.submenu .action .submenu-button{
	width: 30%;
}

.submenu ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A column whose page gives it no heading of its own started its first row hard against the top
   of the window - the title tabs are the case, since that page's heading is in the content. */
.submenu-inner > ul:first-child,
.submenu-inner > .info:first-child{
	display: block;
	padding-top: 0.75em;
}

/* Actions, not tabs. The tiles above go to another page about the title; these do something to
   it, so they sit below a rule rather than reading as more of the same row. The tiles float, so
   the list has to clear them before it can sit under them. */
/* Qualified with .submenu, or ".submenu ul" above - one class and one type against this one
   class - zeroes the margin and padding back out. overflow contains the floated tiles, without
   which the list is one pixel of border sitting above the things it is meant to be under. */
.submenu .submenu-actions,
.submenu .submenu-nav{
	clear: both;
	overflow: hidden;
	margin-top: 1em;
	padding-top: 1em;
	/* Not --border-color: it is a dark blue at 30%, which against this column is no line at all. */
	border-top: 1px solid rgba(255, 245, 237, 0.25);
}
.submenu li, .submenu .flash{
	display: block;
	float: left;
}
.submenu li{
	position: relative;
	padding: 0.2em;
	text-align: center;
}
.submenu li.big{
	width: 5.25em;
	height: 5.25em;
}
.submenu li.half{
	width: 5.25em;
	height: 2.625em;
	font-size: 1em;
}
.submenu li.wide-all{
	width: 21em;
	height: 5.25em;
}
.submenu li.wide-all-small, .submenu .flash{
	width: 21em;
	height: 3.625em;
}
.submenu li.wide-half{
	width: 10.5em;
	height: 5.25em;
}
.submenu li.wide-third{
	width: 7em;
	height: 3.625em;
}
.submenu li a{
	display: table;
	width: 100%;
	height: 100%;
	line-height: 100%;
	background-color: var(--dark-color);
	text-decoration: none;
	color: var(--light-text-color);
}
.submenu li a:hover{
	text-decoration: none;
	color: var(--light-color);
}
.submenu li a.active{
	color: var(--light-color);
}

/* An end of a paged range. The tile keeps its place so the four paging controls never shuffle
   under the reader's thumb; the anchor is rendered without an href, so it is already inert and
   unfocusable and this only has to say so. */
.submenu li a.disabled,
.submenu li a.disabled:hover{
	opacity: 0.35;
	color: var(--light-text-color);
	cursor: default;
}

.submenu-page-count{
	clear: both;
	margin: 0;
	padding: 0.4em 0.2em 0.8em;
	text-align: center;
	font-size: 0.9em;
	opacity: 0.8;
}
.submenu li a.active:hover{
	text-decoration: none;
	color: var(--light-text-color);
}
.submenu li a span, .submenu li a i, .submenu li a p{
	display: table-cell;
	margin: 0;
	vertical-align: middle;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	line-height: 1.2em;
}
.submenu li a i {
	font-size: 2em;
}
.submenu li a i.bi-star {
	font-size: 1.5em;
}
.submenu li a p {
	font-size: 1.125em;
}
.submenu li a img {

	padding-top: 0.5em;
	padding-bottom: 0.5em;
	height: 3em;
	vertical-align: middle;
}

.submenu .btn-main {
	color: var(--button-main-color);
}
.submenu .btn-main:hover {
	background-color: var(--button-main-color);
	color: #FFFFFF;
}
.submenu .btn-red {
	color: var(--button-red-color);
}
.submenu .btn-red:hover {
	background-color: var(--button-red-color);
	color: #FFFFFF;
}
.submenu .btn-blue {
	color: var(--button-blue-color);
}
.submenu .btn-blue:hover {
	background-color: var(--button-blue-color);
	color: #FFFFFF;
}
.submenu .btn-dark {
	color: var(--button-dark-color);
}
.submenu .btn-dark:hover {
	background-color: var(--button-dark-color);
	color: #FFFFFF;
}
.submenu .btn-black {
	color: var(--button-black-color);
}
.submenu .btn-black:hover {
	background-color: var(--button-black-color);
	color: #FFFFFF;
}
.submenu .btn-green {
	color: var(--button-green-color);
}
.submenu .btn-green:hover {
	background-color: var(--button-green-color);
	color: #FFFFFF;
}

.btn-main {
	width: 40em;
	padding: 0.5em;
	font-weight: bold;
	color: #ffffff;
	background-color: var(--dark-color);
	border: none;
	display: block;
	text-align: center;
	text-decoration: none;
}

/* == POPUP == */

.submenu .popup{
	display: none;
}

.submenu .popup-show:before{
	content: " ";
	display: block;
	position: absolute;
	top: 1em;
	left: -0.4em;
	z-index: 10;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right:10px solid #FFFFFF;
}

.submenu .popup-show{
	color: var(--dark-color);
	display: table;
	position: absolute;
	text-align: center;
	margin: 0.2em;
	top: 0;
	left: 100%;
	width: 15.75em;
	height: 10.5em;
	background-color: #FFFFFF;
	z-index: 10;
}

.submenu .popup-show input{
	margin: 0.5em;
	padding-left: 0.8em;
	width: 14em;
	height: 2.5em;
	border: 1px solid var(--light-color);
}
.submenu .popup-show input.text{
	padding-left: 0.8em;
}
.submenu .popup-show a{
	font-size: 1em;
	position: relative;
	margin: 0.5em auto;
	width: 14em;
	height: 2.5em;
	vertical-align: middle;
	opacity: 1;
	text-shadow: none;
	border: none;
	float: none;
}
.submenu .popup-show a:hover{
	color: #ffffff;
}
/* Prose in the side column - what a page is for, above the controls that do it. The class was
   defined here long before anything used it; the seeding page is the first. */
/* Below the tiles it follows, not over them: the tiles are floats, and a paragraph that does not
   clear them starts at their top - transparent, invisible, and the thing every click on the
   seeding page's column actually landed on. */
.submenu-description{
	clear: both;
	padding: 0.8em 15px;
	margin: 0;
	line-height: 1.45em;
	opacity: 0.9;
}

/* The seeding page's running tally. It sits above the first row of controls, and on a phone
   that row is what the sheet rests showing - so this stays to one line. */
.submenu .seed-progress{
	margin: 0;
	padding: 0 15px 0.7em;
	text-align: center;
	line-height: 1.6em;
}

.submenu .seed-progress b{
	color: var(--button-main-color);
}
.btn-purple {
	background-color: #ffffff;
	border: 2px #532866 solid;
	color: #783993;
	transition: all .15s;
}

.btn-purple:hover{
	background-color: #783993;
	border: 2px #532866 solid;
	color: #FFFFFF;
}
.btn-purple-selected {
	background-color: #783993;
	border: 2px #532866 solid;
	transition: all .15s;
}
.btn-purple-selected:hover {
	color: #FFFFFF;
}

/* Watched and watchlist wear one set of colours wherever they appear. The card's action bar sets
   the language - white until it is on, then filled - and the side column and the roll-down follow
   it. The column used to be purple with a 2px border while the card was orange without one, so
   the same two actions looked like four different buttons.

   The states are named for what they are rather than for a colour. They were "purple" and "blue",
   and "blue" is also a text-colour utility carrying !important, which an unselected watchlist
   button was picking up - the reason it came out pure blue. */
.submenu .watch-off,
.card-info-watched.watch-off {
	background-color: #ffffff;
	color: var(--button-main-color);
	transition: all .15s;
}

.submenu .watch-off:hover,
.card-info-watched.watch-off:hover {
	background-color: var(--button-main-color);
	color: #ffffff;
}

.submenu .watch-on,
.card-info-watched.watch-on {
	background-color: var(--button-main-color);
	color: #ffffff;
	transition: all .15s;
}

.submenu .watch-on:hover,
.card-info-watched.watch-on:hover {
	background-color: #ffffff;
	color: var(--button-main-color);
}

.submenu .list-off {
	background-color: #ffffff;
	color: var(--button-blue-color);
	transition: all .15s;
}

.submenu .list-off:hover {
	background-color: var(--button-blue-color);
	color: #ffffff;
}

.submenu .list-on {
	background-color: var(--button-blue-color);
	color: #ffffff;
	transition: all .15s;
}

.submenu .list-on:hover {
	background-color: #ffffff;
	color: var(--button-blue-color);
}

.btn-purple, .btn-purple-selected {
	width: 18em;
	height: 5.25em;
	font-size: 16px;
	border-radius: 0;
}
.btn-purple a {
	display: table;
	width: 100%;
	height: 100%;
	line-height: 100%;
	font-weight: bold;
	color: #783993!important;
}
.btn-purple a p, .btn-purple-selected a p, .btn-disabled p{
	display: table-cell;
	margin: 0;
	vertical-align: middle;
}
.btn-purple a:hover {
	color: #FFFFFF!important;
}

.btn-purple-selected a {
	display: table;
	width: 100%;
	height: 100%;
	line-height: 100%;
	font-weight: bold;
	color: #FFFFFF !important;
}

.purple-disabled {
	background-color: #808080 !important;
	border: 2px #291433 solid;
	transition: all .15s;
}
.purple-disabled:hover {
	color: #FFFFFF !important;
}

.btn-disabled {
	display: table;
	line-height: 100%;
	width: 18em;
	height: 5.25em;
	font-size: 16px;
	border-radius: 0;
	font-weight: bold;
	color: #FFFFFF !important;
}
.btn-disabled {
	background-color: #808080 !important;
	border: 2px #291433 solid;
	transition: all .15s;
}
.btn-disabled:hover {
	color: #FFFFFF !important;
}

/* === END === */
/*  SUB MENU  */
/* === END === */
/* ==========
    GUESS
========== */

/* == MAIN == */
div.guess{
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	background-color: #000000;
}

.guess .image{
	width: auto;
	height: auto;
}
.gallery .image{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2px;
}
.div-table{
	display: table;
	width: 100%;
	height: 100%;
	min-height: 100%;
	flex: 1;
}
.guess img{
	display: block;
	/*width: 100%;*/
	max-width: 100%;
	margin: 0 auto;
}

.guess .floater img{
	display: table-cell;
	vertical-align: bottom;
}

.guess .r-bottom {
	max-width: 135px;
	margin: 0 auto !IMPORTANT;
}
/* == END OF MAIN == */

.edit-favorite{
	width: 100%;
	text-align: center;
	font-size: 1.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
/* --- GALERY --- */
.gallery {
	width: 100%;
	height: 100%;
	background-color: #000000;
}
.gallery-item{
	position: relative;
	float: left;
	width: 20%;
	height: 10%;
	min-width: 16em;
	min-height: 10em;
	background-size: 100%;
	background: no-repeat;
}
.gallery-item p, .gallery-item a{
	display: none;
}
.gallery-item:hover p{
	display: block;
	position: relative;
	top: 0;
	left: 0;
	padding: 0.5em;
	width: 100%;
	background-color:rgba(255,255,255,0.3);
}

.gallery-item:hover a{
	margin: 0;
	display: block;
	position: absolute;
	text-align: center;
	padding: 0.5em;
	width: 20%;
	background-color:rgba(255,255,255,0.3);
}
.gallery-item:hover a.white{
	bottom: 0;
	left: 0;

}
.gallery-item:hover a.red{
	bottom: 0;
	right: 0;
}


/* --- FEED --- */
.feed-content {
	background-color: var(--content-color);
	width: 100%;
	height: 100%;
	padding-top: 1em;
}

.feed {
	max-width: 680px;
	margin: 0 auto;
	overflow: hidden;
}

.feed-link{
	color: var(--dark-color);
	font-weight: bold;
	text-decoration: none;
}

.feed-link:hover{
	color: var(--dark-color);
}

.feed-link-guess {
	background: var(--dark-color);
	color: var(--light-text-color);
	padding: 0.5em 1em;
	margin-left: 0.2em;
	font-weight: bold;
	text-decoration: none;
}

.feed-link-guess:hover{
	color: var(--light-color);
}

.feed-blog-link{
	color: var(--dark-color);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.feed-blog-link:hover{
	color: var(--light-color);
	text-decoration: underline;
}

.feed-row {
	float: left;
	background: #f9f9f9;
	width: 680px;
	border-bottom: 2px solid var(--dark-color);
	margin-bottom: 1em;
}

.feed-image {
	width: 100%;
}

.feed-row-content {
	padding: 2em;
}

.feed-title {
	font-weight: bold;
}

/* The history page reuses the feed card. Bootstrap's bare .badge is white
   text on nothing - invisible on the white card - so the Unwatch chip gets
   real colors, and stays text-sized next to the 1.5em bar buttons. */
.feed-row .search-item-buttons .badge-restore {
	float: left;
	font-size: 1em;
	padding: 0.9em 1em;
	color: var(--button-red-color);
	font-weight: bold;
}

.feed-row .search-item-buttons .badge-restore:hover {
	background-color: var(--button-red-color);
	color: #ffffff;
}

/* --- BLOG DETAIL --- */
.blog-tags,
.blog-categories {
	margin-top: 1em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
}

.blog-tags .badge,
.blog-categories .badge {
	background: var(--main-color);
	color: var(--light-text-color);
	padding: 0.3em 0.7em;
	border-radius: 0;
	font-size: 0.85em;
}

.blog-referred-title {
	margin-top: 1em;
}

.blog-referred-title a {
	color: var(--light-color);
	text-decoration: underline;
}

.blog-tags .badge,
.blog-categories .badge {
	text-decoration: none;
	transition: background 0.2s ease;
	cursor: pointer;
}

.blog-tags a.badge:hover,
.blog-categories a.badge:hover {
	background: var(--light-color);
}

/* --- FEED REACTIONS (uses .search-item-buttons + btn-red-search pattern) --- */

/* --- FEED TIME AGO --- */
.search-item-buttons .feed-time-ago {
	float: right;
	padding: 0.6em 1em;
	font-size: 1.2em;
	color: #999;
	font-style: italic;
}

/* --- READING TIME --- */
.blog-reading-time {
	margin-left: 1em;
	font-size: 0.9em;
	opacity: 0.8;
}

/* --- TABLE OF CONTENTS --- */
.blog-toc {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0;
	padding: 1em;
	margin-bottom: 1.5em;
}

.blog-toc summary {
	cursor: pointer;
	color: var(--light-text-color);
}

.blog-toc ul {
	list-style: none;
	padding-left: 0;
	margin: 0.5em 0 0;
}

.blog-toc li {
	padding: 0.2em 0;
}

.blog-toc li.toc-level-3 {
	padding-left: 1.5em;
}

.blog-toc a {
	color: var(--light-color);
	text-decoration: none;
}

.blog-toc a:hover {
	text-decoration: underline;
}

/* --- AUTHOR CARD --- */
.blog-author-card {
	margin-top: 1.5em;
}

.author-card-inner {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1em;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 0;
}

.author-card-avatar i {
	font-size: 2.5em;
	color: var(--light-color);
}

.author-card-info a {
	color: var(--light-color);
	text-decoration: none;
}

.author-card-info a:hover {
	text-decoration: underline;
}

.author-card-info p {
	margin: 0.3em 0 0;
	font-size: 0.9em;
	opacity: 0.8;
}

/* --- PREV/NEXT NAVIGATION --- */
.blog-prev-next {
	margin-top: 1.5em;
}

.prev-next-inner {
	display: flex;
	justify-content: space-between;
	gap: 1em;
}

.prev-post,
.next-post {
	flex: 1;
}

.next-post {
	text-align: right;
}

.prev-post a,
.next-post a {
	color: var(--light-color);
	text-decoration: none;
	font-size: 0.95em;
}

.prev-post a:hover,
.next-post a:hover {
	text-decoration: underline;
}

/* --- RELATED POSTS --- */
.blog-related-posts {
	margin-top: 1.5em;
}

.blog-related-posts h3 {
	margin-bottom: 1em;
}

.related-posts-grid {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}

.related-card {
	flex: 1;
	min-width: 180px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 0;
	overflow: hidden;
	text-decoration: none;
	color: var(--light-text-color);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.related-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.related-card-image {
	width: 100%;
	height: 120px;
	object-fit: cover;
}

.related-card-content {
	padding: 0.8em;
}

.related-card-content strong {
	display: block;
	font-size: 0.9em;
	margin-bottom: 0.3em;
}

.related-card-author {
	font-size: 0.8em;
	opacity: 0.7;
}

/* --- COMMENTS --- */
.blog-comments {
	margin-top: 1.5em;
}

.blog-comments h3 {
	margin-bottom: 1em;
}

.comment-form {
	margin-bottom: 1.5em;
}

.comment-form textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0;
	color: var(--light-text-color);
	padding: 0.8em;
	font-size: 0.95em;
	resize: vertical;
}

.comment-form textarea:focus {
	outline: none;
	border-color: var(--light-color);
}

.comment-submit-btn {
	margin-top: 0.5em;
	background: var(--light-color);
	color: var(--light-text-color);
	border: none;
	padding: 0.5em 1.2em;
	border-radius: 0;
	cursor: pointer;
	font-size: 0.9em;
	transition: background 0.2s ease;
}

.comment-submit-btn:hover {
	background: var(--main-color);
}

.comment-login-hint {
	font-size: 0.9em;
	opacity: 0.8;
	margin-bottom: 1em;
}

.comment-login-hint a {
	color: var(--light-color);
}

.comments-list {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.comment {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 0;
	padding: 1em;
}

.comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5em;
}

.comment-author {
	color: var(--light-color);
	text-decoration: none;
	font-weight: bold;
}

.comment-author:hover {
	text-decoration: underline;
}

.comment-date {
	font-size: 0.85em;
	opacity: 0.7;
}

.comment-body {
	font-size: 0.95em;
	line-height: 1.5;
}


/* --- UPLOAD --- */
.base-form{
	padding-top: 3em;
	max-width: 41em;
	margin: 0 auto;
}

.form-row {
	padding: 1em;
}
.form-row label{
	padding: 0.5em;
	width: 19em;
	text-align: left;
	font-weight: bold;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="date"],
.form-row select
{
	padding: 0.5em;
	width: 19em;
}
.form-row input[type="file"]{
	margin: 0;
	padding: 0.5em;
	width: 19em;
	float: right;
}
.form-row input[type="submit"]{
	width: 40em;
	height: 4em;
	font-weight: bold;
	color: #ffffff;
	background-color: var(--dark-color);
	border: none;
}
.form-row input[type="checkbox"] {
	width: 1.5em;
	height: 1.5em;
	margin-right: 2em;
}

#image-upload {
	margin: 0 auto;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	display: block;
	max-width: 41em;
}

.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 2;
	cursor: pointer;
}

.blur {
	filter: blur(2px);
	z-index: 10;
}

.loader {
	border: 16px solid var(--main-color); /* Light grey */
	border-top: 16px solid var(--dark-color); /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	position: absolute;
	left: 45%;
	top: 30%;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/*
==========
    BLOG
==========
*/
.blog-detail {
	width: 800px;
	margin: auto;
}
.blog-detail h1 {
	font-weight: bold;
	line-height: 4em;
}
.blog-detail p {
	margin-bottom: 1.25em;
	line-height: 1.6em;
	font-size: 18px;
}

.author {
	padding-bottom: 1em;
	float: right;
}

.hr-detail {
	width: 100%;
}

/* ==========
    Log IN
========== */
.register[type="submit"]{
	width: 100%;
	height: 100%;
	background-color: inherit;
	border: none;
	color: #ffffff;
	font-weight: bold;
}
.register[type="text"], .register[type="password"]{
	width: 16em;
	height: 2.5em;
	padding-left: 0.8em;
}


/* ==========
    ADMIN
========== */
.admin-content {
	margin: 1em;
}

.admin-content input {
	color: #0f0f0f;
	margin: 1em;
}
.admin-content label {
	margin: 1em;
}
.admin-content input[type="submit"] {
	color: inherit;
}

.cell{
	float: left;
	height: auto;
}
.guess-admin-gallery{
	position: relative;
	float: left;
	width: 20%;
	height: 10%;
	min-width: 16em;
	min-height: 15em;
	background-repeat: round;
}
.guess-admin-gallery .item, .guess-admin-gallery .item{
	display: block;
	width: 100%;
	padding: 0.2em 0.2em 0.2em 1em;
	margin: 0.2em;
	background-color: var(--dark-color);
}
.admin-action{
	display: block;
	text-align: center;
	margin: 0.2em;
	padding: 1em;
	color: var(--light-text-color);
}

.admin-action-small{
	padding: 0.2em;
}

.not-loaded{
	background-color: #cc2929;
}

.loaded{
	background-color: #009900;
}

.texy-editor{
	min-width: 800px;
	width: 100%;
	max-width: 1200px;
	height: 800px;
}

/* == User-Profile/Stats == */
.profile h3, .gallery h3{
	border-bottom: 1px solid #ddd;
	color: #ffff99;
	float: left;
	width: 100%;
}
.gallery h3 {
	padding-left: 1em;
}
.gallery p {
	padding-left: 1em;
}
.gallery .item{
	position: relative;
	display: block;
	border: 2px solid var(--dark-color);
	overflow: hidden;

	min-height: 250px;
	aspect-ratio: 4/3;

	background: rgba(51, 51, 51, 0.90) no-repeat;
	background-size: cover;
}
.gallery .item.green{
	border: 2px solid var(--green-color);
}
.gallery .light-color{
	border: 2px solid var(--light-color);
}
.profile img{
	min-height: 180px;
}
.profile p{
	padding-bottom: 1em;
}
.profile small{
	color: #d2ffd2;
}
.fb-login {
	display: block;
	padding: 1.5em;
	margin-bottom: 2em;
	font-weight: bold;
	max-width: 400px;
	background-color: var(--dark-color);
}
.fb-login img {
	margin-right: 2em;
}
/* == Favorites == */
.favorites{
	position: relative;
}
.favorites p{
	display: block;
	position: relative;
	top: 0;
	left: 0;
	padding: 0.5em;
	width: 100%;
	background-color:rgba(255,255,255,0.3);
}

.gallery .action{
	margin: 0;
	display: block;
	position: absolute;
	text-align: center;
	padding: 0.5em;
	background-color:rgba(255,255,255,0.3);
}
.gallery .action.white{
	bottom: 0;
	left: 0;
}
.gallery .action.red{
	bottom: 0;
	right: 0;
}
.watched-poster {
	width: 250px;
	margin-left: 3em;
	border: 8px solid #f6f6f6;
	-webkit-box-shadow: 0 0 20px 0 #666666;
	box-shadow: 0 0 20px 0 #666666;
}
.watched-remove {
	float: right;
	font-size: 20px;
}
.watched h2 {
	margin-bottom: 1em;
}

.sr-only {
	position: relative;
}

.watched-episode-link{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 400px;
	min-height: 225px;
	float: left;

	background: rgba(51, 51, 51, 0.90) no-repeat;
	background-size: cover;
}

.watched-episode-link .item-content {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	padding: 1em;
	background-color: rgba(51, 51, 51, 0.90);
}
/* == About == */
.about, .register, .profile, .settings, .blog{
	padding-left: 2em;
	padding-top: 1em;
	padding-right: 2em;
}
.about h3{
	font-weight: bold;
}
.about a{
	font-weight: bold;
}
img.about{
	padding: 0;
	margin: 0 auto;
	display: block;
	border: 3px solid var(--dark-color);
}

/* == Register == */
.register input, .settings input{
	border-radius: 0;
}
.register tr, .settings tr{
	padding-bottom: 1em;
	display: block;
}
.register th, .register td, .settings th, .settings td{
	width: 15em;
}
.register input[type="radio"], .settings input[type="radio"], .settings input[type="checkbox"]{
	margin: 1em;
}

/* == FORMS == */
.upload .required{
	border: 2px solid #990000;
}
.register .required{
	border: none;
}

/*
 *  VOTE
 */

.vote{
	list-style: none;
	padding-left: 0;
}

.vote li a{
	display: block;
	position: relative;
	min-width: 800px;
	max-width: 800px;
	text-decoration: none !IMPORTANT;
	background-color: #e6e6e6;
	padding: 1em;
	margin: 0.5em;
	z-index: 1;
}

.vote li a:before{
	content: " ";
	position: absolute;
	display: block;
	top: 0.5em;
	left: 0.5em;
	height: 2.3em;
	z-index: -1;
	background-color: #9595e6;
}

.vote li a:after{
	content: " ";
	position: absolute;
	display: block;
	top: 0.5em;
	left: 0.5em;
	width: 98%;
	height: 2.3em;
	z-index: -2;
	background-color: #d6d6d6;
}

.vote li a p{
	margin: 0 !IMPORTANT;
	padding: 0 !IMPORTANT;
}

.voteLink{
	color: #FFFFFF !IMPORTANT;
}

/*
 *  Calendar
 */

.calendar .day .top-row{
	width: 100%;
	background-color: #3c5a92;
	padding: 1em 1em 1em 3em;
	font-weight: bold;
	float: left;
}
.calendar .today {
	border-bottom: solid 3px #49cc49;
}
.calendar .day .top-row big{
	font-size: 1.5em;
}
.calendar .item{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 400px;
	min-height: 225px;
	float: left;

	background: rgba(51, 51, 51, 0.90) no-repeat;
	background-size: cover;
}
.calendar .item-content {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	padding: 1em;
	background-color: rgba(51, 51, 51, 0.70);
}
.calendar .item:hover{
	text-decoration: none;
}
.calendar .item p{
	display: block;
	min-height: 1px;
}
.calendar .item p:first-child{
	margin-bottom: 0.5em;
	border-bottom: 2px #ffffff dotted;
}
.calendar .first-episode{
	border: 2px #49cc49 solid;
}
.calendar .last-episode{
	border: 2px #cc5252 solid;
}
.calendar .name{
	font-weight: bold;
}
.calendar p .right{
	display: block;
	float: right;
}

.calendar .calendar-item {
	position: relative;
	display: block;
	margin: 1px;
	max-width: 600px;
	max-height: 338px;
	width: 33%;
	height: auto;
	min-width: 400px;
	min-height: 225px;
	float: left;

}
.calendar .calendar-item .calendar-item-buttons, .watched-item-buttons{
	float: left;
	width: 100%;
	background-color: rgba(26, 26, 26, 0.90);
}

.calendar .calendar-item .calendar-item-buttons a, .watched-item-buttons a{
	padding: 0.6em 1em 0.6em 0.6em;
	float: left;
	height: 100%;
	font-weight: bold;
	text-decoration: none;
	font-size: 18px;
	transition: all .15s;
}
.calendar .calendar-item .calendar-item-buttons .btn-purple-calendar, .btn-purple-watched{
	background-color: #ffffff;
	border: 2px #532866 solid;
	color: #783993 !important;
}
.calendar .calendar-item .calendar-item-buttons a span, .watched-item-buttons a span{
	padding-right: 0.6em;
	top: 3px
}
.calendar .calendar-item .calendar-item-buttons .btn-purple-calendar:hover, .btn-purple-watched:hover {
	background-color: #783993;
	border: 2px #532866 solid;
	color: #FFFFFF !important;
}

.calendar .calendar-item .calendar-item-buttons .btn-purple-selected-calendar, .btn-purple-selected-watched {
	background-color: #783993;
	border: 2px #532866 solid;
	color: #FFFFFF;
}

.calendar-item-buttons .btn-red-calendar {
	background-color: #ffffff;
	border: 2px #662a2a solid;
	color: #993f3f !important;
	float: right !important;
}

.calendar-item-buttons .btn-red-calendar:hover {
	background-color: #993f3f;
	border: 2px #662a2a solid;
	color: #FFFFFF !important;
}

.calendar-item-buttons .btn-red-selected-calendar {
	background-color: #993f3f;
	border: 2px #662a2a solid;
	color: #FFFFFF;
	float: right !important;
}
/*
 * Blog
 */

.blog .comment{
	margin: 1em;
	padding: 1em;
	display: block;
	width: 50%;
	background-color: #527abf;
}
.blog #comment-form{
	min-width: 300px;
}
.blog .comments a{
	text-decoration: none;
}
.blog .form{
	margin-bottom: 10em;
}
.blog form label{
	padding: 1em;
}
.blog form input[type="submit"]{
	width: 8em;
	height: 2.5em;
	font-weight: bold;
	color: #ffffff;
	background-color: var(--dark-color);
	border: none;
	margin-top: 0.5em;
}


/* COLORS */
.white, .white:hover{
	color: #ffffff !IMPORTANT;
}
.red, .red:hover{
	color: #e63c41 !IMPORTANT;
}
.green, .green:hover{
	color: #00ff15 !IMPORTANT;
}
.blue, .blue:hover{
	color: #0000ff !IMPORTANT;
}
.black, .black:hover{
	color: #000000 !IMPORTANT;
}
.light-green, .light-green:hover{
	color: #d2ffd2 !IMPORTANT;
}
.light-yellow, .light-yellow:hover{
	color: #ffff99!IMPORTANT;
}
.light-red, .light-red:hover{
	color: #ffbbbb !IMPORTANT;
}
.dark-blue, .dark-blue:hover{
	color: var(--dark-color) !IMPORTANT;
}

/*
 * VIDEO
 */
/* ** SEARCH ** */
.search-item {
	/* Offscreen cards are neither laid out nor painted - a long grid on a
	   phone otherwise re-renders every card on each change. */
	content-visibility: auto;
	contain-intrinsic-size: auto 420px;
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 33.33%;
	height: auto;
	float: left;
	border-bottom: solid 1px var(--dark-color);
	border-right: solid 1px var(--dark-color);
}

/* The card art is a 16:9 backdrop. The cover used to be a flat 225px tall whatever the
   column was worth, so on a wide screen a 578px card cropped the backdrop to 2.57:1 -
   a letterbox slice with the title text crushed against it. Deriving the height from the
   width instead keeps every card the shape of the image it shows, and the old 225px
   stays on as a floor so the narrow two-up columns do not collapse shorter than before. */
.search-item .cover-image{
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 225px;
	float: left;

	background: rgba(51, 51, 51, 0.90) no-repeat;
	background-size: cover;
}

.search-item .cover-image:hover {
	text-decoration: none;
}

.search-item .cover-image span {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	padding: 1em;
	background-color: rgba(51, 51, 51, 0.90);
}

/* The rule above pins every cover span to the bottom edge; badge spans
   must undo that to sit in the top corners. */
.search-item .cover-image .cover-badges {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0.5em;
	pointer-events: none;
}

.search-item .cover-image .cover-badges span {
	position: static;
	width: auto;
	padding: 0.2em 0.6em;
	background-color: rgba(51, 51, 51, 0.90);
	color: var(--light-text-color);
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.search-item .cover-image .cover-badges .cover-rating-badge .bi {
	color: var(--light-color);
}

.search-item-buttons {
	float: left;
	width: 100%;
	background-color: #ffffff;
	position: relative;
	z-index: 1;
}

.search-item-buttons a {
	padding: 0.6em 1em 0.6em 1em;
	float: left;
	font-weight: bold;
	text-decoration: none;
	font-size: 1.5em;
	transition: all .15s;
}

.search-item-buttons a span {
	padding-right: 0.6em;
	top: 3px
}

/* Card variant of the bar: one flex row. Scoped with a modifier so the Feed and
   Blog bars that also use .search-item-buttons keep their float layout.

   The buttons shrank to 1.1em when the five rating stars still sat in the bar and
   wrapped to a second row (#4277). The stars moved into an absolutely positioned
   popover in that same change, so the bar holds three items and can carry the
   full-size buttons the seeding cards use. */
.search-item-buttons.title-card-buttons {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

/* Only the horizontal breathing room: the icon and the bar's height are untouched. A recommend
   card carries five controls, and at full 1em side padding they overrun the narrow columns. */
.search-item-buttons.title-card-buttons a {
	float: none;
	padding-left: 0.7em;
	padding-right: 0.7em;
}

/* Between these two the column is at its narrowest - two-up from 901px, and three-up from 1101px
   before the viewport has grown enough to pay for it - and five controls only fit tight. Outside
   the band the card is wide enough for the buttons to breathe: a full-width card on a phone has
   more room than a third of a 1200px desktop. */
@media (min-width: 901px) and (max-width: 1400px) {
	.search-item-buttons.title-card-buttons a {
		padding-left: 0.3em;
		padding-right: 0.3em;
	}
}

/* Hiding a title - dismiss a recommendation, skip it while seeding - sits apart from the buttons
   that add something, hard against the right edge. The rating rides along with it when both are
   present: the auto margin belongs to whichever of them comes first, or they would each claim a
   share of the gap and end up spread across the bar. */
.title-card-buttons .card-buttons-trailing {
	margin-left: auto;
}

.title-card-buttons .card-buttons-trailing ~ .card-buttons-trailing {
	margin-left: 0;
}

/* --- CARD INFO ROLL-DOWN ---
   One panel per card, rendered as the card's sibling and moved by main.js below the last card of
   the row it belongs to, so it spans the full width instead of splitting the row. Only one is
   open at a time. */
.card-info-panel {
	display: none;
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	box-sizing: border-box;
	padding: 1.2em 1.5em;
	background-color: var(--dark-color);
	color: var(--light-text-color);
	border: 2px solid var(--button-main-color);
}

.card-info-panel.open {
	display: block;
}

/* The seam: the panel's top border drops out across the width of the card that opened it, and the
   card drops its bottom border to match, so the two read as one shape rather than two boxes that
   happen to touch. The script measures the span, and leaves it at zero when the card does not sit
   flush against the panel - a shorter card in a taller row would otherwise leave a hole. */
.card-info-panel.open::before {
	content: '';
	position: absolute;
	top: -2px;
	left: var(--card-info-seam-left, 0);
	width: var(--card-info-seam-width, 0);
	height: 2px;
	background-color: var(--dark-color);
}


/* Two columns, not three: narrowing text makes it taller, and measuring three showed the panel
   grow rather than shrink. What the title is on the left, who made it on the right - and the
   right-hand column is the one that loads late, so its arrival cannot push the left one down.

   auto-fit rather than a breakpoint: the panel is as wide as the row it spans, which already
   varies with the column count, so let the columns follow the space they are given. */
.card-info-gallery-more {
	display: inline-block;
	margin-bottom: 1.2em;
}

.card-info-columns {
	display: grid;
	/* min() so the track can fall below its own minimum when the panel is narrower than one
	   column - without it a phone gets a 22em track inside a 19em panel and scrolls sideways. */
	grid-template-columns: repeat(auto-fit, minmax(min(22em, 100%), 1fr));
	gap: 0 2em;
	align-items: start;
	margin-bottom: 0.5em;
}

.card-info-column {
	min-width: 0;
}

.card-info-summary {
	margin: 0 0 0.6em 0;
	font-weight: bold;
	color: var(--button-main-color);
}

.card-info-facts {
	margin: 0 0 0.8em 0;
}

.card-info-fact {
	display: inline-block;
	margin: 0 0.3em 0.3em 0;
	padding: 0.2em 0.6em;
	background-color: rgba(255, 255, 255, 0.12);
	font-size: 0.85em;
}

.card-info-overview {
	margin: 0 0 0.8em 0;
	max-width: 70em;
	line-height: 1.5;
}

.card-info-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 1em 0;
}

.card-info-shot {
	display: block;
	width: 10em;
	height: 5.6em;
	background-color: rgba(255, 255, 255, 0.08);
	background-size: cover;
	background-position: center;
	transition: opacity .15s;
}

.card-info-shot:hover {
	opacity: 0.75;
}

.card-info-credits {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 2em;
	margin: 0 0 1em 0;
}

.card-info-credits em {
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85em;
	opacity: 0.7;
	padding-right: 0.4em;
}

.card-info-people {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 1.5em;
	margin: 0 0 1em 0;
	padding: 0;
	list-style: none;
}

.card-info-people li {
	min-width: 14em;
}

.card-info-column .card-info-people,
.card-info-column .card-info-related {
	display: block;
}

.card-info-column .card-info-people li {
	min-width: 0;
	margin-bottom: 0.2em;
}

.card-info-column .card-info-related li {
	margin-bottom: 0.4em;
}

.card-info-more {
	margin-bottom: 0.5em;
}

.card-info-empty {
	margin: 0 0 1em 0;
	opacity: 0.6;
}

/* --- CARD IMAGE LIGHTBOX ---
   Above everything, including the mobile tab bar, because it is a modal view of one image. */
.card-shot-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 3000;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 12, 24, 0.92);
}

.card-shot-overlay.open {
	display: flex;
}

.card-shot-full {
	max-width: 92vw;
	max-height: 88vh;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

.card-shot-button {
	position: absolute;
	padding: 0.1em 0.5em;
	border: 0;
	background-color: transparent;
	color: var(--light-text-color);
	font-size: 3em;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity .15s;
}

.card-shot-button:hover {
	opacity: 1;
}

.card-shot-close {
	top: 0.2em;
	right: 0.4em;
}

.card-shot-prev {
	left: 0.2em;
}

.card-shot-next {
	right: 0.2em;
}

/* One image has nowhere to step to. */
.card-shot-overlay.card-shot-single .card-shot-prev,
.card-shot-overlay.card-shot-single .card-shot-next {
	display: none;
}

.card-info-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0 0 1em 0;
}

/* The page's own reasons for showing this card, told apart from the title's plain facts. */
.card-info-fact.card-info-reason {
	background-color: var(--button-main-color);
	color: #ffffff;
}

.card-info-section-label {
	margin: 0 0 0.5em 0;
	padding-bottom: 0.3em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85em;
	opacity: 0.7;
}

/* Inside a column every section after the first needs air above it. */
.card-info-column .card-info-section-label:not(:first-child) {
	margin-top: 1.2em;
}

.card-info-related {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.5em;
	margin: 0 0 0.8em 0;
	padding: 0;
	list-style: none;
}

/* Everything you can click in the panel is a button, in the same white-fills-with-colour
   language the card's own action bar uses. */
.card-info-related a,
.card-info-more {
	display: inline-block;
	padding: 0.45em 0.9em;
	background-color: #ffffff;
	color: var(--dark-color);
	font-weight: bold;
	text-decoration: none;
	transition: all .15s;
}

.card-info-related a:hover,
.card-info-more:hover {
	background-color: var(--button-main-color);
	color: #ffffff;
	text-decoration: none;
}

/* The row is a link and a watched toggle sitting together, so they read as one control rather
   than two things that happen to be adjacent. */
.card-info-related li {
	display: flex;
	align-items: stretch;
}

/* Its colours come from the shared watch-off/watch-on rules; this is only its shape in the row. */
.card-info-watched {
	display: flex !IMPORTANT;
	align-items: center;
	padding: 0.45em 0.7em !IMPORTANT;
	border-left: 1px solid rgba(0, 35, 71, 0.15);
}

.card-info-meta {
	padding-left: 0.5em;
	opacity: 0.6;
	font-weight: normal;
	font-size: 0.9em;
}

/* The open card keeps a visible tie to its panel, which sits below the whole row rather than
   against the card. An overlay rather than an outline: the cover and the button bar fill the card
   and paint over anything drawn in the card's own layer. */
.search-item.card-info-open::after {
	content: '';
	position: absolute;
	/* An absolutely positioned child measures from the padding box, which stops short of the card's
	   own 1px right and bottom borders - the overlay has to reach the border box, or it never meets
	   the panel below it. */
	inset: 0 -1px -1px 0;
	border: 2px solid var(--button-main-color);
	pointer-events: none;
	z-index: 3;
}

/* Open, and sitting flush on its panel: the bottom edge is the seam, so it carries no border and
   the outline runs on into the panel. Must follow the rule above, which sets all four sides. */
.search-item.card-info-joined::after {
	border-bottom-color: transparent;
}

/* Without these it falls through to the global a:hover, which is near-white - invisible on the
   white bar. Hover fills dark and open fills orange, deliberately different: orange means the
   panel is open and has to stay distinguishable from merely pointing at the button. Orange also
   matches the outline the open card carries. */
.search-item-buttons .btn-card-info {
	background-color: #ffffff;
	color: var(--dark-color);
}

/* Open, the button is the control that closes the panel - so it shows a close. */
.btn-card-info .card-info-icon-open,
.btn-card-info.active .card-info-icon-closed {
	display: none;
}

.btn-card-info.active .card-info-icon-open {
	display: inline-block;
}

.search-item-buttons .btn-card-info:hover {
	background-color: var(--dark-color);
	color: #ffffff;
}

.btn-card-info.active,
.search-item-buttons .btn-card-info.active,
.search-item-buttons .btn-card-info.active:hover {
	background-color: var(--button-main-color);
	color: #ffffff;
}

.search-item-buttons .btn-purple-search {
	background-color: #ffffff;
	color: var(--button-main-color);
}
.search-item-buttons .btn-purple-search:hover {
	background-color: var(--button-main-color);
	color: #FFFFFF !important;
}
.search-item-buttons .btn-purple-selected-search {
	background-color: var(--button-main-color);
	color: #FFFFFF;
}

.search-item-buttons .btn-blue-search {
	background-color: #ffffff;
	color: var(--button-blue-color);
}
.search-item-buttons .btn-blue-search:hover {
	background-color: var(--button-blue-color);
	color: #FFFFFF !important;
}
.search-item-buttons .btn-blue-selected-search {
	background-color: var(--button-blue-color);
	color: #FFFFFF;
}

.search-item-buttons .btn-green-search {
	background-color: #ffffff;
	color: var(--button-green-color) !important;
	float: right;
}
.search-item-buttons .btn-green-search:hover {
	background-color: var(--button-green-color);
	color: #FFFFFF !important;
}
.search-item-buttons .btn-green-selected-search {
	background-color: var(--button-green-color);
	color: #FFFFFF;
}

.search-item-buttons .btn-red-search {
	background-color: #ffffff;
	color: var(--button-red-color) !important;
}

.search-item-buttons .btn-red-search:hover {
	background-color: var(--button-red-color);
	color: #FFFFFF !important;
}

.search-item-buttons .btn-red-selected-search {
	background-color: var(--button-red-color);
	color: #FFFFFF;
}


.search-item-buttons .btn-dark-search {
	background-color: #ffffff;
	color: var(--button-dark-color) !important;
	float: right;
}

.search-item-buttons .btn-dark-search:hover {
	background-color: var(--button-dark-color);
	color: #FFFFFF !important;
}

.search-item-buttons .btn-dark-selected-search {
	background-color: var(--button-dark-color);
	color: #FFFFFF;
	float: right;
}

.search-item-buttons .btn-black-search {
	background-color: #ffffff;
	color: var(--button-black-color) !important;
	float: right;
}

.search-item-buttons .btn-black-search:hover {
	background-color: var(--button-black-color);
	color: #FFFFFF !important;
}

.search-item-buttons .btn-black-selected-search {
	background-color: var(--button-black-color);
	color: #FFFFFF;
	float: right;
}



/* --- BLOG DETAIL ACTION BAR --- */
.blog-action-bar {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.8em 0;
	margin: 0.5em 0;
}

.blog-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.5em 1em;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
	border-radius: 0;
	transition: all 0.3s;
}

.blog-like-btn {
	background-color: #ffffff;
	color: var(--button-red-color) !important;
	border: 2px solid var(--button-red-color);
}

.blog-like-btn:hover {
	background-color: var(--button-red-color);
	color: #ffffff !important;
}

.blog-like-btn.active {
	background-color: var(--button-red-color);
	color: #ffffff !important;
}

.blog-share-icons {
	display: flex;
	align-items: center;
	gap: 0.3em;
	margin-left: auto;
}

.blog-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	font-size: 1em;
	color: var(--button-dark-color) !important;
	text-decoration: none;
	border-radius: 50%;
	transition: all 0.3s;
	background: transparent;
}

.blog-share-btn:hover {
	background-color: var(--button-dark-color);
	color: #ffffff !important;
}

/* The list pages' filter form in the submenu column. Several fields rather than one, so
   they stack instead of riding on a line, but the fields and the submit are the same
   .submenu-input and .submenu-button the rest of the column uses. */
.title-list-filter {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	padding: 1em;
}

.title-list-filter label {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	font-weight: bold;
}

/* The pair of year fields share one line, so they are the one place a field is not full
   width. Qualified with the element the rule above it uses, or that one - one class and
   one type - would outrank this and the two fields would stack. */
.title-list-filter label.title-list-filter-years {
	flex-direction: row;
	align-items: center;
	gap: 0.4em;
}

.title-list-filter-years .submenu-input {
	flex: 1;
	min-width: 0;
}

/* One card per row on phones and small tablets, two on narrow desktops.

   The full-width point used to be 700px, but the sidebar is still on screen there and takes most
   of it: a 768px window left each card 167px, too narrow for the action bar to lay out, let alone
   for the cover to be worth looking at, and far too narrow for the five controls a recommend card
   carries. */
@media (max-width: 1100px) {
	.search-item {
		width: 50%;
	}
}

@media (max-width: 900px) {
	.search-item {
		width: 100%;
	}
}

/* ** /SEARCH ** */

.menuToggle{
	position: absolute;
	padding-bottom: 5px;
	bottom: 0;
	width: 8em;
}

.hidden {
	display: none;
}

.search {
	min-height: 1024px;
	height: auto;
	width: 100%;
	max-width: 100%;
	background-size: contain;
	float: left;
}

.content-detail {
	min-height: 1024px;
	height: 100%;
	max-width: 100%;
	padding: 2em 2em 2em;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: var(--content-color);
}

.video {
	min-height: 1024px;
	height: fit-content;
	max-width: 100%;
	padding: 20em 2em 10em;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: var(--content-color);
}
.season-list, .season, .episode-list{
	height: auto;
}

.video a {
	color: #cc5252;
	text-decoration: none;
}

/* Blog detail content links — override .video a (#cc5252) to brand orange */
.video.detail .description a,
.video.detail .tagline a,
.video.detail .author a {
	color: var(--light-color);
}

.video.detail .description a:hover,
.video.detail .tagline a:hover,
.video.detail .author a:hover {
	text-decoration: underline;
}

.video .content, .content-detail .content {
	padding: 1em;
	color: #222;
	overflow: visible;
	background: rgba(246, 246, 246, 0.92);
}

.video .media {
	overflow: visible;
}

.video img.poster {
	display: block;
	position: relative;
	width: 300px;
	height: auto;
	top: -200px;
	border: 8px solid #f6f6f6;
	float: left;
	-webkit-box-shadow: 0 0 20px 0 #666666;
	box-shadow: 0 0 20px 0 #666666;
}

.video h1 {
	padding-left: 1em;
	font-weight: bold;
}

.video .year {
	margin-left: 1em;
	font-size: 20px;
	color: #777;
}

.video .aliases {
	padding-left: 1em;
	padding-bottom: 0.4em;
}

.video .tagline {
	padding-left: 1em;
	font-size: 0.8em;
	font-style: italic;
}

.video h4 {
	font-weight: bold;
}

.video .description {
	padding-left: 1em;
}

.trailer iframe {
	width: 100%;
	height: 500px;
	opacity: 1;
}

iframe.heureka {
	margin: 0 auto;
}

li.heureka {
	width: 100%;
}

/** season list */

.img-season-list {
	display: block;
	width: 300px;
	height: auto;
	border: 8px solid #f6f6f6;
	float: left;
	-webkit-box-shadow: 0 0 20px 0 #666666;
	box-shadow: 0 0 20px 0 #666666;
}

.season-list .col-md-4, .season .col-md-4, .episode-list .col-md-4{
	min-width: 320px;
}

.glyphicon-refresh-animate {
	-animation: spin .7s infinite linear;
	-webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

/* ===           === */
/*  COOKIE CONSENT   */
/* ===           === */

.cookie-consent {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 35, 71, 0.95);
	z-index: 9999;
	padding: 1em;
	border-top: 2px solid var(--light-color);
}

.cookie-consent-content {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2em;
	flex-wrap: wrap;
}

.cookie-consent-text {
	color: var(--light-text-color);
	font-size: 1em;
}

.cookie-consent-button {
	background-color: var(--button-main-color);
	color: var(--light-text-color);
	border: none;
	padding: 0.5em 2em;
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
	border-radius: 0;
}

.cookie-consent-button:hover {
	background-color: var(--light-color);
	color: var(--dark-color);
}

/* Stats & Leaderboard */
.watchtime-explainer {
	margin: 0 0 1em;
	opacity: 0.8;
	max-width: 60em;
}

.stats-overview {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1em;
	margin-bottom: 2em;
	padding: 1em 0;
}

.stat-card {
	background: var(--dark-color);
	border: 1px solid rgba(111, 66, 193, 0.25);
	border-radius: 0;
	padding: 1.2em 1em;
	text-align: center;
}

.stat-card h3 {
	margin: 0 0 0.3em;
	font-size: 0.8em;
	color: var(--light-text-color);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.stat-card .stat-value {
	margin: 0;
	font-size: 1.8em;
	font-weight: bold;
	color: var(--light-color);
}

/* Stat cards on light background (UserStatistics) */
.content-detail .stat-card {
	background: rgba(0, 51, 102, 0.1);
	border: 1px solid rgba(0, 51, 102, 0.2);
}

.content-detail .stat-card h3 {
	color: var(--dark-color);
}

.content-detail .stat-card .stat-value {
	color: var(--light-color);
}

.stats-section {
	margin: 2em 0;
}

.stats-section h2 {
	margin-bottom: 0.8em;
	font-size: 1.3em;
	color: var(--light-text-color);
	border-bottom: 2px solid var(--purple-color);
	padding-bottom: 0.4em;
}

.leaderboard-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1em;
}

.leaderboard-table thead th {
	text-align: left;
	padding: 0.6em 0.8em;
	border-bottom: 2px solid var(--border-color);
	font-size: 0.85em;
	text-transform: uppercase;
	color: var(--light-text-color);
}

.leaderboard-table tbody tr {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.leaderboard-table tbody tr:nth-child(even) {
	background: rgba(0, 35, 71, 0.3);
}

.leaderboard-table tbody tr:hover {
	background: rgba(0, 51, 102, 0.4);
}

.leaderboard-table td {
	padding: 0.6em 0.8em;
}

.leaderboard-table td.rank {
	width: 40px;
	text-align: center;
	font-weight: bold;
}

.leaderboard-table td.value {
	text-align: right;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
	color: var(--light-color);
}

.leaderboard-table tr.gold td.rank {
	color: #ffd700;
	font-size: 1.2em;
}

.leaderboard-table tr.silver td.rank {
	color: #c0c0c0;
	font-size: 1.1em;
}

.leaderboard-table tr.bronze td.rank {
	color: #cd7f32;
	font-size: 1.05em;
}

.leaderboard-table a {
	color: var(--light-text-color);
	text-decoration: none;
}

.leaderboard-table a:hover {
	color: var(--light-color);
	text-decoration: underline;
}

.guess-list {
	list-style: none;
	padding: 0;
}

.guess-list li {
	padding: 0.4em 0;
	border-bottom: 1px solid var(--border-color);
}

.guess-list li a {
	color: var(--light-color);
	text-decoration: none;
}

.guess-list li a:hover {
	text-decoration: underline;
}

/* Leaderboard tabs */
.leaderboard-tabs {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0 0 1.5em;
	gap: 0;
	border-bottom: 2px solid var(--border-color);
	overflow-x: auto;
}

.leaderboard-tabs li {
	padding: 0.7em 1em;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.6);
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.2s, border-color 0.2s;
	white-space: nowrap;
	font-size: 0.9em;
}

.leaderboard-tabs li:hover {
	color: var(--light-color);
}

.leaderboard-tabs li.active {
	color: var(--light-text-color);
	border-bottom-color: var(--purple-color);
	font-weight: bold;
}

.leaderboard-tab-content {
	display: none;
}

.leaderboard-tab-content.active {
	display: block;
}

.btn-leaderboard {
	display: inline-block;
	background: var(--button-main-color);
	color: var(--light-text-color);
	padding: 0.6em 1.5em;
	border-radius: 0;
	text-decoration: none;
	font-weight: bold;
	margin-right: 0.5em;
}

.btn-leaderboard:hover {
	background: var(--light-color);
	color: var(--dark-color);
	text-decoration: none;
}

.btn-leaderboard + .btn-leaderboard {
	margin-left: 0.5em;
}

/* Top 3 row highlights */
.leaderboard-table tr.gold {
	background: rgba(255, 215, 0, 0.08);
}

.leaderboard-table tr.silver {
	background: rgba(192, 192, 192, 0.06);
}

.leaderboard-table tr.bronze {
	background: rgba(205, 127, 50, 0.06);
}

/* Light background overrides (content-detail pages) */
.content-detail .stats-section h2,
.content-detail .stats-section h3 {
	color: var(--dark-color);
	border-bottom-color: var(--purple-color);
}

.content-detail .leaderboard-table a {
	color: var(--dark-color);
}

.content-detail .leaderboard-table a:hover {
	color: var(--light-color);
}

.content-detail .leaderboard-table td.value {
	color: var(--light-color);
}

.content-detail .leaderboard-table thead th {
	color: var(--dark-color);
}

.content-detail .btn-leaderboard {
	margin-bottom: 0.5em;
}

/* Reduce min-height for stats/leaderboard content */
.search:has(.stats-overview),
.search:has(.leaderboard-tabs) {
	min-height: auto;
	padding-bottom: 2em;
}

.content-detail:has(.stats-overview) {
	min-height: auto;
}

/* Rating on title cards: one star trigger; the five steps sit in a popover
   that opens on hover (desktop) or on a tap of the trigger (touch). */
.title-rating {
	position: relative;
	display: inline-flex;
	gap: 0.15em;
	align-items: center;
}

.title-rating-trigger {
	color: var(--light-text-color);
	opacity: 0.5;
	line-height: 1;
	text-decoration: none;
}

.title-rating-trigger:hover,
.title-rating-active .title-rating-trigger {
	color: var(--button-main-color);
	opacity: 1;
}

.search-item-buttons .title-rating-trigger .title-rating-value {
	font-size: 0.75em;
	padding: 0 0 0 0.25em;
	top: 0;
}

.title-rating-picker {
	display: none;
	position: absolute;
	bottom: 100%;
	right: 0;
	align-items: center;
	background-color: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
	z-index: 3;
}

@media (hover: hover) {
	.title-rating:hover .title-rating-picker {
		display: inline-flex;
	}
}

.title-rating:focus-within .title-rating-picker {
	display: inline-flex;
}

.title-rating.open .title-rating-picker {
	display: inline-flex;
}

.title-rating-step {
	color: var(--light-text-color);
	opacity: 0.35;
	line-height: 1;
	text-decoration: none;
	border-radius: 0;
}

/* Steps stay compact inside the popover; this outweighs the bar-level
   button sizing rules. */
.search-item-buttons .title-rating-picker a {
	font-size: 1em;
	padding: 0.3em 0.25em;
}

.title-rating-step:hover,
.title-rating-step-active {
	color: var(--button-main-color);
	opacity: 1;
}

/* Square corners everywhere.
   Bootstrap ships a 0.375rem default on .btn and friends via its own variables; spameri's design
   language is square, so the tokens are flattened here rather than editing vendor CSS. */
:root {
	--bs-border-radius: 0;
	--bs-border-radius-sm: 0;
	--bs-border-radius-lg: 0;
	--bs-border-radius-xl: 0;
	--bs-border-radius-2xl: 0;
	--bs-border-radius-pill: 0;
}

.btn,
.form-control,
.form-select,
.card,
.alert,
.badge,
.dropdown-menu,
.modal-content,
.list-group,
.input-group-text {
	border-radius: 0;
}


/* ===      === */
/*  TITLE PAGES */
/* ===      === */
/* A movie, a show, a season, an episode, and the pages under each of them. Two looks the site
   already has carry them all: the blog detail's hero for the overview pages, and the statistics
   page's light panel for everything else - so a title's pages read as one set on the same card
   rather than as one design per idea. The images page is the guess gallery's grid, tile for tile. */

/* == COLUMN == */
/* Under the column's heading: what it belongs to, and the way there. */
.submenu-context{
	margin: -0.6em 0 0.9em;
	text-align: center;
	font-size: 0.9em;
	color: var(--light-text-color);
}

.submenu-context a{
	color: var(--light-text-color);
	font-weight: bold;
	text-decoration: none;
}

.submenu-context a:hover{
	color: var(--light-color);
	text-decoration: none;
}

.submenu-context-sep{
	padding: 0 0.4em;
	opacity: 0.6;
}

/* A part-watched show or season: how far along, as a bar across the tile's foot. Not a faded
   tile - faded reads as disabled, and this one is anything but. */
.submenu .watch-part{
	position: relative;
	overflow: hidden;
}

.submenu .watch-part::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 0.35em;
	width: var(--watched-progress, 0%);
	background-color: var(--button-main-color);
}

/* == HERO == */
/* The blog's hero was cut for an article: a contained backdrop above the fold and a card that
   overlaps its lower edge, with a kilopixel of minimum height to scroll past. A title page has the
   whole page under it, so the hero takes only the height its card needs, and the backdrop covers
   it - contained, it is a strip across the top of a phone with the card floating on blue below. */
.video.title-hero{
	min-height: 0;
	padding: 11em 2em 2em;
	background-size: cover;
	background-position: center 20%;
}

/* The poster the old detail page hung over the backdrop's lower edge, hung the same way. A
   negative margin rather than the original relative offset: the offset moved only the paint, so
   the poster ran on under the card by however far it had been lifted. The margin moves the box. */
.title-hero img.poster{
	top: 0;
	margin: -9em 2em 0.5em 0;
}

/* The card contains its poster - otherwise the poster runs out under it whenever the text beside
   it is shorter than the poster is tall. */
.title-hero .media::after{
	content: '';
	display: block;
	clear: both;
}

/* What this belongs to, over its heading: the show over a season, both over an episode. */
.video .title-hero-context{
	margin: 0.6em 0 0;
	padding-left: 2em;
	font-size: 0.95em;
	color: #666666;
}

.video .title-hero-context a{
	color: var(--light-color);
	font-weight: bold;
	text-decoration: none;
}

.video .title-hero-context a:hover{
	text-decoration: underline;
}

.title-hero-context-sep{
	padding: 0 0.3em;
}

/* The facts in a label-over-value grid under the overview, labelled in the same small capitals
   the stat cards label themselves with. */
.title-facts{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
	gap: 0.9em 1.5em;
	margin: 1.2em 0 0;
	padding: 1.2em 0 0 1.25em;
	border-top: 1px solid rgba(0, 35, 71, 0.15);
}

.title-facts div{
	min-width: 0;
}

.title-facts dt{
	margin: 0;
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666666;
}

.title-facts dd{
	margin: 0.15em 0 0;
	font-weight: bold;
	color: #222222;
	overflow-wrap: anywhere;
}

/* Outside links and the people who have seen a title, as dark chips. */
.title-links,
.title-chips{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 1.2em 0 0;
}

.title-links{
	padding-left: 1.25em;
}

.title-chips{
	margin-top: 0;
}

.title-links-label{
	margin-right: 0.5em;
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666666;
}

.video .title-links a,
.title-chips a{
	display: inline-block;
	padding: 0.4em 0.9em;
	background-color: var(--dark-color);
	color: var(--light-text-color);
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
}

.video .title-links a:hover,
.title-chips a:hover{
	background-color: var(--button-main-color);
	color: #ffffff;
	text-decoration: none;
}

/* Where to go next from an overview - a season's episodes, the episode either side - as the
   statistics page's own buttons, and the quieter steps as plain links beside them. */
.title-hero-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	margin: 1.4em 0 0;
	padding-left: 1.25em;
}

.video .title-hero-actions .btn-leaderboard{
	margin: 0;
	color: var(--light-text-color);
}

.video .title-hero-actions .btn-leaderboard:hover{
	color: var(--dark-color);
}

.video .title-hero-actions .title-hero-step{
	color: var(--light-color);
	font-weight: bold;
	text-decoration: none;
}

.video .title-hero-actions .title-hero-step:hover{
	text-decoration: underline;
}

/* == PANEL PAGES == */
/* Cast, ratings, alternative titles and the trailer sit on the statistics page's light panel. */
.content-detail.title-page{
	min-height: 0;
}

/* The pages render in quirks mode, where a table takes the body's colour and size rather than
   its parent's - orange names on the light panel. Told to inherit, it takes the panel's. */
.title-page .content table{
	color: inherit;
	font-size: inherit;
}

.title-page .content h1{
	margin: 0;
	font-size: 1.8em;
	line-height: 1.2;
	color: #222222;
}

.title-page-scope{
	margin: 0.2em 0 1.2em;
	color: #666666;
}

.title-page-note{
	color: #666666;
	font-style: italic;
}

.title-page-empty{
	margin: 1em 0 0;
	color: #444444;
}

.title-page .stats-section{
	margin: 1.5em 0 0;
}

/* Cast beside crew, the way the roll-down panel sets them; on a narrow panel they stack. */
.title-columns{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(22em, 100%), 1fr));
	gap: 0 2em;
	align-items: start;
}

.title-columns > *{
	min-width: 0;
}

.title-credits{
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 2em;
	margin: 0 0 0.5em;
}

.title-credits em{
	padding-right: 0.4em;
	font-style: normal;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666666;
}

/* The role beside the name: the answer, worth a share of the width. */
.leaderboard-table td.title-role{
	width: 45%;
	font-size: 0.95em;
	color: #666666;
}

.leaderboard-table td.title-country{
	width: 3em;
}

/* The site's own spread as bars, the longest for the step most people picked. */
.title-spread td.rank{
	width: 2.5em;
}

.title-spread-bar-cell{
	width: 60%;
}

.title-spread-bar{
	display: block;
	height: 0.8em;
	min-width: 2px;
	background-color: var(--button-main-color);
}

/* Your own mark: the card's star picker, laid open on a stat card rather than popping up. */
.title-rating-inline{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2em;
}

.title-rating-inline .title-rating-picker{
	display: inline-flex;
	position: static;
	background: none;
	box-shadow: none;
}

.title-rating-inline .title-rating-step{
	padding: 0.15em 0.2em;
	font-size: 1.3em;
	color: var(--dark-color);
}

.title-rating-inline .title-rating-value{
	min-height: 1.4em;
}

/* The embed is 16:9 and fills the panel it is given rather than a fixed pixel size. */
.title-trailer{
	position: relative;
	max-width: 60em;
	aspect-ratio: 16 / 9;
	background-color: var(--dark-color);
}

.title-trailer iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* == LISTS == */
/* Seasons and episodes are cards under a heading in the column's own colours. */
.title-list-heading{
	padding-bottom: 0;
}

.title-list-heading h1{
	margin: 0;
	font-size: 2em;
	line-height: 1.2;
	color: var(--dark-color);
}

.title-list-heading .title-page-scope{
	color: var(--dark-color);
	opacity: 0.75;
}

.title-list-empty{
	color: var(--dark-color);
}

/* == IMAGES == */
/* The guess gallery's grid, tile for tile - edge to edge on black, a two-pixel seam, one tile per
   column of at least 300px. A backdrop keeps its own shape rather than the guess's 4:3, a poster
   stands upright in narrower columns, and the picture is an <img> loaded lazily rather than a
   background: CardThumbnail converts on a miss, and a background would ask for all sixty at once. */
.title-gallery h3{
	margin: 0;
	padding: 0.8em 0.6em 0.4em;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.title-gallery .image{
	clear: both;
}

.title-gallery .item{
	min-height: 0;
}

.title-gallery .item.title-backdrop{
	aspect-ratio: 16 / 9;
}

.title-gallery .image.title-posters{
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.title-gallery .item.title-poster{
	aspect-ratio: 2 / 3;
}

.title-gallery .item img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.title-gallery p{
	padding: 1em;
	color: var(--light-text-color);
}