body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	color: #aaaaaa;
	background-color: #070b14;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><rect width='240' height='240' fill='%23070b14'/><g fill='white'><circle cx='90' cy='46' r='0.4' opacity='0.33'/><circle cx='218' cy='145' r='0.4' opacity='0.42'/><circle cx='137' cy='62' r='0.4' opacity='0.4'/><circle cx='25' cy='69' r='0.4' opacity='0.4'/><circle cx='169' cy='168' r='0.6' opacity='0.46'/><circle cx='157' cy='109' r='0.4' opacity='0.36'/><circle cx='150' cy='227' r='0.4' opacity='0.4'/><circle cx='146' cy='38' r='0.6' opacity='0.56'/><circle cx='182' cy='54' r='0.4' opacity='0.42'/><circle cx='56' cy='103' r='0.4' opacity='0.45'/><circle cx='135' cy='182' r='0.4' opacity='0.46'/><circle cx='127' cy='157' r='0.9' opacity='0.72'/><circle cx='71' cy='211' r='0.4' opacity='0.46'/><circle cx='28' cy='155' r='0.4' opacity='0.41'/><circle cx='95' cy='194' r='0.4' opacity='0.43'/><circle cx='26' cy='38' r='0.4' opacity='0.35'/><circle cx='133' cy='115' r='0.4' opacity='0.44'/><circle cx='232' cy='217' r='0.4' opacity='0.45'/><circle cx='160' cy='135' r='0.6' opacity='0.54'/><circle cx='223' cy='31' r='0.9' opacity='0.74'/><circle cx='178' cy='24' r='0.4' opacity='0.45'/><circle cx='182' cy='218' r='0.4' opacity='0.45'/></g></svg>");
}

