/*
	GalleryBot 0.1 writes this file each time it generates the galleries, so
	changes made here are lost. Make lasting changes in custom.css, beside
	this file, which it never replaces. For example, to change the colors,
	copy the rules below into custom.css and change the values there.
*/

:root {
	--text-color: #333333;
	--link-color: #333333;
	--thumbnail-width: 320px;
	--thumbnail-height: 320px;
	--spacing: 16px;
}

/* Each kind of page has its own background, and its own frame color: the
   covers' borders on the overview, the thumbnails' on a gallery page, and
   the mat around the picture on a picture page. A background image, if
   there is one, is shown over the background color, tiled or filling the
   window. */
body.overview {
	--page-background: #999999;
	--frame-color: #33333300;
	--page-background-image: url("background-overview.jpg");
	--page-background-size: 144px 144px;
	--page-background-repeat: repeat;
	--page-background-position: 0 0;
	--page-background-attachment: scroll;
}

body.gallery {
	--page-background: #999999;
	--frame-color: #333333;
}

body.picture {
	--page-background: #999999;
	--frame-color: #ffffff;
}

body {
	margin: 0;
	padding: var(--spacing);
	background-color: var(--page-background);
	background-image: var(--page-background-image, none);
	background-size: var(--page-background-size, auto);
	background-repeat: var(--page-background-repeat, repeat);
	background-position: var(--page-background-position, 0 0);
	background-attachment: var(--page-background-attachment, scroll);
	color: var(--text-color);
	font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
}

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

h1 {
	font-size: 1.5em;
	margin: 0.5em 0;
}

/* The bar at the top of a gallery or picture page: where it is, at the
   left; the controls, in the middle; and the position, at the right. On a
   narrow screen the controls get a line of their own, below. */
.bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.5em var(--spacing);
}

.bar .up {
	justify-self: start;
	text-align: left;
}

.bar .controls {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 2px;
}

.bar .status {
	grid-column: 3;
	justify-self: end;
	text-align: right;
	margin: 0;
	white-space: nowrap;
}

@media (max-width: 36em) {
	.bar {
		grid-template-columns: 1fr auto;
	}
	.bar .controls {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
	}
	.bar .status {
		grid-column: 2;
		grid-row: 1;
	}
}

/* Each control is a glyph drawn in the link color, in a square big enough
   to hit, bigger on touch screens; play and pause, the main one, is bigger
   still. One whose setting is on (playing backward, or faster) is outlined;
   one that leads nowhere is faint. */
.control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: none;
	color: var(--link-color);
	font: inherit;
	cursor: pointer;
}

/* Controls that are links keep their looks whatever custom.css says about
   links in general (a:hover and so on, which outrank .control alone), so
   such rules style only text links. A rule naming .control still changes
   them. */
a.control:link, a.control:visited, a.control:hover, a.control:active {
	color: var(--link-color);
	text-decoration: none;
}

.control[hidden] {
	display: none;
}

.control.primary {
	width: 44px;
	height: 44px;
}

.control.primary svg {
	width: 32px;
	height: 32px;
	stroke-width: 1.5;
}

.control svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.control[aria-pressed="true"] {
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.control.disabled, .control:disabled {
	opacity: 0.35;
	cursor: default;
}

.control .when-playing, .playing .control .when-paused {
	display: none;
}

.playing .control .when-playing {
	display: inline;
}

@media (pointer: coarse) {
	.control {
		width: 44px;
		height: 44px;
	}
	.control.primary {
		width: 56px;
		height: 56px;
	}
}

nav {
	margin: 0.5em 0;
}

nav.up a {
	margin: 0 0.25em;
}

nav.up a:first-child {
	margin-left: 0;
}

/* Thumbnails: as many columns as fit, each as wide as a thumbnail (or the
   window, if that's narrower), and centered, unless the page says how many. */
.thumbnails {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(0, var(--thumbnail-width)));
	gap: var(--spacing);
	justify-content: center;
	list-style: none;
	margin: var(--spacing) auto;
	padding: 0;
}

/* Each row is as tall as its tallest thumbnail, so a row of landscape
   thumbnails is no taller than it needs to be. Each thumbnail is centered
   in its cell, with what's shown with it just beneath. The same text,
   invisible, above it (.balance) keeps the thumbnail itself centered, so
   the thumbnails in a row line up through their middles. */
.thumbnails li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.thumbnails .image {
	display: block;
	line-height: 0;
}

.thumbnails .balance {
	visibility: hidden;
}

/* Thumbnails are limited by the window's width, for phones, rather than by
   their cells' (100%): WebKit doesn't measure the rows again when a cell's
   width changes, so a page laid out narrow and then widened, as when Safari's
   window is resized, would keep rows too short for their text. */
.thumbnails img {
	border: 1px solid var(--frame-color);
	max-width: calc(100vw - 4 * var(--spacing));
	height: auto;
}

.thumbnails p {
	margin: 0.3em 0 0;
	max-width: var(--thumbnail-width);
}

.thumbnails .balance p {
	margin: 0 0 0.3em;
}

/* A picture: framed, with the left and right halves leading to the previous
   and next pictures. */
figure {
	margin: var(--spacing) 0;
}

.frame {
	display: inline-block;
	position: relative;
	background: var(--frame-color);
	padding: 8px;
}

.frame img {
	display: block;
	max-width: calc(100vw - 6 * var(--spacing));
	height: auto;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
}

.overlay.previous {
	left: 0;
	cursor: w-resize;
}

.overlay.next {
	right: 0;
	cursor: e-resize;
}

figcaption {
	max-width: 40em;
	margin: 0 auto;
}

figcaption p {
	margin: 0.5em 0;
}

.title {
	font-weight: bold;
}