* {
	font-family: Atkinson Hyperlegible, sans-serif;
	margin: 0;
	padding: 0;
}

:root {
	--main-color: hsl(0, 0%, 13%);
	--main-color-shade: hsl(0, 0%, 99%);
	--main-color-bias: hsl(0, 0%, 97%);
	--main-color-contrast: hsl(0, 0%, 60%);
	--main-color-border: hsl(0, 0%, 40%);
	--main-color-opaque: hsla(0, 0%, 99%, 0.7);
	--main-color-transparent: hsla(0, 0%, 99%, 0.3);
	
	--link-color: hsl(187.3 77% 36%);
	--link-color-visited: hsl(261.64 30% 57%);
	
	--alt-color: hsl(261.64 30% 57%);
	--alt-color-shade: hsl(261.64 100% 99.5%);
	--alt-color-bias: hsl(261.64 55% 96%);
	--alt-color-contrast: hsl(261.12 44% 70%);
	
	--opt-color: hsl(187.3 77% 36%);
	--opt-color-shade: hsl(180 100% 93%);
	--opt-color-bias: hsl(180 100% 99%);
	--opt-color-contrast: hsl(188.33 50% 51%); */
	
}

body {
	color: var(--main-color);
	background-color: var(--alt-color-shade);
	accent-color: var(--opt-color);
	font-size: 1rem;
}

.loader {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  display: block;
  margin: .6rem auto .8rem auto;
  position: relative;
  color: var(--opt-color-contrast);
  box-sizing: border-box;
  animation: animloader 2s linear infinite;
}

@keyframes animloader {
  0% {
	box-shadow: .7rem 0 0 -.1rem,  1.9rem 0 0 -.1rem,  -.7rem 0 0 -.1rem,  -1.9rem 0 0 -.1rem;
  }
  25% {
	box-shadow: .7rem 0 0 -.1rem,  1.9rem 0 0 -.1rem,  -.7rem 0 0 -.1rem,  -1.9rem 0 0 .1rem;
  }
  50% {
	box-shadow: .7rem 0 0 -.1rem,  1.9rem 0 0 -.1rem,  -.7rem 0 0 .1rem,  -1.9rem 0 0 -.1rem;
  }
  75% {
	box-shadow: .7rem 0 0 .1rem,  1.9rem 0 0 -.1rem,  -.7rem 0 0 -.1rem,  -1.9rem 0 0 -.1rem;
  }
  100% {
	box-shadow: .7rem 0 0 -.1rem,  1.9rem 0 0 .1rem,  -.7rem 0 0 -.1rem,  -1.9rem 0 0 -.1rem;
  }
}

h1 {
	font-size: 2.4rem;
	line-height: .9;
	margin-bottom: .6rem;
	max-width: max-content;
}

h2 {
	font-size: 2rem;
	line-height: 1.1;
	margin-bottom: .6rem;
}

h3 {
	font-size: 1.3rem;
	line-height: 1.1;
	margin-bottom: .2rem;
}

h4 {
	font-size: 1.1rem;
	line-height: 1.1;
	margin-bottom: .2rem;
}

p {
	line-height: 1.4;
	margin-bottom: .6rem;
}

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

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

a.emoji {
	text-decoration: none;
}

ol {
	list-style-position: inside;
}

ul {
	list-style: none;
}

li {
	line-height: 1.2;
	margin-bottom: .2rem;
}

li p, li a {
	margin-bottom: 0;
}

main {
	width: min-content;
	max-width: 100vw;
	margin: 0 auto 0 auto;
	display: grid;
	grid-template-columns: repeat(25, minmax(min-content, max-content));	
	overflow: auto;
	scroll-snap-type: x mandatory;
	height: 100dvh;
}

#addBill {
	margin-bottom: .8rem;
}

.whiteboard {
	box-sizing: border-box;
	margin-top: .5rem;
	height: calc(100% - .5rem);
	width: 92vw;
	max-width: 32rem;
	padding: 1rem;
	overflow: auto;
	scroll-snap-align: start;
	scroll-snap-stop: normal;
}

