:root {
	--background: #111;
	--text: #aaa;
	--accent: #eee;

	font-size: 1.125rem;
}

body {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 1fr 2em;

	height: 100dvh;
	margin: 0;
	padding: 0;

	font-family: "Jost*", var(--sans-serif);

	background: black;
}

aside#bottombar {
	display: flex;
	align-items: center;
	grid-row: 2 / 3;
	gap: 2em;

	padding-inline: 1ch;

	color: #aaa;
	background-color: #111;

	& h1 {
		margin: 0;

		color: inherit;
		font-size: 1em;
		font-weight: normal;
		text-transform: uppercase;

		&:not(:lang(ar), :lang(hi)) {
			letter-spacing: var(--caps-spacing);
		}
	}

	& .bottombar-button {
		display: flex;
		align-items: center;
		gap: 0.5ch;

		block-size: 1.5em;
		padding-inline: 0;

		color: inherit;
		font-size: 1em;

		border: none;

		& div.bottombar-icon {
			aspect-ratio: 1/1;
			block-size: 1.25em;
		}

		& #bottombar-language-code {
			padding-inline: 0.25ch;

			color: #888;
			font-size: 0.8em;
			letter-spacing: var(--caps-spacing);
			text-transform: uppercase;

			border: 1px solid #888;
			border-radius: 5px;
		}
	}
}

main.clocked-out {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	grid-auto-rows: 1fr;

	max-inline-size: 100%;
	margin: 0;
	padding: 0;

	overflow-y: auto;
}

.clock {
	--bg-pic: url("/clock/cityscapes/New York-day.webp");

	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: 1fr auto;

	padding: 1ch;

	color: white;
	text-shadow: 0 1px 3px black;

	background-image: linear-gradient(to top, #000c, transparent 60%),
		var(--bg-pic);
	background-position: center;
	background-size: cover;

	& .clock-face {
		display: flex;
		align-items: baseline;
		align-self: end;

		inline-size: 5ch;

		font-family: "League Gothic", sans-serif;
		font-size: 3.5em;
		line-height: 1;

		&:lang(ar) {
			flex-direction: row-reverse;
		}
		&:lang(bn) {
			font-family: "Anek Bangla Condensed", sans-serif;
		}

		& .minutes {
			font-size: 0.9em;
		}

		& .seconds {
			font-size: 0.8em;
		}
	}

	& .clock-day {
		align-self: end;

		font-weight: bold;
		letter-spacing: var(--caps-spacing);
		text-align: end;
		text-transform: uppercase;

		&.shortform {
			display: none;
		}
	}

	& .clock-cities {
		display: flex;
		flex-wrap: wrap;
		grid-column: 1 / 3;

		block-size: 1.5em;
		align-items: center;
		margin: 0;
		padding: 0;
		line-height: 1;

		&.shortform {
			display: none;
		}

		& li {
			display: block;

			margin-block: 0;
			margin-inline: 0;

			font-weight: bold;

			&:not(:last-child)::after {
				content: "•";
				margin-inline: 0.25ch;
			}
		}
	}
}

dialog {
	inline-size: 40em;

	color: var(--text);

	backdrop-filter: blur(1em);
	background-color: #111c;
	border: 1px solid var(--text);
	border-radius: 10px;
	box-shadow: 0 5px 15px black;

	& h2 {
		margin-block-start: 0;
	}

	& .exit-button {
		position: fixed;

		inset-block-start: 1em;
		inset-inline-end: 1em;
		block-size: 2em;
		inline-size: 2em;
		padding: 0;

		color: #faa;

		background-color: #8008;
		border: 1px solid #faac;
		border-radius: 7.5px;

		box-shadow: 0 2px 5px black;
	}

	&#about {
		color: var(--accent);

		& .about-photo-credits {
			padding-inline: 0;
			font-size: 0.9em;
			column-width: 17.5em;

			& li {
				display: flex;
				inline-size: 100%;
				justify-content: space-between;
			}
		}

		& .about-creation-date {
			text-align: center;
		}

		& .about-licence {
			font-size: 0.9em;
			text-align: center;

			& a {
				color: inherit;
			}
		}
	}

	&#locale-settings {
		& fieldset {
			border: 0;
			margin: 0;
			padding: 0;

			& legend {
				color: var(--accent);
				margin-block-end: 0.5em;
				font-size: 1.125em;
				font-weight: bold;
			}
		}

		& #locale-select-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 1ch;

			& .locale-button {
				padding-block: 0.25em;
				padding-inline: 0.25em 1ch;

				background-color: #ccc2;
				border: 1px solid #888;
				border-radius: 10px;
				box-shadow: 0 5px 20px #fff6 inset, 0 -4px 20px black inset,
					0 2px 5px black;

				cursor: pointer;

				&:hover,
				&.locale-selected {
					background-color: transparent;
					border: 1px solid #ccc;
					box-shadow: 0 5px 20px black inset, 0 -4px 20px #fff6 inset,
						0 0 5px black;
				}

				& input {
					display: none;
				}

				& label {
					display: flex;
					align-items: center;
					gap: 1ch;

					cursor: pointer;

					& img {
						margin: 0;
						block-size: 2em;
						inline-size: 2em;

						border: 1px solid #fff4;
						border-radius: 5px;
					}
				}
			}
		}

		& div.checkbox-group {
			display: flex;
			gap: 1ch;
			margin-block-start: 1em;

			& input {
				block-size: 1.5em;
				inline-size: 1.5em;

				accent-color: var(--accent);
				color-scheme: dark;
			}

			& label {
				color: var(--accent);
			}
		}
	}
}

