@font-face {
  font-family: 'Freight';
  src: url('fonts/FreightText-Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Freight';
  src: url('fonts/FreightText-MediumItalic.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
}

:root {
  --dashboard-label: hsl(220, 12%, 32%);
  --dashboard-value: hsl(220, 18%, 68%);
  --percentage-height: 5px;
  --percentage-radius: 1px;
  --under-color: hsl(0, 43%, 43%);
}

* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: Freight, Helvetica, Arial;
}

html {
  height: 100%;
}

body {
  height: 100%;
	margin: 0;
	padding: 0;
}

body > .wrapper {
  height: 100%;
}

.content {
	padding-top: 23px;
	padding-bottom: 30px;
}

.container {
  margin: 0px auto;
	max-width: 500px;
  width: 100%;
}

.content .container {
	padding: 0 15px;
}

/* Page header */
/* -------------------------------------------------- */

header[role=banner] {
	background: #3a5c8b;
  overflow: hidden;
  z-index: 49999;
  -webkit-user-select: none;
}

header[role=banner] h1 {
	color: hsl(208, 42%, 63%);
	font-size: 1em;
	font-weight: 400;
	left: 60px;
	letter-spacing: 0.04em;
  gap: 1rem;
	margin: 0;
	overflow: hidden;
	position: absolute;
	right: 60px;
	text-align: center;
	text-transform: uppercase;
	z-index: 50000;
}

header[role=banner] h1 a {
	color: #fff;
	display: block;
	padding-top: .7em;
	padding-bottom: .5em;
	text-decoration: none;
}

header[role=banner] a:hover {
	color: hsl(48, 81%, 74%) !important;
}

header[role=banner] a.menu {
	color: #fff;
	cursor: pointer;
	display: inline-block;
	float: left;
	font-size: 1.3em;
	height: 100%;
	line-height: 100%;
	padding: .3em 15px .9em;
	z-index: 100000;
}


/* Navigation */
/* -------------------------------------------------- */

nav[role=menu] {
	transition: transform .15s cubic-bezier(0.2, 0.3, 0.25, 0.9);

	-webkit-overflow-scrolling: touch;

	transform: translate3d(300px, 0, 0);

	background: #20283c;
	bottom: 0;
	right: 0;
	overflow-y: scroll;
	overflow: hidden;
	padding-bottom: 100px;
	padding-top: 1em;
	position: fixed;
	text-align: right;
	top: 0;
	width: 300px;
	z-index: 6000000;
}

nav[role=menu] * {
    -webkit-user-select: none;
}

nav[role=menu] a {
	color: #fff;
	display: block;
	padding: 15px 20px;
	text-decoration: none;
}

nav[role=menu] a.selected {
	background: rgba(0, 0, 0, 0.2);
}

nav[role=menu] a:hover {
	background: rgba(0, 0, 0, 0.1);
	color: #fff;
}

nav[role=menu] h2 {
	font-size: 1.2em;
	font-weight: 400;
	margin: 0;
}

nav[role=menu] h3 {
	color: #6c8098;
	font-size: .8em;
	font-style: italic;
	font-weight: 400;
	margin: 3px 0 0;
}

nav[role=menu] a {
	font-size: 1.1em;
	padding: 10px 20px;
}

nav[role=menu] a.add-book {
	color: #c9e8a6;
	margin-top: 1em;
}

nav[role=menu] a.logout {
	color: #8ca7b5;
	font-size: .8em;
	margin-top: 1em;
}

body #page {
  transition: filter 0.4s, opacity 0.4s;
  display: flex;
  height: 100%;
}

body.active-nav #page {
  filter: blur(7px);
  opacity: 0.4;
}

body.active-nav nav[role=menu] {
	transform: translate3d(0, 0, 0);

	position: relative;
}

/*
body.active-nav #page {
	transform: translate3d(320px, 0, 0);
	box-shadow: -1px 0 25px rgba(0, 0, 0, 0.5);
	bottom: 0;
	position: fixed;
	top: 0;
	width: 100%;
}
*/

body.active-nav #page .mask {
  background: hsla(220, 30%, 5%, 0.5);
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 50000;
}


/* Books */
/* -------------------------------------------------- */

.content h1 {
    color: hsl(224, 8%, 66%);
	font-size: 1.3em;
	font-weight: 400;
	margin-top: 0;
    -webkit-user-select: none;
}

.content h2 {
	color: #5278b2;
	font-size: 1.1em;
	margin: 0 0 .15em;
	padding-top: .25em;
}

.content .folder {
	max-width: 500px;
}

.content .folder + .folder {
	margin-top: 1.5em;
}

ul.booklist {
	border-bottom: solid 1px #ddd;
	margin: 0;
	padding: 0;
  margin-bottom: 150px;
}

ul.booklist li.container {
	border-top: solid 1px #ddd;
	list-style: none;
	overflow: hidden;
  padding: 0;
  /*
	padding-bottom: 1em;
	padding-top: 1em;
  */
}

ul.booklist li.container .wrapper {
    display: flex;
    flex-direction: row;
    -webkit-user-select: none;
}

ul.booklist li.container .wrapper .title-wrapper {
  flex: 1;
  padding: 0.4rem 1rem 0.6rem;
}

ul.booklist li a {
	color: #444;
	display: flex;
  gap: 0.5rem;
	text-decoration: none;
}

ul.booklist.history li {
  color: hsl(220 20% 25%);
  font-size: 12pt;
  line-height: 1.4;
  list-style: none;
  margin-block: 0.8rem;
  margin-left: 1.25rem;
  padding-inline: 1rem;
  text-indent: -1.25rem;

  & .title {
    display: inline;
  }

  & .finished {
    color: hsl(220 12% 50%);
  }

  & .author {
    color: hsl(220 12% 50%);
  }

  & .duration {
    color: hsl(220 12% 50%);
  }

  & .review {
    color: hsl(0 23% 40%);
    font-style: italic;
  }
}

ul.booklist.history li a span.tag {
  display: none;
}

ul.booklist.history li a span.tag {
	border-radius: 3px;
	display: inline-block;
	height: 6px;
	margin-left: 9px;
	margin-top: 10px;
	position: absolute;
	width: 13px;
}

ul.booklist li a span.label {
	cursor: pointer;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1.1em;
}

ul.booklist li a:hover span.label {
	color: #0578be;
}

ul.booklist li.stale a span.label {
	color: #c02a2a;
}

ul.booklist li .subtitle-wrapper span.author {
	color: hsl(220, 15%, 35%);
  display: block;
  font-family: -apple-system;
	font-size: 5pt;
  font-weight: 550;
  letter-spacing: 0.03rem;
	line-height: 1.1;
  margin-bottom: 2px;
	margin-top: 2px;
  text-transform: uppercase;
}

ul.booklist li .entry {
	color: #437dc4;
	cursor: pointer;
	font-weight: 600;
	text-align: center;
	width: 5.25rem;
}

ul.booklist li .entry .page_number {
  display: flex;
  flex-direction: column;
  margin-top: -0.5rem;
}

ul.booklist li .entry .page_number .num {
  background: hsl(200, 86%, 95%);
  font-size: 1.3rem;
  padding: 0px 0px 2px;
}

ul.booklist li.longterm .entry .page_number .num {
  padding-bottom: 0;
}

ul.booklist li .entry .actual {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0;
  margin-bottom: 0.02rem;
}

ul.booklist li .entry .days-ago {
    color: #888;
    font-size: .8em;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0;
}

ul.booklist li .entry .sub {
	color: #bbb;
	font-size: .8em;
	font-style: italic;
	line-height: 1.1em;
	padding: 7px 0px 6px;
	padding-bottom: 0;
}

ul.booklist li .entry .sub .label {
	color: #ccc;
	display: block;
	font-size: .8em;
	line-height: 1em;
	margin-top: 4px;
}

ul.booklist li .entry .sub .label .total {
	color: #bbb;
	letter-spacing: -0.01em;
	padding: 0 1px;
}

ul.booklist li .entry .sub .left .pages {
	color: #848484;
	letter-spacing: -0.01em;
	padding: 0 1px;
}