.whiteboard:nth-child(odd of :not(.wiped)) {
	background-color: var(--main-color-opaque);
	border-radius: .8rem .8rem 0 0;
	border: .07rem solid var(--alt-color-contrast);
	border-bottom: none;
}

label p {
	margin-bottom: 0rem;
}

.inputButton {
	display: flex;
	width: 100%;
}

.buttonBar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.buttonBar:has(form) {
	flex-wrap: wrap;
}

.buttonBar form {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .3rem;
	align-items: center;
	justify-content: right
}

.buttonBar .emoji {
	cursor: pointer;
}

.buttonBar p {
	margin-bottom: 0;
}

.infoBox  {
	margin-bottom: 0.6rem;
	border: .1rem solid var(--main-color-border);
	border-radius: .3em;
	color: var(--main-color);
	background-color: var(--main-color-shade);
}

.infoBar {
	padding: .3rem .6em .3rem .6em;
	border-top: .1rem solid var(--main-color-border);
	border-radius: 0 0 .3em .3em;
}

.scoreBar {
	margin-bottom: 0.6rem;
	padding: .3rem .6em .3rem .6em;
	border: .1rem solid var(--main-color-contrast);
	border-radius: .3em;
	color: var(--main-color);
	background-color: var(--main-color-shade);
}

.tagBar {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
}

.infoBar .emoji {
	font-size: .8rem;
	font-family: "Noto Emoji";
	color: var(--opt-color);
}

.infoTag {
	font-size: .9rem;
	padding: 0 .3rem 0 .3rem;
	margin: .1rem;
	height: 1.2rem;
	max-width: max-content;
	border-radius: .6rem;
	border: .1rem solid var(--alt-color-contrast);	
	color: var(--alt-color);
	background-color: var(--alt-color-shade);
	
}

.sticky-note {
	padding: .5em .7em .5em .7em;
	margin-bottom: .9em;
	border: .06em solid var(--alt-color-contrast);
	border-radius: .6em;
	color: var(--alt-color);
	background-color: var(--alt-color-shade);
}

.sticky-note textarea {
	font-size: max(1rem, 16px);
	outline: none;
	border: none;
	margin-bottom: .3rem;
	display: block;
	width: 100%;
	resize: vertical;
	color: inherit;
	background: inherit;
	box-sizing: border-box;
}

.sticky-note textarea::placeholder {
	color: var(--alt-color-contrast);
}

.sticky-note .buttonBar details {
	margin-right: 1rem;
}

.sticky-note .buttonBar:has(details[open]) {
	align-items: end;
}

.sticky-note .emoji {
	color: inherit;
}

#statusBox {
	font-size: .8rem;
	line-height: 1.4;
	text-align: center;
	border: .1rem solid var(--alt-color);
	border-radius: .3rem;
	background: linear-gradient(var(--main-color-shade) 50%, var(--alt-color) 50%);
	padding: 0 .1rem 0 .1rem;;
}

#statusBox p {
	padding: .2rem;
	color: var(--alt-color);
	margin-bottom: .1rem;
}

#statusBox a {
	padding: .2rem;
	color: var(--main-color-shade);
	text-decoration: none;
	white-space: nowrap;
}

#statusBox .emoji {
	font-size: .8rem;
	color: var(--main-color-shade);
}

#scheduleBar {
	margin-bottom: .6rem;
}

input[type="text"] {
	font-size: max(1rem, 16px);
	height: 1.8rem;
	width: calc(100% - clamp(3rem, 20%, 4rem));
	border: .1rem solid var(--opt-color);
	border-radius: .3rem 0 0 .3rem;
	padding-left: .6rem;
	margin-bottom: .2rem;
	background: var(--main-color-shade);
	box-sizing: border-box;
}

input[type="text"]::placeholder {
	font-size: max(1rem, 16px);
	color: var(--main-color-contrast);
}

