@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Vollkorn:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*
		Common CSS for all pages: basic inline and layout elements as well as theming.
*/

/* global size and theme rules */

html[data-theme="light"], :root {
	--colour: grey; /* default colour for... stuff */
	--nav: #313236;
	/* light theme colours (see dark-style.css) */
	--col-blu: #287DCC;
	--col-grn: #44a15d;
	--col-ylw: goldenrod;
	--col-red: #B22323;
	--col-gry: grey;
	--bgd: white;
	--txt: black;
}


html {
	max-width: 900px;
	min-height: 100vh;
	margin: auto;
	background-color: var(--bgd);
}

nav {
	border: 4px solid var(--nav);
	background-color: var(--bgd);
  border-radius: 4px;
	display: grid; grid-template-columns: auto 1fr;
  align-items: center;
  margin-bottom: 1ex;
  position: sticky;
	top: 1em;
  z-index: 1;
	color: white;
}

.right > p {
	margin: 0;
}

.right > p, .right a {
	font-family: 'Courier New', monospace;
}

/* text, image and inline elements */
h1, h2, h3, h4, h5, h6, p, a, li, th, td, thead, tfoot, caption, summary, label, figcaption {
	font-family: 'Lato', sans-serif;
	color: var(--txt);
}
td { background-color: var(--bgd); }
button, input, select, textarea {
	font-family: 'Lato', sans-serif;
	color: var(--bgd);
	background-color: var(--txt);
}

figcaption { font-size: small; }

select, input, button {
  border-radius: 0;
  background-color: var(--txt);
  border: 2px solid var(--txt);
  cursor: pointer;
}
select:disabled, input:disabled {
  opacity: 50%;
  color: #888;
  cursor: default;
}

button, input[type=submit] {
	margin: 0 4px; padding: 4px;
	font-style: italic;
	border-radius: 4px; border: 0;
	border-right: 1px solid var(--colour);
	border-bottom: 1px solid var(--colour);
	box-shadow: inset 0px 0px 0px 1px var(--colour);
	background-color: var(--bgd);
	color: var(--txt);
}
button:hover {
	filter: invert();
}

li {
	list-style: circle;
}
ul ul { /* applies to the inner ul */
	padding-left: 1ex;
	margin-top: 1ex;
}

a, a:link, a:visited {
	color: var(--txt);
	background-color: var(--bgd);
}
a:hover {
	filter: invert();
}
a:active {
	color: var(--bgd);
}

footer {
	display: grid;
	grid-template-columns: 1fr 11em;
	align-items: center;
}

footer p {
	padding: inherit;
	font-size: 8pt;
	margin: 3px;
}

footer > div {
	display: flex;
}

footer form {
	margin: 0;
}

table {
  border: 1px solid var(--txt);
  border-collapse: separate;
  border-left: 0;
  border-radius: 4px;
  border-spacing: 0px;
	width: 100%;
	margin-bottom: 1ex;
}

thead {
	display: header-group;
	vertical-align: middle;
	border-color: inherit;
	border-collapse: separate;
	border-radius: 4px;
	background-color: var(--colour);
	font-weight: bold;
	color: var(--txt);
	font-style: italic;
}

tbody {
	color: var(--colour);
}

th, td {
	padding: 5px 4px 6px 4px; 
	text-align: center;
	vertical-align: middle;
	border-left: 1px solid var(--txt);
}

td {
  border-top: 1px solid var(--txt);    
}

/* moved from detail.css for a default styling for summary */
details > summary {
  border: 1px solid var(--bgd);
  border-radius: 4px;
  padding: 5px 4px 6px 4px;
  text-align: center;
  font-weight: bold;
  color: var(--bgd);
  background-color: var(--txt);
  font-style: italic;
  list-style: none;
}
details[open] > summary {
  box-shadow: 4px 4px var(--colour);
}

/* miscellaneous classes */

.control {
  cursor: pointer;
}
.location {
	filter: invert();
	background: var(--bgd);
	cursor: default;
}
.collapsible {
	display: none;
}

.noDesc {
  list-style: square;
}

.detailDescLabel {
	font-style: italic;
	font-weight: bold;
	border-bottom: 3px solid var(--colour);
}

.descButton {
	float: right;
}
a.button.descButton {
	margin: 0 4px;
	border-right: 1px solid var(--colour);
	border-bottom: 1px solid var(--colour);
	box-shadow: inset 0px 0px 0px 1px var(--colour);
	font-size: smaller;
}

.idNo, a.button {
	font-style: italic;
	color: var(--bgd);
	background-color: var(--colour);
	border-radius: 4px;
	padding: 4px;
	margin-bottom: 1em;
}

a.button {
	box-shadow: inset 0px 0px 0px 1px var(--colour); /* inset border! */
	background-color: var(--bgd);
	color: var(--txt);
	text-decoration: none;
}
a.point {
	cursor: pointer;
}

.statNo {
	font-style: italic;
	margin-bottom: 5%;
	text-align: center;
}
.statNo.top {
	text-shadow:
	-1px -1px 0 var(--bgd),  
	 1px -1px 0 var(--bgd),
	 -1px 1px 0 var(--bgd),
		1px 1px 0 var(--bgd),
		3px 3px var(--colour);
}
.statNo.bottom {
	font-size: initial;
}
.statNo.mainList { --colour: var(--col-ylw) }
.statNo.majorList { --colour: var(--col-red); }
.statNo.minorList { --colour: var(--col-blu); }
.statNo.supportList { --colour: var(--col-grn); }
.statNo.oouList { --colour: var(--col-gry); }
.statNo.allLists {
	position: relative;
	top: 3px;
}