ul.booklist li .info {
	color: #bbb;
	display: block;
	font-size: 0.7em;
	line-height: 1.1em;
	margin-top: 5px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

ul.booklist li .info * {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

ul.booklist li .info .num {
	color: #e46286;
	font-weight: 600;
}

ul.booklist li .info .pages {
    color: #555;
    font-weight: 600;
}

ul.booklist li.stale .info .num {
	color: #ea3131;
}

ul.booklist li .info .percent-sign {
	color: #e46286;
	font-size: .8em;
	font-weight: 400;
	margin-left: 1px;
}

ul.booklist li .stale {
	color: #cd7474;
	display: block;
	font-size: .65em;
	margin-top: 4px;
}

ul.booklist li .entry:hover .page_number .num {
	background: hsl(95, 47%, 81%);
	color: hsl(95, 16%, 44%);
}

ul.booklist li.placeholder {
	background: #eee;
	height: 3em;
}

ul.booklist li.ui-sortable-helper {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
	padding: 10px;
}

ul.booklist li.ui-sortable-helper .entry {
	display: none;
}

ul.booklist li.ui-sortable-helper .percentage {
	display: none;
}

ul.booklist li.ui-sortable-helper .info {
	display: none;
}


/* Percentage */
/* -------------------------------------------------- */

.percentage {
	background: #eee;
	border-radius: var(--percentage-radius);
	display: block;
	margin-top: 0;
	width: 100%;
	height: var(--percentage-height);
}

.progress-wrapper {
  margin-top: 6px;
}

.percentage .bar {
	background: #333;
	border-radius: var(--percentage-radius) 0 0 var(--percentage-radius);
	display: block;
	height: var(--percentage-height);
  transition: width 1s;
}

.stale .percentage .bar {
	background: #9d1010;
}

.wrapper-percentage .percentage {
  margin-top: 1px;
  width: 2.15rem;
}


/* Modal */

.background {
	background: rgba(0, 0, 0, 0.7);
	bottom: 0;
	display: none;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 60000;
}

form.modal {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
	display: none;
	left: 0;
	margin: 0px auto;
	max-width: 400px;
	padding: 25px;
	position: absolute;
	right: 0;
	top: 20px;
	width: 90%;
	z-index: 75000;
}

form.modal h2 {
	font-size: 1.2em;
	font-weight: normal;
	margin-bottom: .75em;
	margin: 0;
}

form.modal label {
	color: #6993b4;
	display: block;
	font-size: .9em;
	line-height: 1.1em;
	margin-bottom: .2em;
	margin-top: .75em;
}

form.modal input[type=text],
form.modal input[type=date] {
	border-radius: 3px;
	border: solid 1px #bbb;
	font-size: 1em;
	padding: 3px 4px;
	width: 100%;
}

form.modal input[type=text]:focus,
form.modal input[type=date]:focus {
	border-color: #aaa;
	outline: none;
}

form.modal textarea {
	border-radius: 3px;
	border: solid 1px #bbb;
	font-size: 1em;
	margin: 0;
	min-height: 120px;
	max-height: 180px;
	padding: 3px 4px;
	width: 100%;
}

form.modal textarea:focus,
form.modal textarea:focus {
	border-color: #aaa;
	outline: none;
}

form.modal input[type=submit] {
	-webkit-appearance: none;
	background: #5997d6;
	border-radius: 3px;
	border: none;
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: .9em;
	margin-top: 1.5em;
	padding: 5px 10px 6px;
}

form.modal input[type=submit]:hover {
	background: #000;
}

form.modal a.cancel-link {
	color: #888;
	cursor: pointer;
	float: right;
	font-size: .8em;
	text-decoration: none;
}

form.modal a.cancel-link:hover {
	color: #000;
}

form.modal input[name=tags] {
	font-size: 1em;
}

form.modal.padless {
	padding: 0;
}

form.modal.padless .modal-group {
	padding-left: 15px;
	padding-right: 15px;
}

/*
@media screen and (min-width: 700px) {
	form.modal.padless .modal-group {
		padding-left: 25px;
		padding-right: 25px;
	}
}
*/


/* On-page forms */
/* -------------------------------------------------- */

form .group label {
  color: hsl(224, 8%, 46%);
	display: block;
  font-size: 0.9rem;
	margin-bottom: .1em;
}

form .group section {
	margin-bottom: 1em;
}

form input[type=text], form input[type=number], form input[type=password], form input[type=url] {
	border: solid 1px #bbb;
	border-radius: 2px;
	font-size: 1.2em;
	padding: 4px 6px;
}

form input[type=text]:focus, form input[type=number]:focus, form input[type=password]:focus, form input[type=url]:focus {
	outline: none;
}

form input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

form input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

form input.button {
	background: #6392c8;
	border: none;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	font-size: 1em;
	padding: 4px 10px 6px;
	-webkit-appearance: none;
}

form input.button:hover {
	background: #444;
}

form .group.optional {
	border-top: solid 1px hsl(224, 11%, 17%);
	margin-top: 3em !important;
	padding-top: 2em;
}

form .group.optional label {
    color: hsl(224, 8%, 46%);
}

form .group.optional input[type=text],
form .group.optional input[type=number],
form .group.optional input[type=password] {
	font-size: 1.2em;
	padding: 1px 3px 2px;
}

form .group.optional input[type=number] {
	width: 2.25em;
}

form .group.links a {
	color: #999;
	margin-right: 15px;
	text-decoration: none;
}

form .group.links a:hover {
	color: #111;
}


/* Login page */
/* -------------------------------------------------- */

#dialog {
  margin-top: 8rem;
}

form.login {
	margin-top: 1rem;
	padding-bottom: 1.5em;
}

form.login input {
  background: hsl(220, 10%, 11%);
  border: none;
  color: hsl(220, 10%, 80%);
  font-size: 1.6rem;
}

form.login input[type=text],
form.login input[type=password] {
  padding: 9px 13px 12px;
  width: 100%;
}

form.login input[type=submit] {
  background: hsl(220, 33%, 30%);
  font-size: 1.4rem;
  width: 100%;
  margin-top: 0.5rem;
  padding-top: 9px;
  padding-bottom: 12px;
}


/* Add book */
/* -------------------------------------------------- */

form.book-form {
  font-size: 1.1em;
  margin-top: 0.5rem;
}

form.book-form .group + .group,
form.book-form .horizgroup + .group {
	margin-top: .75em;
}

form.book-form .group.submit {
	margin-top: 1.25em;
}

form.book-form .horizgroup {
  display: flex;
  gap: 1rem;
  margin-top: 0.75em;
}

form.book-form .horizgroup .group {
  flex: 1;
  margin-top: 0;
}

form.book-form select {
  background: hsl(220, 10%, 11%);
  border: none;
	border-radius: 2px;
  color: hsl(220, 10%, 80%);
	font-size: 1.2rem;
	padding: 5px;
  width: 100%;
}

form.book-form select#tags {
  height: 7em;
}

form.book-form input,
form.book-form textarea {
  background: hsl(220, 10%, 11%);
  border: none;
  color: hsl(220, 10%, 80%);
  flex: 1;
  font-size: 1.2rem;
  padding: 6px 11px 8px;
  width: 100%;
}

form.book-form input[type=number] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

form.book-form [name=add-omnibox] {
  background: hsl(212deg 18% 18%);
  font-size: 1.3rem;
  resize: none;
}

form.book-form [name=add-omnibox]:focus {
  outline: none;
}

form.book-form input.button {
  background: hsl(220, 33%, 30%);
}


/* Search */
/* -------------------------------------------------- */

.search {
	margin-bottom: 1.5em;
	padding: 0 20px;
}

.search input[type=text] {
	background: rgba(0, 0, 0, 0.2);
	border: none;
	border-radius: 2px;
	color: #fff;
	font-size: 1em;
	padding: 4px 6px 5px;
	width: 120px;
}

.search input[type=text]:focus {
	outline: none;
}

.search button {
	-webkit-appearance: none;
	background: none;
	border: none;
	color: #6c8098;
  color: hsl(220, 35%, 40%);
	cursor: pointer;
	font-size: 1em;
	padding: 4px 8px 5px;
}

.search button object {
	height: .8em;
	margin: 2px 0 0;
	width: .8em;
}

.search button:hover {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 2px;
}


/* Detail page */
/* -------------------------------------------------- */

.detail .entry {
	color: #437dc4;
	cursor: pointer;
	float: right;
	font-weight: 600;
	margin-left: 20px;
	text-align: center;
	width: 4.5em;
}

.detail .entry .page_number {
	background: #e5f5fd;
	border-radius: 1em;
	font-size: 1.3em;
	padding: 2px 10px 3px;
}