.inputButton input[type="submit"] {
	font-size: 1rem;
	height: 1.8rem;
	width: clamp(3rem, 20%, 4rem);
	border: .1rem solid var(--opt-color);
	border-radius: 0 .3rem .3rem 0;
	margin-bottom: .2rem;
	color: var(--main-color-shade);
	background: var(--opt-color);
	box-sizing: border-box;
	cursor: pointer;
}

input[type="checkbox"] {
	margin-right: .2rem;
}

fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

.autoSuggest {
	position: relative;
}

.autoSuggest input[type="text"] {
	border-color: var(--alt-color);
}

.autoSuggest input[type="submit"] {
	border-color: var(--alt-color);
	background: var(--alt-color);
}

.autoSuggest ul {
	box-sizing: border-box;
	width: calc(100% - clamp(3rem, 20%, 4rem));
	position: absolute;
	border: .1rem solid var(--alt-color);
	border-radius: .3rem;
	background-color: var(--main-color-shade);
	margin-top: .1rem;
}

.autoSuggest li:first-child {
	border-radius: .3rem .3rem 0 0;
}

.autoSuggest li:last-child {
	border-radius: 0 0 .3rem .3rem;
	margin-bottom: 0;
}

.autoSuggest li:hover {
	background-color: var(--alt-color-bias);
}

input[type="radio"] {
	display: none;
}

input[type="radio"] + label {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: .4rem .4rem .4rem .6rem;
}

input[type="radio"]:checked + label {
	color: var(--main-color-shade);
	background-color: var(--alt-color-contrast);
}

.wrapper {
	border-top: .1rem solid var(--main-color-border);
	padding: .4rem 0 .4rem 0;
}

details > summary {
	list-style-type: "▸ ";
}

details[open] > summary {
	list-style-type: "▾ ";
}

details.bill {
	padding: .5em .6em .5em .6em;
	border-radius: .3em;
	color: var(--main-color);
	background-color: var(--main-color-shade);
}

details.sched {
	padding: .5em .6em .5em .6em;
	margin-bottom: 0.6rem;
	border: .1rem solid var(--alt-color-contrast);
	border-radius: .3em;
	color: var(--alt-color);
	background-color: var(--alt-color-shade);
}

details.scheduled {
	/* this is unused but eventually could be useful */
}

details.copyMenu {
	padding: .3rem 0 .3rem .6rem;
	color: var(--alt-color);
	background-color: var(--alt-color-bias);
	border-radius: .2rem;
}

details.unsponsored-schema {	
	border-color: var(--main-color-contrast);
	color: var(--main-color-contrast);
	background-color: var(--main-color-shade);
}

.copyMenu summary {
	padding: .2rem 0 .2rem 0;
}

.copyMenu form {
	margin-left: .3rem;
}

.copyMenu form *:last-child {
	margin: .2rem 0 .2rem 0;
}

.optionsMenu {
	margin: .1rem 0 .1rem 0;
	padding: .3rem .3rem .5rem .6rem;
	border: .1rem solid var(--opt-color);
	border-radius: .3rem;
	background-color: var(--opt-color-bias);
}

summary {
	line-height: 1;
	cursor: pointer;
}

details ul {
	margin: .6rem 0 0 .6rem;
}

ul.inner {
	margin: .2rem 0 .6rem .6rem;
}

.miniButton {
	font-size: .8rem;
	font-weight: normal;
	height: 1.3rem;
	padding: 0 .3rem 0 .3rem;
	border: .1rem solid var(--alt-color);
	border-radius: .1rem;
	color: var(--main-color-shade);
	background-color: var(--alt-color);
	box-sizing: border-box;
	cursor: pointer;
}

#options .miniButton {
	border-color: var(--opt-color);
	background-color: var(--opt-color);
}

#options button.miniButton:disabled, button.miniButton:disabled {
	color: var(--main-color-contrast);
	background: var(--main-color-bias);
	border-color: var(--main-color-contrast);
	cursor: not-allowed;
}

#entOptions {
	max-width: 10rem;
}

#criteriaEnd {
	max-width: 10rem;
}

#shortUrl {
	padding: 0 .3rem 0 0;
	border: .1rem solid var(--opt-color);
	border-left: none;
	border-radius: 0 .3rem .3rem 0;
}