.allLists {
	background-image: linear-gradient(to right, var(--col-blu), blueviolet 50%, var(--col-red));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 
	-2px -2px var(--txt),
	2px -2px var(--bgd) !important;

	/* This one is done differently to the above ones: the "drop shadow"
	is actually the text itself, coloured by a gradient, and the "text"
	is actually a text-shadow that's _above_ the real text (as well as
	one beside it in black, which gives the 3D effect). Because of that,
	it looks to be higher up on the page than the others. We use relative
	positioning to push it down by 3px, which fixes that handily. */
	/* also: we use !important here to make sure this text-shadow overrides
	the one from .statNo.top, because that declaration (being from two
	classes	at once) is more specific than this one (only being from
	.allLists). */
} 

.statPercent, .statName {
	font-size: 66%;
	margin-top: 0;
	text-align: center;
}

.statPie {
	border-radius: 50%;
	display: inline-block;
	width: 10px;
	height: 10px;
	vertical-align: middle;
}

.worldId {
	background-color: var(--txt);
	color: var(--bgd);
}

.headerLeft {
	flex: 0 1 auto;
	font-style: italic;
	text-shadow:
	-1px -1px 0 var(--bgd),  
	 1px -1px 0 var(--bgd),
	 -1px 1px 0 var(--bgd),
		1px 1px 0 var(--bgd),
		3px 3px var(--colour);
}

.headerRight {
	flex: 0 1 auto;
	text-align: end;
	line-height: 1.5em;
}

.footer-p {
	flex-direction: column;
}

.idPara {
	min-width: 5em;
}

.endlessIcon {
	font-style: italic;
	font-weight: bold;
	text-shadow: -1px -1px 0 var(--bgd), 1px -1px 0 var(--bgd), -1px 1px 0 var(--bgd), 1px 1px 0 var(--bgd), 2px 2px var(--colour);
	/* use as a span inside a p */
}

.noteSpan {
	font-family: 'Vollkorn', serif;
	font-style: italic;
	/* same as .serif.italic */
}

/* 1/4, 2/4, 3/4 */
.w25pc { width: 25%; }
.w50pc { width: 50%; }
.w75pc { width: 75%; }
/* 1/5, 1/3, 2/5, 3/5, 2/3 */
.w20pc { width: 20%; }
.w33pc { width: 33%; }
.w40pc { width: 40%; } .mw40pc { max-width: 40%; }
.w60pc { width: 60%; }
.w66pc { width: 66%; }

.text { color: var(--txt); }
.bgnd { color: var(--bgd); }

.blue   { color: var(--col-blu); }
.green  { color: var(--col-grn); }
.yellow { color: var(--col-ylw); }
.red    { color: var(--col-red); }
.grey   { color: var(--col-gry); }

.mono  { font-family: 'Roboto Mono', monospace; }
.sans  { font-family: 'Lato', sans-serif; }
.serif { font-family: 'Vollkorn', serif; }

.italic { font-style: italic; }
.bold   { font-weight: bold;  }

.small { font-size: small; }

.just { text-align: justify; }

.colWidthLimit { max-width: 22ch; }
ol.charNoteNo, ul.groupList {
	padding-left: 5.25em; /* 84px */
	column-count: 3;
}
ol.charNoteNo p, ul.groupList p { margin: 0; }
li.charNoteNo::marker {
	content: "#" counter(item, decimal) ": "
}
.detailListLabel {
	font-style: italic;
	border-bottom: 3px solid var(--colour);
	list-style-type: none;
}
.headInColumn {
	break-inside: avoid;
	/* break-after: avoid;  not supported in FF */
}

#notefeatured { /* lists on note detail page */
  columns: 4;
  margin-top: 2em;
}
#notefeatured > ul {
  padding-left: 0;
}

.nav.left {
	border-right: solid 4px #313236;
	padding: 0.5em 1em;
	margin: 0.5em 0;
}

.nav.right {
	padding-left: 1em;
}

.linkback {
	background-image: repeating-linear-gradient(-45deg,
									#ffdd00,
									#ffdd00 10px,
									black 10px,
									black 20px);
  border-radius: 4px;
  padding: 4px;
	width: 32px; height: 32px;
	display: inline-block;
}

/* at-rules for mobile! */
@media (max-width: 899px) {
	.headerRight {
		line-height: 2em;
	}
  ol.charNoteNo, ul.groupList {
		padding-left: 5.25em; /* 84px */
		column-count: 1;
	}
	/* lists on note detail page */
	#notefeatured { columns: 2; }
	/* notes index page: */
	section.notesList { /* increase the specificity */
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "id link edit" "author author author" "vr vr vr";
		margin-bottom: auto;
	}
	div.noteDetail.noteDeets {
		display: revert;
		margin-bottom: 0;
	}
	div.noteId { grid-area: id; }
	a.noteLink { grid-area: link; }
	.noteAuthorNote { grid-area: author; }
	.specEdit { grid-area: edit; }
	div.vr {  /* increase the specificity */
		grid-area: vr;
		border-bottom: 1px solid var(--txt);
		margin: unset;
	}
}