.detail .entry .sub {
	color: hsl(220, 20%, 40%);
	font-size: 0.8rem;
	font-style: italic;
  font-weight: 400;
	line-height: 1.1;
  text-align: right;
}

.detail .entry .sub .label {
	color: hsl(220, 20%, 40%);
	display: block;
	font-size: .8em;
	line-height: 1em;
	margin-top: 4px;
}

.detail .entry .sub .label .total {
	color: hsl(220, 20%, 60%);
	padding: 0 1px;
}

.detail .entry .sub .left .pages {
	color: hsl(220, 20%, 60%);
	padding: 0 1px;
}

.detail.info h1 {
	color: #333;
  font-size: 1.5rem;
  font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	margin-top: 5px;
}

.detail.info h1 a.edit {
	color: #999;
	font-size: .7em;
	font-weight: normal;
	margin-left: 3px;
	text-decoration: none;
}

.detail.info h1 a.edit:hover {
	color: #444;
}

.detail.info h2 {
	color: #888;
	font-size: 1.2rem;
	font-weight: 400;
	margin: 0;
  margin-top: 0.3rem;
	padding: 0;
}

.detail .tags.group {
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

.detail h3 {
	color: hsl(220, 15%, 40%);
	font-size: 1rem;
  font-style: italic;
  font-weight: 400;
	margin-bottom: .5rem;
	margin-top: 1rem;
}

/* */

.detail.comments {
  margin-block-start: 2rem;
  margin-block-end: 3rem;

  & h3 {
    margin-bottom: 0;
  }

  & ul {
    margin: 0;
    padding: 0;
  }

  & li {
    border-top: solid 1px hsl(233 24% 14%);
    list-style: none;
    overflow: hidden;
    padding-block: 1rem;

    &:first-child {
      border-top: none;
    }
  }

  & .comment {
    color: hsl(220 15% 68%);
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.25;
    margin-bottom: 0.25rem;
  }

  & .dateinfo {
    color: hsl(220 25% 25%);
    font-size: 0.85rem;
    line-height: 1.2;
    text-align: right;
  }
}

.detail.entries ul {
	margin: 0;
	padding: 0;
}

.detail.entries li {
	border-top: solid 1px hsl(233 24% 14%);
	list-style: none;
	overflow: hidden;

  &:first-child {
    border-top: none;
  }
}

.detail.entries li:hover span {
	color: #5278b2;
}

.detail.entries li:hover * {
	color: #5278b2;
}

.detail.entries a {
	color: #444;
	display: block;
  padding: 4px 0 5px;
	text-decoration: none;
}

.detail.entries .dateinfo {
  align-items: baseline;
	color: #ccc;
  display: flex;
	font-size: 1rem;
  gap: 3px;
  justify-content: space-between;
}

.detail.entries span.time {
	margin-top: 1px;
}

.detail.entries .page-number {
	font-size: 1em;
	line-height: 1.1em;
}

.detail.entries .page-number span {
	color: #888;
	display: inline;
}

.detail.entries .comment {
	font-size: 1.1rem;
  font-style: italic;
	line-height: 1.25em;
	margin-bottom: 4px;
	margin-top: 6px;
}

.detail.metadata {
  font-size: 1.2rem;
	margin-top: 1rem;
}

.detail.metadata .group + .group {
	margin-top: 0.5rem;
}

.detail.metadata .group {
  align-items: baseline;
  display: flex;
}

.detail.metadata .group h3 {
	margin: 0;
  width: 8rem;
}

.detail.metadata .group p {
	margin: 0;
}

.detail.metadata .group p span {
	color: #bbb;
	font-size: .8em;
  margin-left: 0.2rem;
}

.detail.metadata .group p + p {
  margin-left: 1rem;
}

.detail.metadata .abandon-button {
  background: hsl(220, 41%, 25%);
  display: inline-block;
  color: #fff;
  padding: 0.25rem 0.8rem 0.3rem;
  margin-bottom: 1rem;
  text-decoration: none;
  border-radius: 0.2rem;
}

.detail.edit {
	border-top: solid 1px #ddd;
	margin-top: 3em;
	padding-top: 1em;
}

.detail.edit a {
	color: #bbb;
	display: inline-block;
	font-size: .9em;
	text-decoration: none;
}

.detail.edit a + a {
	margin-left: 10px;
}

.detail.edit a:hover {
	color: #444;
}


/* Charts */
/* -------------------------------------------------- */

.chart-wrapper {
	max-width: 100%;
	width: 100%;
}

.chart-wrapper rect.base {
	fill: hsl(337 47% 36%);
}

.chart-wrapper rect.new {
	fill: hsl(93 27% 50%);
}

.chart-wrapper text {
	fill: white;
	font-size: 9px;
	font-family: Freight, -apple-system, sans-serif;
	text-anchor: end;
}

.chart-wrapper .axis text {
	fill: hsl(216 22% 35%);
}

.chart-wrapper .axis path,
.chart-wrapper .axis line {
	fill: none;
	stroke: #bbb;
	shape-rendering: crispEdges;
}

.chart-wrapper line.baseline {
	fill: none;
	stroke: #a8456b;
	shape-rendering: crispEdges;
}

/*
@media screen and (min-width: 700px) {
	header[role=banner] {
		background: none !important;
		font-size: .9em;
		left: 0px;
		padding-right: 20px;
		position: fixed;
		text-align: right;
		top: 50px;
		width: 300px;
	}

    body.dark header[role=banner] {
        border-bottom: none;
    }

	header[role=banner] h1 {
		position: initial;
		text-align: right;
	}

	header[role=banner] h1 a {
		padding-top: 60px;
	}

	header[role=banner] h1 a.home {
		color: #8ca7b5;
	}

	header[role=banner] a.menu {
		display: none;
	}

	nav[role=menu] {
		-moz-transition: none;
		-o-transition: none;
		-webkit-transition: none;
		transition: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		-webkit-transform: none;
		transform: none;
		border: none;
		bottom: 0px;
		display: block;
		left: 0px;
		margin-bottom: 0;
		overflow: hidden;
		overflow-y: auto;
		padding-top: 100px;
		padding-bottom: 140px;
		position: fixed;
		top: 0px;
		width: 300px;
	}

	main#content {
		font-size: 1.1em;
		margin-left: 360px;
		margin-top: 0;
		padding-bottom: 100px;
	}

	main#content .content {
		padding-right: 50px;
	}

	.content .folder + .folder {
		margin-top: 2.5em;
	}

	ul.booklist li a span.tag {
		margin-top: 12px;
	}
}
*/


/* Tags */
/* -------------------------------------------------- */

.tags {
	display: block;
	font-size: .75em;
	margin-top: 5px;
}

.tags .tag {
	display: inline-block;
	margin-right: 10px;
	color: #bbb;
}

.tags .tag .blob {
	background: #78b4df;
	border-radius: 1em;
	display: inline-block;
	height: 0.4em;
	margin-right: 3px;
	position: relative;
	top: -2px;
	width: 0.4em;
}


/* Add entry */
/* -------------------------------------------------- */

ul.booklist {
  transition: opacity 0.3s, filter 0.3s;
}

ul.booklist:has(li.reading.open) li.reading .wrapper {
  filter: blur(2px);
  opacity: 0.3;
  pointer-events: none;
}

.reading .add-entry {
  -webkit-user-select: none;
  background: hsl(220 10% 9%);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 5px 10px hsla(220 20% 3% / 80%);
  opacity: 0;
  position: absolute;
  flex-direction: column;
  top: 130px;
  left: 20px;
  right: 20px;
  height: 300px;
  pointer-events: none;
  transition: opacity 0.3s, filter 0.3s;
  display: flex;
  z-index: 9000000;

  & header {
    border-radius: 5px 5px 0 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-end;
    align-items: end;
    padding: 0;

    & h2 {
      font-size: 1.2em;
      font-weight: 400;
      align-items: baseline;
      display: flex;
      margin: 0;
      padding: 0.1rem 1rem 0.4rem;
      max-width: 100%;
    }
  }
}

.reading.open .add-entry {
  opacity: 1;
  pointer-events: auto;
}

.reading .add-entry.submitting {
  filter: blur(5px);
}

.reading .add-entry h1 {
  color: hsl(220 15% 30%);
  font-size: 13pt;
  font-style: italic;
  margin: 0;
  padding-block-start: 5px;
  padding-inline: 0.95rem;
  text-align: right;
  width: 100%;
}

.reading .add-entry h2 span.page {
	color: hsl(220, 10%, 20%);
  flex: 1;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 0.6rem;
	letter-spacing: 0.08em;
  margin-right: 0.5rem;
  text-align: right;
	text-transform: uppercase;
}

.reading .add-entry .of-page {
	color: hsl(220, 20%, 30%);
	font-weight: 400;
  letter-spacing: 0.05rem;
  text-align: right;
  text-transform: uppercase;
}

.reading .add-entry .end-page {
	color: hsl(220, 30%, 80%);
	font-size: 1.5rem;
  font-weight: 400;
	margin-left: 0.3rem;
  letter-spacing: -0.01em;
}

.reading .add-entry footer {
  display: flex;
  gap: 0.95rem;
  justify-content: space-between;
  padding: 0.95rem;
}

.reading .add-entry .button {
	border-radius: 5px;
  cursor: pointer;
  display: inline-block;
	font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.1;
  padding: 0.6rem 1rem 0.7rem;
  text-align: center;
}

.reading .add-entry input[type=submit].button.save {
  background: hsl(220 25% 17%);
  color: hsl(220 10% 90%);
  flex: 1;
}

.reading .add-entry input[type=submit].button.save:hover {
	background: hsl(220 28% 20%);
}

.reading .add-entry input.button.cancel {
  background: hsl(0 21% 18%);
  color: hsl(0 10% 90%);
  width: 6rem;
}

.reading .add-entry input.button.cancel:hover {
	background: hsl(0, 28%, 20%);
}

.reading .add-entry * {
}

.reading .add-entry .entry-box {
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
  background: none;
	border: none;
	color: hsl(220, 30%, 80%);
	font-size: 1.5rem;
  font-weight: normal;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-right: 0.4rem;
	padding: 0;
  text-align: right;
	width: 3rem;
}

.reading .add-entry textarea#comment {
  background: hsl(220, 10%, 7%);
  border: none;
  border-radius: 0;
  color: hsl(220, 10%, 80%);
  flex: 1;
	font-size: 1.3rem;
	line-height: 1.1;
  margin-top: 0;
  margin-bottom: 0;
	padding: 0.95rem;
	resize: none;
	width: 100%;
  -webkit-user-select: auto;
}

