/* shows.css
   Replaces showsstyle.css for individual show account pages (conan.html
   and friends), going forward via .template. showsstyle.css itself is
   untouched -- the 864 existing pages still on it get migrated to this
   one over time, not all at once.

   Dropped as dead weight (matches what every other legacy CSS file
   tonight turned out to have): duplicate body{} (header.css owns this
   now), img.logo, div#header img, and #header itself -- that last one
   was already orphaned even in showsstyle.css, since the real markup
   uses #accountHeader, not #header.

   Global p{} and a:link/:visited/:hover scoped down to where they're
   actually needed, same fix every legacy file needed tonight.

   Fluid conversion: #usable/#accountHeader/#social/#accountFooter/
   #rightcol/#livePhotos and the photo thumbnails all get width:100%
   with the old fixed number as max-width, same pattern as everywhere
   else. #rightcol stays float:right and #accountContainer stays a
   plain block in normal flow next to it -- that's the whole
   mechanism behind the photos overlapping the text, and it's
   inherently width-independent, so it doesn't need to change to stay
   fluid.

   Dropcap (#accountContainer p:first-letter) kept exactly as-is.
*/

.pageBlurb p,
#accountContainer p {
	margin: 0px 0px 0px 0px;
	padding: 8px 8px 8px 8px;
}

#accountContainer p.note {
	font-size: smaller;
	font-style: italic;
}

#accountHeader a:link,
#accountFooter a:link,
#social a:link,
#usable a:link {
	color: white;
	text-decoration: none;
}

#accountHeader a:visited,
#accountFooter a:visited,
#social a:visited,
#usable a:visited {
	color: white;
	text-decoration: none;
}

#accountHeader a:hover,
#accountFooter a:hover,
#social a:hover,
#usable a:hover {
	color: darkorange;
	text-decoration: underline;
}

div#livePhotos img {
	width: 100%;
	max-width: 180px;
	max-height: 240px;
	margin: 0px 0px 2px 0px;
	border: 0px;
	clear: right;
}

#accountContainer p:first-letter {
	color: darkorange;
	font-size: 200%;
}

#accountContainer p.note::first-letter,
#accountContainer p.plain::first-letter {
	color: inherit;
	font-size: inherit;
}

#accountHeader {
	width: 100%;
	max-width: 675px;
	box-sizing: border-box;
	background-color: black;
	padding: 5px;

	text-align: center;
	color: white;
	font-family: verdana, Geneva, Arial;
	font-size: 14px;
}

#social {
	width: 100%;
	max-width: 675px;
	box-sizing: border-box;
	padding: 5px;
	margin: 0px;
	background-color: black;
	border-width: 1px;
	border-style: dashed none dashed none;
	border-color: orange;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#social a[href*="buymeacoffee"] {
	margin-left: auto;
}

#social #notify-box {
	font-size: small;
	font-style: italic;
	color: #ccc;
	display: inline-block;
	vertical-align: middle;
}

#social #notify-box p {
	margin: 0;
}

#social #notify-box button {
	font-size: small;
	font-style: normal;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid orange;
	color: orange;
	padding: 3px 10px;
	margin-left: 8px;
	cursor: pointer;
	font-family: inherit;
}

#social #notify-box button:hover {
	background: orange;
	color: #111;
}

#usable {
	width: 100%;
	max-width: 800px;
	box-sizing: border-box;
}

/* Static width on purpose, not fluid -- confirmed via extensive testing that
   any computed/conditional width (max-width, width:min(), etc.) on this
   floated element breaks how #accountContainer's content calculates space
   to avoid it, even though the float itself still renders at the correct
   visual size. This is a real Chromium quirk, not a design choice. A
   static 184px never actually needed to shrink at any real phone width
   anyway (confirmed: 120px+ of text space remains even at 320px), so
   there's no practical cost to this being non-fluid. */
#rightcol {
	width: 184px; /* to hold 180px with 2px borders */
	float: right;
	margin: 0px 0px 0px 8px;
}

div.rightcol {
	color: black;
	font-family: verdana;
	font-size: 10px;
	text-align: center;
}

/* Static width, same reasoning as #rightcol above. */
#livePhotos {
	width: 180px;
	padding: 0px;
	margin: 10px 0px 10px 0px;
	float: right;

	background-color: gray;
	border: 2px dotted white;

	color: black;
	font-family: verdana;
	font-size: 10px;
	text-align: center;
	box-sizing: border-box;
}

/* This was actually living in new.css originally (not showsstyle.css),
   under a comment saying "other pages have shares now too" -- missed
   it the first time since new.css got dropped entirely for this page.
   Grey background + dotted border matches #livePhotos above it, same
   visual family. No top border on purpose, so it reads as continuous
   with the photo box above rather than a separate disconnected panel. */
#share {
	clear: right;
	padding: 3px 0px 3px 0px;
	margin: 10px 0px 10px 0px;
	background-color: grey;
	border-width: 2px;
	border-style: none dotted dotted dotted;
	border-color: white;
	box-sizing: border-box;
}

#keywords {
	color: lightgrey;
	font-style: italic;
	font-size: x-small;
}

#keywords a:link {
	color: lightgrey;
	text-decoration: none;
}

#keywords a:visited {
	color: lightgrey;
	text-decoration: none;
}

#keywords a:hover {
	color: darkorange;
}

#accountContainer {
	width: 100%;
	max-width: 675px;
	box-sizing: border-box;
	margin: 0px;
	display: block;
}

#accountContainer iframe {
	display: block;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 16 / 9;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

div.pageBlurb {
	background-color: black;
	color: white;
	font-family: verdana, Geneva, Arial;
	font-size: 12px;
	line-height: 140%;
}

p.correction {
	margin: 0px 0px 0px 0px;
	padding: 8px 8px 8px 8px;
	font-size: 9px;
	font-style: italic;
}

#accountFooter {
	margin: 0px;
	width: 100%;
	max-width: 675px;
	box-sizing: border-box;
	padding: 10px 5px 0px 5px;
	border-top: 1px dashed darkorange;

	color: darkorange;
	background-color: black;

	text-align: center;
	font-family: impact, fantasy, arial;
	font-size: 16px;
	line-height: 120%;
}

/* Lightbox -- unchanged from showsstyle.css */
.lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.lightbox img {
	max-width: 90%;
	max-height: 90%;
	border: 10px solid #fff;
}

.lightbox .controls {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.lightbox .prev, .lightbox .next {
	font-size: 2rem;
	color: white;
	cursor: pointer;
	user-select: none;
}

.lightbox .close {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 2rem;
	color: white;
	cursor: pointer;
	user-select: none;
}

#lightbox-title {
	font-family: verdana, Geneva, Arial;
	color: white;
	text-align: center;
	font-size: 1.2rem;
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.8);
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	left: 0;
}