td        { font-family: Verdana, Arial, sans-serif; font-size: 11px; color: #aaaaaa; }
a:link    { color: #6699aa; text-decoration: none; }
a:visited { color: #557788; text-decoration: none; }
a:hover   { color: #ffffff; text-decoration: underline; }

.logo {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: #ffffff;
	letter-spacing: 4px;
}

.padright {
	padding-right: 30px;
}

.tag {
	font-family: Verdana, Arial;
	font-size: 10px;
	color: #555555;
	letter-spacing: 2px;
}

.navbar a,
.navbar .off {
	font-family: Verdana, Arial;
	font-size: 10px;
	letter-spacing: 1px;
}

.navbar {
	border-top: 1px solid #222222;
	border-bottom: 1px solid #222222;
	display: flex;
	height: 32px;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	margin-bottom: 10px;
}

.hd {
	font-family: Verdana, Arial;
	font-size: 11px;
	color: #ffffff;
	font-weight: bold;
	letter-spacing: 1px;
	border-left: 2px solid #5a7a96;
	padding: 1px 0 1px 8px;
	display: inline-block;
}

.hd-line {
	height: 1px;
	width: 100%;
	margin: 6px 0;
	background: linear-gradient(to right, #2a3344 0%, #2a3344 60%, transparent 100%);
}

.date  { font-family: "Courier New", monospace; font-size: 10px; font-weight: bold; color: #6699aa; }
.small { font-size: 10px; color: #8d99a6; }

.btn {
	background-color: #1a1a1a;
	color: #cccccc;
	border: 1px solid #444444;
	font-family: Verdana;
	font-size: 10px;
	padding: 2px 10px;
	cursor: pointer;
}

.btn:hover { color: #ffffff; border-color: #6699aa; }

.panel {
	background-color: #0a0e18;
	border: 1px solid #1a2236;
	padding: 10px 12px;
	margin-top: 8px;
	margin-bottom: 15px;
}

hr.thin {
	border: 0;
	border-top: 1px dashed #2a3344;
	height: 0;
	margin: 14px 0;
}

.hero {
	display: block;
	border-top: 1px solid #1a1a1a;
	border-bottom: 1px solid #1a1a1a;
}

.intro { line-height: 18px; font-size: 1em; }
.up    { color: #6699aa; }
.down  { color: #aa5544; }
.pt-8  { padding-top: 8px; }
.pt-4  { padding-top: 4px; }
.foot  { border-top: 1px solid #222222; padding-top: 14px; }
.ok    { color: #6699aa; }
.logtitle { font-weight: bold; }

.centerwrapper {
	display: flex;
	justify-content: center;
}

.toptable {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	margin-top: 40px;
	background-color: #070b14;
	box-shadow: 0 0 0 24px #070b14;
}

.navleft,
.navright {
	display: flex;
	gap: 5px;
	align-items: center;
}

.sidebar {
	width: 200px;
}

.maintable, .titletable {
	width: 100%;
	table-layout: fixed;
}

.roster { border-collapse: collapse; width: 100%; table-layout: fixed; }
.roster thead th {
	font-family: Verdana, Arial; font-size: 10px;
	color: #6699aa; font-weight: bold; letter-spacing: 1px;
	text-align: left; padding: 5px 6px;
	border-bottom: 1px solid #1e2d40;
	background-color: #090d17;
	white-space: nowrap;
}
.roster tbody td { padding: 6px 6px; border-bottom: 1px solid #0f1520; vertical-align: middle; }
.roster tbody tr:hover td { background-color: #0c1222; }

.dot { font-size: 14px; line-height: 1; }
.dot-on  {
	color: #44bb77;
	text-shadow: 0 0 6px #44bb77, 0 0 2px #88ddaa;
	animation: dot-pulse 2.4s ease-in-out infinite;
}
.dot-off { color: #2a3a4a; }
@keyframes dot-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}

.info-grid { width: 100%; border-collapse: collapse; margin-top: 0; }
.info-grid td { padding: 5px 6px; border-bottom: 1px solid #0f1520; vertical-align: top; }
.info-grid tr:last-child td { border-bottom: none; }
.info-label { font-size: 10px; color: #7a8ea3; letter-spacing: 1px; white-space: nowrap; width: 140px; }
.info-value { color: #aaaaaa; font-size: 11px; line-height: 16px; }
.info-value.bright { color: #ccd9e6; }

.disabled { text-decoration: line-through; }

.navon { color: #ffffff; }


/* ---- additions ----------------------------------------------------- */

/* struck-through nav items that have nowhere to go yet */
.navbar .off { color: #52697f; text-decoration: line-through; cursor: default; }

/* notice line above the dev log */
.notice {
	background-color: #0a0e18;
	border: 1px solid #1a2236;
	border-left: 2px solid #aa5544;
	padding: 8px 12px;
	margin: 10px 0 14px 0;
	line-height: 16px;
}
.notice b { color: #ccd9e6; }

/* dev log entries that open in place */
details.log { margin: 0 0 12px 0; }
details.log summary { cursor: pointer; list-style: none; }
details.log summary::-webkit-details-marker { display: none; }
details.log summary .logtitle { color: #6699aa; }
details.log summary:hover .logtitle { color: #ffffff; text-decoration: underline; }
details.log summary .more { font-size: 10px; color: #647a90; }
details.log[open] summary .more { display: none; }
details.log .body { margin: 8px 0 0 0; padding: 8px 12px; border-left: 1px solid #1a2236; line-height: 16px; }
details.log .body ul { margin: 6px 0 8px 0; padding-left: 16px; }
details.log .body li { margin-bottom: 2px; }

/* thumbnails */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, 146px); justify-content: space-between; row-gap: 8px; margin: 10px 0 6px 0; }
.thumbs a img {
	display: block;
	border: 1px solid #1a2236;
	transition: border-color 150ms;
}
.thumbs a:hover img { border-color: #6699aa; }
.thumbs .cap { display: block; width: 146px; margin-top: 4px; font-size: 10px; line-height: 13px; color: #8d99a6; }
.more-link { margin: 4px 0 0 0; }

/* sidebar */
a.btn { display: inline-block; text-decoration: none; }
a.btn:link, a.btn:visited { color: #cccccc; }
a.btn:hover { color: #ffffff; }
.orig { text-align: center; }
.orig img { display: block; margin: 2px auto 8px auto; }
.sidebar details.log { margin: 0; }
.sidebar details.log .body { padding: 6px 0 0 8px; }
.sidebar details.log .body ul { padding-left: 14px; }

/* footer */
.foot .cols { display: flex; justify-content: space-between; gap: 20px; }
.foot .legal { margin-top: 10px; line-height: 15px; }

/* screenshot viewer */
#viewer {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(4, 7, 13, 0.92);
}
#viewer.open { display: flex; }
#viewer .frame { background: #0a0e18; border: 1px solid #1a2236; padding: 8px; max-width: calc(100vw - 40px); }
#viewer img { display: block; width: 889px; max-width: 100%; height: auto; border: 1px solid #1a2236; }
#viewer .bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px 0 2px; font-size: 10px; letter-spacing: 1px; }
#viewer .cap { color: #cccccc; letter-spacing: 0; font-size: 11px; }
#viewer .ctl a { margin-left: 10px; }
#viewer .ctl .count { color: #556677; }

@media (max-width: 780px) {
	.maintable, .maintable > tbody, .maintable > tbody > tr,
	.maincol, .sidebar {
		display: block;
		width: auto;
	}

	.navbar {
		flex-direction: column;
		gap: 8px;
		padding: 4px 0px;
		height: auto;
	}

	.padright { padding-right: 0; }
	.hero { width: 100%; height: auto; }

	/* Phones. Nothing here may be wider than the screen: the nav items wrap, long words and preformatted text break,
	   images and wide tables shrink or scroll inside themselves, and the page keeps a margin at the sides. */
	body { margin: 0 12px; }
	.toptable { margin-top: 20px; box-shadow: none; table-layout: fixed; }   /* fixed: never wider than the screen */
	.toptable > tbody > tr > td { overflow-wrap: break-word; }
	.report-bar { flex-wrap: wrap; row-gap: 6px; }
	.navleft, .navright { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
	.maincol, .sidebar, .foot { overflow-wrap: break-word; }
	.maincol img:not(td img), .sidebar img:not(td img) { max-width: 100%; height: auto; }   /* report tables size their own */
	pre { white-space: pre-wrap; overflow-wrap: break-word; }
	.roster, .bugs-table, .mod-table:not(.mod-stack) {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
	.foot .cols { flex-wrap: wrap; gap: 6px 20px; }
	.sidebar { margin-top: 16px; }

	/* Fingers, not mouse pointers: bigger buttons, and fields at 16px so phones do not zoom in on a tap. */
	.btn { padding: 7px 12px; font-size: 11px; }
	.field, .filter-field, .filter-select, textarea, select { font-size: 16px; max-width: 100%; box-sizing: border-box; }
	.acct-btns { gap: 8px; }
}