.reading .add-entry textarea#comment:focus {
	outline: none;
}


/* Stats page */
/* -------------------------------------------------- */

ul.stats {
	margin: 0 0 1em 0;
	padding: 0;
    -webkit-user-select: none;
}

ul.stats + ul.stats {
	border-top: solid 1px #ccc;
	margin-top: 1em;
	padding-top: 1em;
}

ul.stats li {
	list-style: none;
	overflow: hidden;
	padding: 12px 0;
}

ul.stats li + li {
	border-top: solid 1px #ddd;
}

ul.stats li span {
	display: inline-block;
}

ul.stats li .label {
	color: #5278b2;
	display: block;
	float: left;
	font-size: 1.1em;
	font-weight: 600;
}

ul.stats li span.group {
    color: #999;
	display: block;
	margin-left: 110px;
}

ul.stats li span.group b {
	color: #201915;
}

ul.stats li .pages {
	min-width: 125px;
}

ul.stats li .started {
	font-size: .8em;
	margin-top: 3px;
	width: 125px;
}

ul.stats li .abandoned {
	font-size: .8em;
	margin-left: 0;
}

ul.stats li .pages-per-day {
	font-size: .8em;
}

ul.stats li span.group .started b {
	color: #888;
}

ul.stats li span.group .abandoned b {
	color: #888;
}

ul.stats.dashboard {
	margin-bottom: 0.6em;
}

ul.stats.dashboard li {
	padding-top: 0;
}

ul.stats.dashboard li .label {
	color: #aaa;
	font-size: 1em;
	font-weight: normal;
}

ul.stats.dashboard li > div + div {
	margin-top: 10px;
}

ul.stats.dashboard .weekpages {
	margin-right: 20px;
}

ul.stats.dashboard .weekdays {
	margin-right: 20px;
}

ul.stats.dashboard div.week {
    clear: both;
	font-size: .9em;
	margin: 0;
	margin-top: 10px;
}

ul.stats.dashboard div.week:not(.secondary) {
	margin-top: 10px;
}

ul.stats.dashboard li div.week span.group b {
	color: hsl(23, 0%, 45%);
    margin-right: 2px;
}

/* Media queries */
/*
@media screen and (min-width: 1200px) {
    body {
        font-size: 120%;
    }

	.content .folder {
		max-width: 850px;
	}

	.content .container {
		max-width: 850px;
	}

	ul.stats.dashboard {
        margin-bottom: 1.5em;
        margin-top: 0.2em;
        font-size: .9em;
    }

    ul.booklist {
        font-size: 90%;
        margin-bottom: 25px;
    }

	ul.booklist li {
		display: flex;
		flex-wrap: wrap;
	}

	ul.booklist li.container {
		padding-bottom: 0.7em;
		padding-top: 0.7em;
	}

	ul.booklist li a span.tag {
		margin-top: 10px;
	}

	ul.booklist li .wrapper {
        flex: 1;
    }

	ul.booklist li .title-wrapper {
        display: flex;
		flex: 1.4;
	}

	ul.booklist li .title-wrapper .title {
        flex: 1;
        min-width: 16em;
    }

	ul.booklist li a.title span.label {
		font-size: 1.2em;
	}

	ul.booklist li a.title {
        flex: 1;
    }

	ul.booklist li a.metadata {
        margin-left: 30px;
        min-width: 12em;
	}

	ul.booklist li .entry {
		display: flex;
		flex: 1;
		margin-left: 30px;
		overflow: hidden;
	}

	ul.booklist li .entry .page_number {
        flex-direction: row;
		margin-left: 15px;
        width: 100%;
    }

	ul.booklist li .entry .page_number .num {
        width: 4em;
    }

	ul.booklist li .entry .days-ago {
        flex: 1;
		margin-left: 25px;
        text-align: left;
    }

	ul.booklist li .entry .sub {
		font-size: .75em;
		margin-left: 25px;
		padding: 2px 0 0;
		text-align: left;
	}

	ul.booklist li .info {
		font-size: .7em;
		line-height: 1.1em;
		text-align: right;
	}

	ul.booklist li .percentage + .info {
		text-align: left;
	}

	ul.booklist li .percentage {
		margin-top: 3px;
	}

	ul.stats li > div {
		display: inline-block;
	}

	ul.stats.dashboard li > div + div {
		margin-left: 180px;
		margin-top: 0;
	}

	ul.stats.dashboard li > div.week.secondary {
        display: flex;
	}

	ul.stats.dashboard li > div.week.secondary .label {
        width: 95px;
    }

	ul.stats.dashboard li > div.week.secondary span.group {
        flex: 1;
    }

	ul.stats li span.group {
		display: inline-block;
		margin-left: 50px;
	}

	ul.stats li span.label {
		width: 80px;
	}

	ul.stats li .pages {
		width: 170px;
	}

	ul.stats li .finished {
		width: 120px;
	}

	ul.stats li .started {
		width: 100px;
	}

	ul.stats.dashboard li .pages {
		width: 100px;
	}

	ul.stats.dashboard li span.group {
		margin-left: 40px;
	}

	.reading .add-entry {
		flex: 100%;
		order: 5;
	}

	ul.stats.dashboard div.week span.label {
		width: 95px;
	}

	ul.stats.dashboard div.week .group {
		margin-left: 25px;
	}
}

*/

/* dark mode */

body.dark {
    background: #111;
    background: hsl(224, 7%, 7%);
    background: hsl(220, 10%, 8%);
}

body.dark nav[role=menu] {
    background: hsl(224, 12%, 4%);
}

body.dark .search input[type=text] {
    background: hsl(210, 18.8%, 6.3%);
}

@media screen and (max-width: 500px) {
  body.dark nav[role=menu] {
    background: rgba(0, 0, 0, 0.4);
    background: hsla(220, 7%, 5%, 0.4); /* tmp */
  }

  body.dark .search input[type=text] {
    background: none;
    border: solid 1px hsl(210, 12%, 20%);
    border: solid 1px hsl(220, 32%, 20%);
    border-radius: 5rem;
    padding: 0.4rem 1rem;
    width: 12rem;
  }
}

body.dark nav[role=menu] a {
    color: hsl(210, 8%, 46%);
    color: hsl(220, 15%, 46%); /* tmp */
}

body.dark header[role=banner] {
    background: hsl(220, 10%, 6%);
}