#layerList li {
	margin-bottom: .5rem;
}

.layerGroup {
	display: flex;
	gap: .3rem;
}

.layerGroup p {
	margin-top: .1rem;
	margin-bottom: 0;
}

.layerOptions {
	font-size: .9rem;
	padding: .1rem .3rem 0 .3rem;
	margin: .1rem;
	height: 1.2rem;
	max-width: max-content;
	border-radius: .6rem;
	border: .1rem solid var(--main-color-border);
	display: flex;
	align-content: center;
	gap: .5rem;
	cursor: pointer;
}

.layerChoice {
	line-height: 1.3;
	padding: .3rem .3rem 0 .3rem;
	height: 1.5rem;
	border: .1rem solid var(--alt-color-contrast);
	border-radius: .75rem;
	color: var(--alt-color);
	background-color: var(--alt-color-shade);
	margin-top: -.43rem;
}

.cluster {
	display: flex;
	flex-flow: row wrap;
	gap: .4em;
	margin-bottom: .4em;
}

ul.cluster li {
	margin-bottom: .2em;
	padding: .3em .4em .3em .4em;
	color: var(--alt-color);
	background-color: var(--alt-color-shade);
	border: .06em solid var(--alt-color-contrast);
	border-radius: .4em;
	transform-origin: center;
}
	
ul.cluster li:nth-child(4n) {
	transform: rotate(-2deg);
}

ul.cluster li:nth-child(4n+1) {
	transform: rotate(1deg);
}

ul.cluster li:nth-child(4n+2) {
	transform: rotate(-1deg);
}

ul.cluster li:nth-child(4n+3) {
	transform: rotate(2deg);
}

.trashBill {
	color: var(--main-color);
}

.trashBill:hover {
	color: var(--opt-color);
	cursor: pointer;
}

.emoji {
	font-size: 1.1rem;
	font-family: "Noto Emoji";
	color: var(--opt-color);
}

.bill .emoji {
	color: var(--alt-color);
}

th {
	text-align: left;
	line-height: 1.2;
	padding: 0 0 .3em .3em;
}

td {
	line-height: 1.2;
	padding: 0 0 .3em .3em;
}

.alt-one-schema {
	--alt-color: hsl(261.64 30% 57%);
	--alt-color-shade: hsl(261.64 100% 99.5%);
	--alt-color-bias: hsl(261.64 55% 96%);
	--alt-color-contrast: hsl(261.12 44% 70%);
	--link-color: var(--alt-color);
	--link-color-visited: var(--alt-color);
}

.alt-two-schema {
	--alt-color: hsl(8.3 37% 53%);
	--alt-color-shade: hsl(8.3 100% 97%);
	--alt-color-bias: hsl(8.3 100% 97%);
	--alt-color-contrast: hsl(8.53 53% 66%);
	--link-color: var(--alt-color);
	--link-color-visited: var(--alt-color);
}

.alt-three-schema {
	--alt-color: hsl(73.48 36% 39%);
	--alt-color-shade: hsl(70.6 100% 86%);
	--alt-color-bias: hsl(70.6 100% 86%);
	--alt-color-contrast: hsl(74.26 30% 51%);
	--link-color: var(--alt-color);
	--link-color-visited: var(--alt-color);
}

.alt-four-schema {
	--alt-color: hsl(187.3 77% 36%);
	--alt-color-shade: hsl(180 100% 93%);
	--alt-color-bias: hsl(180 100% 99%);
	--alt-color-contrast: hsl(188.33 50% 51%);
	--link-color: var(--alt-color);
	--link-color-visited: var(--alt-color);
}

.alt-gray-schema {
	--alt-color: var(--main-color-border);
	--alt-color-shade: var(--main-color-bias);
	--alt-color-bias: var(--main-color-shade);
	--alt-color-contrast: var(--main-color-contrast);
	--link-color: var(--alt-color);
	--link-color-visited: var(--alt-color);
}

.wiped {
	display: none;
}