@media screen and (width < 1400px) {
	.clock {
		grid-template-rows: auto auto;

		& .clock-face {
			font-size: 3em;
			inline-size: 5ch;
		}

		& .clock-cities {
			grid-column: auto;
			grid-row: 1/3;
			flex-direction: column;
			flex-wrap: nowrap;
			align-items: end;
			justify-content: end;

			block-size: auto;

			line-height: 1.2;
			text-align: end;
			text-shadow: 0 0 5px black, 0 0 10px black;

			& li {
				&:not(:last-child)::after {
					display: none;
				}
			}
		}

		& .clock-day {
			grid-column: 1/2;
			grid-row: 2/3;

			line-height: 1.2;

			text-align: start;
		}
	}
}

@media screen and (width < 1300px) {
	.clock:lang(pt),
	.clock:lang(ru) {
		& .clock-day {
			&.longform {
				display: none;
			}
			&.shortform {
				display: block;
			}
		}
	}
}

@media screen and (width < 1120px) {
	main.clocked-out {
		grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	}
	.clock {
		grid-template-rows: 1fr auto;
		font-size: 0.95em;

		& .clock-face {
			grid-row: 1/3;

			line-height: 0.85;
		}

		& .clock-cities {
			grid-column: auto;
			grid-row: 2/3;
			flex-direction: row;
			letter-spacing: var(--caps-spacing);
			text-shadow: inherit;

			&.longform {
				display: none;
			}
			&.shortform {
				display: flex;
			}

			& li {
				&:not(:last-child)::after {
					display: inline;
				}
			}
		}

		& .clock-day {
			grid-column: 2/3;
			grid-row: 1/2;

			font-style: italic;
			letter-spacing: 0;
			text-align: end;
			text-transform: none;
		}
	}
}

@media screen and (width < 950px) {
	aside#bottombar {
		gap: 1em;
	}
	.bottombar-label {
		display: none;
	}
}

@media screen and (width < 510px) {
	aside#bottombar h1 {
		font-size: 0.8em;
	}

	.clock {
		& .clock-cities {
			letter-spacing: 0;

			&.longform {
				display: flex;
			}
			&.shortform {
				display: none;
			}
		}
	}
}

@font-face {
	font-family: "Jost*";
	font-weight: normal;
	font-style: normal;
	src: url("/fonts/Jost-400-Book.woff2");
}

@font-face {
	font-family: "Jost*";
	font-weight: bold;
	font-style: normal;
	src: url("/fonts/Jost-700-Bold.woff2");
}

@font-face {
	font-family: "Jost*";
	font-weight: normal;
	font-style: italic;
	src: url("/fonts/Jost-400-BookItalic.woff2");
}

@font-face {
	font-family: "Jost*";
	font-weight: bold;
	font-style: italic;
	src: url("/fonts/Jost-700-BoldItalic.woff2");
}

@font-face {
	font-family: "League Gothic";
	font-weight: normal;
	font-style: normal;
	src: url("/fonts/LeagueGothic-Regular.woff2");
}

@font-face {
	font-family: "Anek Bangla Condensed";
	font-weight: bold;
	font-style: normal;
	src: url("/fonts/AnekBangla_Condensed-Bold.woff2");
}