body.dark nav[role=menu] a.logout {
    color: hsl(224, 8%, 26%);
    color: hsl(210, 8%, 26%);
    color: hsl(220, 28%, 26%); /* tmp */
}

/*
@media screen and (min-width: 700px) {
    body.dark header[role=banner] h1 a.home {
        color: hsl(224, 8%, 26%);
    }
}
*/

body.dark ul.booklist {
  background: hsl(220, 10%, 10%);
  border-bottom: none;
  /* box-shadow: 0 0 25px hsl(220, 10%, 4%); */
}

body.dark ul.booklist li.container {
  border-top: none;
}

body.dark ul.booklist li.container + li.container {
  border-top: solid 1px #000;
  /* box-shadow: 0 0 25px hsl(220, 10%, 4%); */
}

body.dark ul.booklist li .entry {
  display: flex;
  justify-content: flex-end;
  justify-content: end;
  padding-right: 1rem;
  place-items: center;
  text-align: right;
}

body.dark ul.booklist li:not(.longterm) .entry {
  background: hsl(0, 45%, 24.5%);
  color: hsl(95, 40%, 65%);
}

body.dark ul.booklist li.longterm .entry {
  background: hsl(220, 11%, 9%);
}

body.dark ul.booklist li.longterm .entry .days-ago {
  color: hsl(220, 10%, 20%);
}

body.dark ul.booklist li:not(.longterm) .entry.days-0 {
  background: hsl(220, 11%, 11.5%);
}

body.dark ul.booklist li:not(.longterm) .entry.days-0 .days-ago {
  color: hsl(220, 10%, 20%);
}

body.dark ul.booklist li:not(.longterm) .entry.days-1 {
  background: hsl(220, 27%, 17.5%);
}

body.dark ul.booklist li:not(.longterm) .entry.days-2 {
  background: hsl(220, 28%, 20.5%);
}

body.dark ul.booklist li:not(.longterm) .entry.days-3 {
  background: hsl(0, 30%, 18.5%);
}

body.dark ul.booklist li:not(.longterm) .entry.days-4 {
  background: hsl(0, 40%, 20.5%);
}

body.dark ul.booklist li .entry .page_number .num {
  background: none;
  color: hsl(220, 10%, 80%);
  font-weight: normal;
}

body.dark ul.booklist li .entry .actual {
  color: hsl(220, 20%, 40%);
  font-weight: normal;
  line-height: 1;
}

body.dark ul.stats.dashboard li .label {
    color: hsl(224, 8%, 46%);
}

body.dark ul.stats li span.group {
    color: hsl(224, 8%, 26%);
}

body.dark ul.stats li span.group b {
    color: hsl(224, 8%, 66%);
}

body.dark ul.stats.dashboard li div.week span.group b {
    color: hsl(224, 8%, 66%);
    font-weight: normal;
}

body.dark ul.stats.dashboard li span.group .fiction {
    margin-right: 20px;
}

body.dark ul.stats.dashboard li div.week span.group .fiction b {
    color: hsl(96, 43%, 60%);
}

body.dark ul.stats.dashboard li div.week span.group .fiction.under b {
    color: hsl(0, 54%, 53%);
}

body.dark ul.booklist li a span.label {
    color: hsl(224, 8%, 86%);
    color: hsl(220, 18%, 88%);
    font-weight: normal;
    font-style: italic;
}

body.dark ul.booklist li a.title .format {
  align-self: start;
  background: hsl(220 15% 15%);
  border-radius: 3px;
  color: hsl(220 15% 50%);
  font-family: -apple-system;
	font-size: 5pt;
  font-weight: 550;
  letter-spacing: 0.03rem;
	line-height: 1.1;
  margin-block-start: 3px;
  text-transform: uppercase;
  padding: 0.5px 3px 1px;
}

body.dark ul.booklist li a.title span.label.title {
  font-size: 1.275rem;
  line-height: 1.05;
}

body.dark ul.booklist li a.title .subtitle {
	color: hsl(220, 15%, 35%);
  display: block;
  font-size: 0.7rem;
  line-height: 1.1;
  margin-top: 1pt;
}

body.dark ul.booklist li.stale a span.label {
    color: hsl(0, 84%, 62%);
}

body.dark ul.booklist li .info {
    color: hsl(220, 10%, 26%); /* tmp */
}

body.dark ul.booklist li .info b {
  color: hsl(220, 10%, 30%);
}

body.dark ul.booklist li .entry .days-ago {
  color: hsl(220, 15%, 30%);
  color: hsl(0, 15%, 30%);
  font-weight: normal;
  font-size: 5.6pt;
  font-style: normal;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;

  & b {
    color: hsl(0, 18%, 40%);
  }
}

body.dark ul.booklist li .entry .days-ago + .days-ago {
  font-size: 6.5pt;
  margin-top: 3pt;
}

body.dark ul.booklist li .entry .days-ago * {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

body.dark ul.booklist li .entry .days-ago b {
  color: hsl(220, 10%, 36%);
  font-weight: normal;
}

body.dark ul.booklist li .entry .days-ago i {
  color: hsl(220, 10%, 36%);
  font-weight: normal;
  font-style: normal;
}

body.dark ul.booklist li .entry .days-ago i b {
  color: hsl(220, 10%, 46%);
  font-style: normal;
}

body.dark ul.booklist li .entry .days-ago + .days-ago b {
  color: hsl(220, 10%, 30%);
}

body.dark ul.booklist li .entry.days-1 .days-ago {
  color: hsl(220, 27%, 35%);

  & b {
    color: hsl(220, 30%, 45%);
  }
}

body.dark ul.booklist li .entry.days-2 .days-ago {
  color: hsl(220, 27%, 35%);

  & b {
    color: hsl(220, 30%, 45%);
  }
}

body.dark ul.booklist li .entry.days-3 .days-ago {
  color: hsl(0, 27%, 35%);

  & b {
    color: hsl(0, 30%, 45%);
  }
}

body.dark .percentage {
  background: hsl(220, 10%, 15%);
}

body.dark .stale .percentage .bar {
  background: hsl(210, 66%, 45%);
}

body.dark ul.booklist li.stale .info .num {
    color: #ddd;
}

body.dark ul.booklist li.stale .info .percent-sign {
    color: #888;
}

body.dark .percentage .bar {
    background: hsl(0, 37%, 49%);
}

body.dark ul.booklist li .info .num {
    color: hsl(220, 10%, 55%);
}

body.dark ul.booklist li .info .percent-sign {
    color: hsl(220, 10%, 30%);
}

body.dark .detail.info h1 {
    color: #fff;
}

body.dark .detail .entry .page_number {
  background: inherit;
  color: hsl(220, 35%, 80%);
  font-weight: normal;
  padding: 0;
  text-align: right;
}

body.dark .detail.metadata .group p {
    color: hsl(224, 8%, 76%);
    color: hsl(220, 28%, 76%);
}

body.dark .detail.metadata .group p span {
    color: hsl(224, 8%, 26%);
    color: hsl(220, 18%, 26%); /* tmp */
}

body.dark .detail.entries .dateinfo {
    color: hsl(224, 8%, 26%);
    color: hsl(220, 18%, 26%); /* tmp */
}

body.dark .detail.entries .comment {
    color: hsl(224, 8%, 76%);
    color: hsl(220, 18%, 76%); /* tmp */
}

body.dark .chart-wrapper .axis path,
body.dark .chart-wrapper .axis line {
    stroke: hsl(216 22% 35%);
}

body.dark .detail.info h1 a.edit {
    color: hsl(224, 8%, 46%);
    color: hsl(210, 8%, 46%);
    color: hsl(220, 18%, 46%);
}

body.dark .detail.info h2 {
    color: hsl(224, 8%, 46%);
    color: hsl(210, 8%, 46%);
    color: hsl(220, 18%, 46%);
}

body.dark .tags .tag {
    color: hsl(224, 8%, 46%);
    color: hsl(210, 8%, 46%);
    color: hsl(220, 13%, 46%);
}

body.dark .detail.entries .page-number span {
    color: hsl(224, 8%, 46%);
    color: hsl(210, 8%, 46%);
    color: hsl(220, 13%, 46%);
}

body.dark ul.booklist li .info .pages {
    color: hsl(224, 8%, 36%);
    color: hsl(210, 8%, 36%);
    color: hsl(220, 10%, 36%); /* tmp */
}


body.dark ul.booklist li .metadata {
  align-items: baseline;
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

body.dark ul.booklist li .metadata * {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

body.dark ul.booklist li .metadata .block {
  display: flex;
  gap: 5px;
}

body.dark ul.booklist li .metadata .block .label {
  color: hsl(220, 15%, 35%);
  font-size: 5.5pt;
  font-style: normal;
}

body.dark ul.booklist li .metadata .block .label .value {
  color: hsl(220, 10%, 55%);
  font-size: 8pt;
  font-weight: 550;
}

body.dark ul.booklist li .metadata .block .label .value.empty {
  color: hsl(220, 10%, 30%);
}

body.dark ul.booklist li .metadata .block .label .value.small {
  color: hsl(220, 10%, 40%);
  font-size: 6pt;
  font-weight: 500;
}

body.dark ul.booklist li.stale .metadata .block .label {
  color: #888;
}

body.dark ul.booklist li.stale .metadata .block .label .value {
  color: #ddd;
}

body.dark ul.booklist li .metadata .block .label b {
  color: hsl(220, 10%, 55%);
  font-weight: 600;
}

body.dark ul.booklist li .metadata .block.wrapper-percentage {
  align-items: baseline;
}

/*
body.dark ul.booklist li .metadata .block.wrapper-today {
  width: 3rem;
}
*/

body.dark ul.booklist li .metadata .block.wrapper-today .label .empty {
  color: var(--under-color);
}

body.dark ul.booklist li .metadata .block.wrapper-today .label .under {
  color: var(--under-color);
}

body.dark ul.booklist li .metadata .block.wrapper-today .label .over {
  color: hsl(220, 14%, 52%);
}

body.dark ul.booklist li .metadata .stacked {
  margin-top: 0.5pt;
}

body.dark ul.booklist li .metadata .stacked .label {
  align-items: baseline;
  color: hsl(220, 15%, 35%);
  display: flex;
  font-size: 5.5pt;
  gap: 3px;
  margin-bottom: 0;
}

body.dark ul.booklist li .metadata .stacked .label .value {
  color: hsl(220, 12%, 45%);
}

body.dark ul.booklist li .metadata .block.wrapper-pages-left {
  align-items: baseline;
  justify-content: flex-end;
  justify-content: end;
  flex: 1;
}

/*
body.dark ul.booklist li .metadata .block.wrapper-today .label .value {
  color: hsl(220, 10%, 45%);
}

body.dark ul.booklist li .metadata .block.wrapper-pages-left .label .value {
  color: hsl(220, 10%, 45%);
}
*/

body.dark ul.booklist li .metadata .block.wrapper-pages-left .label .value.actual {
  font-size: 6pt;
}

body.dark ul.booklist li  .progress-wrapper {
  align-items: baseline;
  display: flex;
  gap: 20px;
}

body.dark ul.booklist li .progress-wrapper .percentage {
  flex: 0.3;
}

body.dark ul.booklist li .block-wrapper {
  display: inline-flex;
  flex: 1;
  justify-content: flex-end;
  justify-content: end;
}

body.dark ul.booklist li .pageblocks {
  display: inline-flex;
  justify-content: flex-end;
  justify-content: end;
  gap: 1px;
}

body.dark ul.booklist li .pagetodayblocks {
  display: inline-flex;
  justify-content: flex-end;
  justify-content: end;
  gap: 1px;
}

body.dark ul.booklist li .pageblock {
  background: hsl(220, 16%, 37%);
  background: hsl(207, 20%, 20%);
  border-radius: var(--percentage-radius);
  height: var(--percentage-height);
  max-height: var(--percentage-height);
  margin-top: 1px;
  width: 7px;
  opacity: 0.5;
}

body.dark ul.booklist li .pageblock.remainder {
  background: hsl(220, 16%, 20%);
}

body.dark ul.booklist li .pagetodayblock {
  background: hsl(320, 16%, 37%);
  background: hsl(320, 36%, 33%);
  border-radius: 3px;
  height: 5px;
  margin-right: 8px;
  width: 7px;
}

body.dark ul.booklist li .pagetodayblock.remainder {
  background: hsl(320, 16%, 20%);
}

body.dark ul.booklist {
  margin-bottom: 10px;
}

body.dark #content ul.dashboard + div.folder ul.booklist {
  margin-bottom: 100px;
}

body.dark .fiction-pages {
    display: flex;
    margin-top: 20px;
    max-width: 300px;
    opacity: 0;
}

body.dark .fiction-pages input[type=number] {
    background: hsl(224, 12%, 10%);
    border: none;
    border-radius: 10px 0 0 10px;
    color: #fff;
    font-size: 1.6em;
    padding-left: 10px;
    padding-top: 1px;
    width: 3em;
}

body.dark .fiction-pages input[type=submit] {
    background: hsl(224, 22%, 20%);
    border: none;
    border-radius: 0 10px 10px 0;
    color: #fff;
    cursor: pointer;
    flex: 1;
    font-size: 1.3em;
    padding-left: 20px;
    padding-right: 20px;
}

body.dark .fiction-pages input[type=submit]:hover {
    background: #111;
}

body.dark .fiction-pages input[type=submit]:focus {
    outline: none;
}

/*
@media screen and (min-width: 700px) {
    body.dark .fiction-pages input[type=submit] {
        font-size: 1.1em;
        padding-top: 0;
        padding-bottom: 4px;
    }
}
*/

body.dark .fiction-pages-selector {
    color: hsl(224, 12%, 30%);
    cursor: pointer;
    font-size: .9em;
    margin-top: 10px;
}

body.dark .fiction-pages-selector:hover {
    color: #fff;
}

body.dark ul.stats li + li {
    border-top: solid 1px #333;
}

body.dark ul.stats + ul.stats {
    border-top: solid 1px #333;
}

body.dark ul.stats li .meta .label {
    color: #87ba8e;
    font-weight: normal;
    font-size: 1.2em;
    min-width: 110px;
}

body.dark ul.stats li .meta .label a {
    color: #87ba8e;
}

body.dark ul.stats li .meta .label a:hover {
    color: #fff;
}

body.dark header[role="banner"] h1 a.home {
    letter-spacing: 0.09em;
}

body.dark .content {
    padding-bottom: 200px;
}

ul.dashboard-stats {
    border-radius: 5px;
    color: hsl(220, 28%, 66%);
    display: flex;
    font-size: 1.1em;
    justify-content: space-between;
    list-style: none;
    margin-top: 0;
    max-width: 500px;
    padding: 0;
}

ul.dashboard-stats * {
    -webkit-user-select: none;
}

ul.dashboard-stats.daily-stats {
    margin-bottom: 1px;
}

ul.dashboard-stats li,
ul.stats ul.tags li {
    background: hsl(210, 12%, 8%);
    background: none;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    padding: 1px 0 4px;
    text-align: center;
    flex: 1;
}

ul.dashboard-stats.daily-stats li {
    border-radius: 0;
}

ul.dashboard-stats li.skinny {
  width: 2.1rem;
}

ul.dashboard-stats li.wide {
  width: 3.5rem;
}

ul.dashboard-stats .label,
ul.stats ul.tags .label {
  color: var(--dashboard-label);
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.03em;
}

ul.dashboard-stats .label {
  color: var(--dashboard-label);
  font-size: 0.4rem;
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1;
  margin-top: 1.5px;
}

ul.dashboard-stats .value {
  color: var(--dashboard-value);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.7rem;
  font-weight: 550;
  margin-top: 2px;
}

ul.dashboard-stats .value.super-low {
  color: hsl(220, 10%, 40%);
}

ul.dashboard-stats .value.low {
  color: hsl(220, 12%, 45%);
}

ul.dashboard-stats .value.medium {
  color: hsl(220, 14%, 50%);
}

ul.dashboard-stats .value.medium-high {
  color: hsl(220, 16%, 55%);
}

ul.dashboard-stats .value.high {
  color: var(--dashboard-value);
}

/* Today */

ul.dashboard-stats li.today {
  width: 2rem;
}

ul.dashboard-stats li.today .value {
  color: hsl(220, 30%, 85%);
  font-weight: 500;
}

ul.dashboard-stats li.today .value.super-low {
  color: hsl(0, 100%, 53%);
}

ul.dashboard-stats li.today .value.low {
  color: hsl(0, 64%, 41%);
}

ul.dashboard-stats li.today .value.medium {
  color: hsl(0, 56%, 56%);
}

ul.dashboard-stats li.today .value.medium-high {
  color: hsl(220, 16%, 70%);
}

ul.dashboard-stats li.today .label {
  color: hsl(210, 14.2%, 49.8%);
  color: hsl(220, 10%, 50%);
}

/* Monthly */

ul.monthly-stats {
  display: flex;
  margin: 0;
  margin-bottom: 0.4rem;
  opacity: 0.8;
  padding: 0;
  width: 100%;
}

ul.monthly-stats * {
  -webkit-user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

ul.monthly-stats li {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
}

ul.monthly-stats .label {
  color: #000;
  font-size: .45rem;
  font-weight: 600;
  letter-spacing: 0.02rem;
  overflow: hidden;
  padding: 0.01rem 0;
  text-align: center;
  text-overflow: clip;
}

ul.monthly-stats .percentage-label {
  color: rgba(0, 0, 0, 0.7);
  font-weight: 300;
}

ul.monthly-stats .bar {
  border-radius: 2rem;
  width: 100%;
}

ul.monthly-stats li:not(:last-child) {
  margin-right: 3px;
}

ul.dashboard-stats li.monthly,
ul.stats li.monthly {
    background: hsl(90, 12%, 14%);
    color: hsl(90, 44.1%, 78.2%);
    width: inherit;
}

ul.dashboard-stats li.monthly .label,
ul.stats li.monthly .label {
    color: hsl(90, 12%, 32%);
}

/* Monthly pages */

.monthly-pages {
  color: var(--dashboard-label);
  display: flex;
  font-size: 0.65rem;
  justify-content: space-between;
  margin-top: 0rem;
  margin-bottom: 0.2rem;
}

.monthly-pages + .monthly-pages {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

.monthly-pages .value {
  color: var(--dashboard-value);
  font-weight: 500;
  letter-spacing: 0;
  margin-right: 0rem;
}

.monthly-pages > div > span + span {
  margin-left: 0.3rem;
}

.monthly-pages * {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}


/* Tag */

ul.dashboard-stats li.tag {
    background: hsl(220, 12%, 14%);
    color: hsl(220, 28%, 66%);
    width: inherit;
}

ul.dashboard-stats li.tag .label {
    color: hsl(220, 19.1%, 45.1%);
}

/* Web books */
ul.booklist.webbooks li a.url {
	display: inline-block;
}

body.dark ul.booklist.webbooks li .url {
    color: hsl(148.8, 26.9%, 36.5%);
    display: inline-block;
    font-size: 0.9em;
    font-style: italic;
    line-height: 1.3em;
    margin-bottom: 5px;
    word-break: break-all;
}

body.dark ul.booklist.webbooks li.stale .url {
    color: hsl(0, 43.1%, 41.4%);
}

body.dark ul.booklist.webbooks .wrapper .entry .add {
    background: hsl(235, 12%, 14%);
    border-radius: 1em;
    color: hsl(213, 50%, 81%);
    display: block;
    font-size: 1.4em;
    margin-bottom: 5px;
    padding: 1px 10px 6px;
}

body.dark .reading.webbook .add-entry input[type=submit].button.save {
    background: hsl(313.7, 44.3%, 31%);
}

body.dark .reading.webbook .add-entry input[type=submit].button.save:hover {
    background: #000;
}

body.dark .reading.webbook .add-entry h2 {
    margin-right: 0px;
    flex: 1;
}

body.dark .reading.webbook .add-entry .entry-box {
    font-size: 1em;
    line-height: 1.1em;
    padding-top: 8px;
    padding-bottom: 11px;
    padding-left: 9px;
    width: 100%;
}

body.dark .reading.webbook .add-entry .location.comment input[type=text] {
    background: none;
    border: none;
    color: hsl(224, 8%, 86%);
    padding-left: 0;
    width: 100%;
}

body.dark .reading.webbook .add-entry .comment {
    border-bottom: solid 1px hsl(224, 8%, 16%);
}

body.dark .detail.info .url {
    color: hsl(224, 8%, 76%);
    font-style: italic;
}

body.dark .detail.info a.url {
    font-size: 0.8em;
    text-decoration: none;
}

body.dark .detail.info a.url:hover {
    color: #fff;
}

body.dark .detail.info .url a {
    color: hsl(343.8, 92.6%, 63.1%);
    font-style: italic;
    text-decoration: none;
}

body.dark .detail.info .url a:hover {
    color: #fff;
}

body.dark .detail.info .latest-url p {
    margin: 0;
}

body.dark .detail.info .latest-url h3 {
    margin-bottom: 2px;
}

body.dark ul.booklist {
    margin-bottom: 0;
}

body.dark ul.booklist li.container.selected {
  background: #0a0a0a;
}

body.dark ul.booklist.webbooks {
    border-bottom: solid 20px #000;
}

body.dark ul.booklist.webbooks li:last-child {
    border-bottom: solid 1px hsl(224, 8%, 14%);
}

body.dark .fiction.container {
    border-top: solid 1px hsl(224, 8%, 14%);
}

body.dark .content .folder + .folder {
    margin-top: 0;
}

body.dark header[role=banner] {
    border-bottom: solid 1px hsl(224, 8%, 14%);
    display: flex;
}

body.dark .monthly-dashboard {
  border-bottom: solid 1px hsl(224, 8%, 14%);
  border-bottom: solid 1px hsl(220, 30%, 18%); /* tmp */
  border-bottom: none; /* tmp */
  padding-bottom: 4px;
  padding: 0 15px;
}

body.dark header[role=banner] h1 {
  flex: 1;
	left: auto;
	overflow: inherit;
	position: inherit;
	right: auto;
}

body.dark header[role=banner] .menu {
    width: 80px;
}

body.dark header[role=banner] .pages {
    color: hsl(86.1, 44.7%, 59.6%);
    font-size: 1.1em;
    line-height: 100%;
    padding: 12px 15px .9em;
    text-align: right;
    width: 80px;
}

body.dark header[role=banner] .pages.under {
    background: #f00;
    color: #fff;
}

body.dark .fiction-pages {
    margin-bottom: 50px;
}

/*
@media screen and (min-width: 700px) {
    body.dark header[role=banner] {
        border-bottom: none;
        z-index: 40000000000;
    }

    body.dark header[role=banner] h1 {
        position: initial;
    }

    body.dark header[role=banner] h1 a.home {
        color: hsl(210, 11.9%, 26.3%);
    }

    body.dark header[role=banner] .pages {
        width: auto;
        padding: 0;
        padding-top: .7em;
    }

    body.dark ul.booklist {
        border-bottom: none;
        margin-top: 50px;
    }

    body.dark ul.booklist li.container:first-child {
        border-top: none;
    }
}
*/

body.dark .dashboard-stats .day-tags {
    display: flex;
    flex-direction: column-reverse;
    border-radius: 0;
    height: 2rem;
    opacity: 0.8;
    margin-top: 0.1rem;
}

body.dark .dashboard-stats .day-mon:not(:first-child) {
  border-left: dashed 1px hsl(0, 0%, 17%);
  margin-left: 3px;
  padding-left: 6px;
}

body.dark .dashboard-stats .day-tags .tag-value {
  display: inline-flex;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 7px;
  font-weight: 450;
  letter-spacing: -0.02rem;
  line-height: 1;
  overflow: hidden;
  padding: 0.01rem 0;
  place-content: center;
  place-items: center;
  text-overflow: clip;
  transition: height 1s;
}

body.dark .dashboard-stats .day-tags .tag-value:first-child {
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
}

body.dark .dashboard-stats .day-tags .tag-value:last-child {
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
}

body.dark .dashboard-stats .day-pages {
  color: hsl(220, 20%, 20%);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.45rem;
  font-weight: 300;
  margin-top: 0.2rem;
  text-align: center;
}

body.dark .dashboard-stats .day-pages .page-value {
  color: hsl(220, 20%, 30%);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

body.dark ul.dashboard-stats li.month-tag,
body.dark ul.stats li.month-tag {
    color: #fff;
    opacity: 0.6;
    width: inherit;
}

body.dark ul.dashboard-stats li.month-tag .label,
body.dark ul.stats li.month-tag .label {
    color: #000;
}

body.dark ul.dashboard-stats li.monthly,
body.dark ul.stats li.monthly {
    background: hsl(210, 12%, 8%);
    color: hsl(210, 28%, 66%);
}

body.dark ul.dashboard-stats li.monthly .label,
body.dark ul.stats li.monthly .label {
    color: hsl(210, 12%, 32%);
}

body.dark .weekly-dashboard {
    margin-bottom: 13px;
    padding: 0 15px;
}

/* Testing */

body.dark ul.dashboard-stats li.monthly .value,
body.dark ul.stats li.monthly .value {
    font-size: 0.9em;
}

body.dark ul.dashboard-stats li.monthly .label .dot,
body.dark ul.stats li.monthly .label .dot {
    border-radius: 100%;
    display: inline-flex;
    opacity: 0.5;
    width: 0.5em;
    height: 0.5em;
}

body.dark ul.dashboard-stats li.month-tag,
body.dark ul.stats li.month-tag {
    opacity: inherit;
}

body.dark ul.dashboard-stats li.month-tag .value,
body.dark ul.stats li.month-tag .value {
    opacity: 0.7;
}

body.dark ul.stats ul.tags {
    display: flex;
    margin-left: 70px;
    margin-top: 8px;
    flex-wrap: wrap;
}

body.dark ul.stats ul.tags li {
    display: inline;
    border: none;
    margin-right: 3px;
    margin-bottom: 3px;
    padding-top: 3px;
}

body.dark ul.stats ul.tags li .label {
    float: none;
    font-size: 0.7em;
    font-weight: normal;
}

body.dark ul.stats ul.tags li .label {
    float: none;
}

body.dark ul.stats ul.tags li .value {
    font-size: 1.2em;
}

.content .folder > h2 {
    color: #444;
    font-style: italic;
    font-weight: normal;
    margin-top: 2em;
    -webkit-user-select: none;
}

.content .folder > h2 + ul {
    margin-top: 0em;
}

.content .folder > h2 + ul.abandoned {
    margin-top: 0.5em;
}

.content ul.abandoned.history {
    -webkit-user-select: none;
}

.content ul.abandoned.history li {
    color: #222;
}

.content ul.abandoned.history li a {
    color: #666;
    text-decoration-color: #333;
}

.content .history-toc {
    -webkit-user-select: none;
    margin-top: 1rem;
}

.content .history-toc a {
  color: hsl(0, 45%, 54%);
  margin-right: 5px;
  text-decoration-color: #333;
}

.content #yaml {
    background: rgba(0, 0, 0, 0.1);
    -webkit-appearance: none;
    resize: none;
    border: none;
    color: #333;
    margin-top: 4em;
    max-width: 500px;
    padding: 5px;
    width: 100%;
}

/*
@media screen and (min-width: 1200px) {
    body.dark ul.stats ul.tags {
        margin-left: 120px;
    }
}
*/

  body.dark #content .content {
    margin: 0px auto;
    overflow-y: scroll;
    padding-top: 5px;
  }

  body.dark main#content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  body.dark div.dashboard-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  body.dark ul.dashboard-stats {
    display: flex;
    flex: 1;
    gap: 4px;
    max-width: 500px;
  }

  body.dark .content .folder {
    flex: 1;
    padding-bottom: 10px;
  }

  body.dark header[role=banner] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: none;
    justify-content: space-between;
    width: 100%;
    }

    body.dark header[role=banner] a {
        background: hsl(220, 10%, 7%);
        border-radius: 0.3rem;
        box-shadow: 0 2px 10px hsl(220, 10%, 4%);
        color: hsl(220, 10%, 20%);
        margin-bottom: 20px;
        padding: 9px 20px 12px;
    }

    body.dark header[role=banner] h1 {
        margin: 15px;
        padding-left: 0;
        left: inherit;
        position: initial;
        right: inherit;
        flex: inherit;
        text-align: left;
        display: inline-flex;
    }

    body.dark header[role=banner] .menu {
        text-align: right;
        margin: 15px;
        width: auto;
    }

    body.dark.active-nav nav[role=menu] {
        position: fixed;
        z-index: 6000000;
        align-items: flex-end;
        align-items: end;
        justify-content: flex-end;
        justify-content: end;
        display: flex;
        flex-direction: column;
        font-size: 1.3em;
        text-align: right;
    }

    /* Testing */

    body.dark main#content {
    }

    body.dark.detail main#content {
      padding-top: 0;
      width: 100%;
    }

    body.dark .content > .dashboard-stats {
        position: fixed;
        padding-bottom: 5px;
        padding-top: 0px;
        width: 100%;
        display: flex;
        flex-direction: column;
        background: hsl(220, 10%, 8%);
        top: 0;
        z-index: 9000000000;
    }

    body.dark .weekly-dashboard {
      margin-top: 0px;
      margin-bottom: 0px;
    }


.search input {
  background: #000;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 1.5rem;
  padding: 8px 9px 9px;
  -webkit-appearance: none;
}

.search + h1 {
  color: #555;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

body.dark ul.booklist.large li.container .wrapper .title-wrapper {
  padding-top: 1.0rem;
  padding-bottom: 1.3rem;
}

body.dark ul.booklist.large li a.title span.label.title {
  font-size: 1.2rem;
  line-height: 1.2;
}

body.dark ul.booklist.large li .info {
  font-size: 0.75rem;
  margin-top: 7px;
}

body.dark ul.booklist.large li .progress-wrapper {
  margin-top: 8px;
}

/*
body.dark ul.booklist.large li .progress-wrapper .percentage {
  height: 6px;
}

body.dark ul.booklist.large li .pageblock {
  height: 5px;
}

body.dark ul.booklist.large li .pagetodayblock {
  height: 5px;
}
*/

body.dark ul.booklist li .subtitle-wrapper {
  width: 100%;
}

body.dark ul.booklist li .title {
  flex: 1;
}

/* Daily stats */

.content > ul.daily-stats {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.4rem;
  gap: 0.2rem 0.5rem;
  list-style: none;
  margin-block: 1rem;
}

.content > ul.daily-stats a {
  color: hsl(50 15% 50%);
  display: inline-block;
  padding-block: 0.2rem;
}

/* Daily stats */

.day-stats {
  margin-block-start: 6pt;

  h1 {
    color: hsl(345 50% 46%);
    font-size: 1.6rem;
  }

  nav {
    align-items: center;
    column-gap: 1rem;
    display: flex;
    font-size: 1.1rem;

    input[type=text] {
      background: none;
      border: solid 1px hsl(220 20% 15%);
      border-radius: 3px;
      color: hsl(220 20% 60%);
      font-family: Menlo, Monaco, monospace;
      font-size: 1rem;
      padding: 4px 6px;
      max-width: 12ch;

      &::placeholder {
        color: hsl(220 20% 20%);
      }

      &:focus {
        border-color: solid 1px hsl(220 20% 25%);
        outline: none;
      }
    }

    a {
      color: hsl(345 50% 46%);
      text-decoration: none;
    }
  }

  .daily-hourblocks {
    --hue: 40;
    color: hsl(var(--hue) 16% 58%);
    column-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.2rem;
    font-style: italic;
    margin-block-start: 1rem;
    margin-block-end: 1.5rem;
    row-gap: 0;

    & .hourblock {
      display: flex;
      flex-direction: column;

      &.empty {
        opacity: 0.2;
      }
    }

    & .label {
      color: hsl(var(--hue) 18% 33%);
      font-size: 0.6em;
      white-space: nowrap;

      & .unit {
        color: hsl(var(--hue) 18% 24%);
        font-size: 1em;
        margin-inline-start: 1pt;
      }
    }

    & .separator {
      color: hsl(var(--hue) 18% 23%);
      margin-inline: 1pt;
    }

    & .unit {
      color: hsl(var(--hue) 18% 33%);
      font-size: 0.7em;
      margin-inline-start: 2pt;
    }
  }

  ul {
    font-size: 1rem;
    list-style: none;
    margin-block: 0;
    padding: 0;

    li {
      --hue: 220;
      color: hsl(var(--hue) 18% 68%);
      font-size: 1.3rem;
      line-height: 1.25;
      text-indent: -1.25rem;
      margin-inline-start: 1.25rem;

      & + li {
        margin-block-start: 0.45rem;
      }

      & .separator {
        color: hsl(var(--hue) 18% 23%);
        margin-inline: 1pt;
      }

      & .unit {
        color: hsl(var(--hue) 18% 53%);
        font-size: 0.7em;
        margin-inline-start: 2pt;
      }

      & .percentage-complete {
        color: hsl(var(--hue) 20% 33%);
        font-size: 0.8em;
        margin-inline-start: 1pt;
      }
    }
  }
}