/* SPDX-FileCopyrightText: 2026 Andrew Oberstar <andrew@ajoberstar.org> */
/* SPDX-License-Identifier: AGPL-3.0-only */

/******************************************************************************/
/* Color Scheme                                                               */
/******************************************************************************/
@media (prefers-color-scheme: light) {
  :root {
    /* modus-operandi colors from https://protesilaos.com/emacs/modus-themes-colors */
    --bg-main: #ffffff;
    --bg-dim: #f2f2f2;
    --fg-main: #000000;
    --fg-dim: #595959;
    --fg-alt: #193668;
    --bg-active: #c4c4c4;
    --bg-inactive: #e0e0e0;
    --border: #9f9f9f;
    --red: #a60000;
    --red-warmer: #972500;
    --red-cooler: #a0132f;
    --red-faint: #7f0000;
    --red-intense: #d00000;
    --green: #006800;
    --green-warmer: #316500;
    --green-cooler: #00663f;
    --green-faint: #2a5045;
    --green-intense: #008900;
    --yellow: #6f5500;
    --yellow-warmer: #884900;
    --yellow-cooler: #7a4f2f;
    --yellow-faint: #624416;
    --yellow-intense: #808000;
    --blue: #0031a9;
    --blue-warmer: #3548cf;
    --blue-cooler: #0000b0;
    --blue-faint: #003497;
    --blue-intense: #0000ff;
    --magenta: #721045;
    --magenta-warmer: #8f0075;
    --magenta-cooler: #531ab6;
    --magenta-faint: #7c318f;
    --magenta-intense: #dd22dd;
    --cyan: #005e8b;
    --cyan-warmer: #3f578f;
    --cyan-cooler: #005f5f;
    --cyan-faint: #005077;
    --cyan-intense: #008899;
    --rust: #8a290f;
    --gold: #80601f;
    --olive: #56692d;
    --slate: #2f3f83;
    --indigo: #4a3a8a;
    --maroon: #731c52;
    --pink: #7b435c;
    --bg-red-intense: #ff8f88;
    --bg-green-intense: #8adf80;
    --bg-yellow-intense: #f3d000;
    --bg-blue-intense: #bfc9ff;
    --bg-magenta-intense: #dfa0f0;
    --bg-cyan-intense: #a4d5f9;
    --bg-red-subtle: #ffcfbf;
    --bg-green-subtle: #b3fabf;
    --bg-yellow-subtle: #fff576;
    --bg-blue-subtle: #ccdfff;
    --bg-magenta-subtle: #ffddff;
    --bg-cyan-subtle: #bfefff;
    --bg-red-nuanced: #ffe8e8;
    --bg-green-nuanced: #e0f6e0;
    --bg-yellow-nuanced: #f8f0d0;
    --bg-blue-nuanced: #ecedff;
    --bg-magenta-nuanced: #f8e6f5;
    --bg-cyan-nuanced: #e0f2fa;
    --bg-clay: #f1c8b5;
    --fg-clay: #63192a;
    --bg-ochre: #f0e3c0;
    --fg-ochre: #573a30;
    --bg-lavender: #dfcdfa;
    --fg-lavender: #443379;
    --bg-sage: #c0e7d4;
    --fg-sage: #124b41;
    --bg-graph-red-0: #ef7969;
    --bg-graph-red-1: #ffaab4;
    --bg-graph-green-0: #45c050;
    --bg-graph-green-1: #75ef30;
    --bg-graph-yellow-0: #ffcf00;
    --bg-graph-yellow-1: #f9ff00;
    --bg-graph-blue-0: #7f90ff;
    --bg-graph-blue-1: #a6c0ff;
    --bg-graph-magenta-0: #e07fff;
    --bg-graph-magenta-1: #fad0ff;
    --bg-graph-cyan-0: #70d3f0;
    --bg-graph-cyan-1: #afefff;
    --bg-completion: #c0deff;
    --bg-hover: #b2e4dc;
    --bg-hover-secondary: #f5d0a0;
    --bg-hl-line: #dae5ec;
    --bg-region: #bdbdbd;
    --fg-region: #000000;
    --bg-mode-line-active: #c8c8c8;
    --fg-mode-line-active: #000000;
    --border-mode-line-active: #5a5a5a;
    --bg-mode-line-inactive: #e6e6e6;
    --fg-mode-line-inactive: #585858;
    --border-mode-line-inactive: #a3a3a3;
    --modeline-err: #7f0000;
    --modeline-warning: #5f0070;
    --modeline-info: #002580;
    --bg-tab-bar: #dfdfdf;
    --bg-tab-current: #ffffff;
    --bg-tab-other: #c2c2c2;
    --bg-added: #c1f2d1;
    --bg-added-faint: #d8f8e1;
    --bg-added-refine: #aee5be;
    --bg-added-fringe: #6cc06c;
    --fg-added: #005000;
    --fg-added-intense: #006700;
    --bg-changed: #ffdfa9;
    --bg-changed-faint: #ffefbf;
    --bg-changed-refine: #fac090;
    --bg-changed-fringe: #d7c20a;
    --fg-changed: #553d00;
    --fg-changed-intense: #655000;
    --bg-removed: #ffd8d5;
    --bg-removed-faint: #ffe9e9;
    --bg-removed-refine: #f3b5af;
    --bg-removed-fringe: #d84a4f;
    --fg-removed: #8f1313;
    --fg-removed-intense: #aa2222;
    --bg-diff-context: #f3f3f3;
    --bg-paren-match: #5fcfff;
    --bg-paren-expression: #efd3f5;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* modus-vivendi colors from https://protesilaos.com/emacs/modus-themes-colors */
    --bg-main: #000000;
    --bg-dim: #1e1e1e;
    --fg-main: #ffffff;
    --fg-dim: #989898;
    --fg-alt: #c6daff;
    --bg-active: #535353;
    --bg-inactive: #303030;
    --border: #646464;
    --red: #ff5f59;
    --red-warmer: #ff6b55;
    --red-cooler: #ff7f86;
    --red-faint: #ff9580;
    --red-intense: #ff5f5f;
    --green: #44bc44;
    --green-warmer: #70b900;
    --green-cooler: #00c06f;
    --green-faint: #88ca9f;
    --green-intense: #44df44;
    --yellow: #d0bc00;
    --yellow-warmer: #fec43f;
    --yellow-cooler: #dfaf7a;
    --yellow-faint: #d2b580;
    --yellow-intense: #efef00;
    --blue: #2fafff;
    --blue-warmer: #79a8ff;
    --blue-cooler: #00bcff;
    --blue-faint: #82b0ec;
    --blue-intense: #338fff;
    --magenta: #feacd0;
    --magenta-warmer: #f78fe7;
    --magenta-cooler: #b6a0ff;
    --magenta-faint: #caa6df;
    --magenta-intense: #ff66ff;
    --cyan: #00d3d0;
    --cyan-warmer: #4ae2f0;
    --cyan-cooler: #6ae4b9;
    --cyan-faint: #9ac8e0;
    --cyan-intense: #00eff0;
    --rust: #db7b5f;
    --gold: #c0965b;
    --olive: #9cbd6f;
    --slate: #76afbf;
    --indigo: #9099d9;
    --maroon: #cf7fa7;
    --pink: #d09dc0;
    --bg-red-intense: #9d1f1f;
    --bg-green-intense: #2f822f;
    --bg-yellow-intense: #7a6100;
    --bg-blue-intense: #1640b0;
    --bg-magenta-intense: #7030af;
    --bg-cyan-intense: #2266ae;
    --bg-red-subtle: #620f2a;
    --bg-green-subtle: #00422a;
    --bg-yellow-subtle: #4a4000;
    --bg-blue-subtle: #242679;
    --bg-magenta-subtle: #552f5f;
    --bg-cyan-subtle: #004065;
    --bg-red-nuanced: #3a0c14;
    --bg-green-nuanced: #092f1f;
    --bg-yellow-nuanced: #381d0f;
    --bg-blue-nuanced: #12154a;
    --bg-magenta-nuanced: #2f0c3f;
    --bg-cyan-nuanced: #042837;
    --bg-clay: #49191a;
    --fg-clay: #f1b090;
    --bg-ochre: #462f20;
    --fg-ochre: #e0d09c;
    --bg-lavender: #38325c;
    --fg-lavender: #dfc0f0;
    --bg-sage: #143e32;
    --fg-sage: #c3e7d4;
    --bg-graph-red-0: #b52c2c;
    --bg-graph-red-1: #702020;
    --bg-graph-green-0: #0fed00;
    --bg-graph-green-1: #007800;
    --bg-graph-yellow-0: #f1e00a;
    --bg-graph-yellow-1: #b08940;
    --bg-graph-blue-0: #2fafef;
    --bg-graph-blue-1: #1f2f8f;
    --bg-graph-magenta-0: #bf94fe;
    --bg-graph-magenta-1: #5f509f;
    --bg-graph-cyan-0: #47dfea;
    --bg-graph-cyan-1: #00808f;
    --bg-completion: #2f447f;
    --bg-hover: #45605e;
    --bg-hover-secondary: #654a39;
    --bg-hl-line: #2f3849;
    --bg-region: #5a5a5a;
    --fg-region: #ffffff;
    --bg-mode-line-active: #505050;
    --fg-mode-line-active: #ffffff;
    --border-mode-line-active: #959595;
    --bg-mode-line-inactive: #2d2d2d;
    --fg-mode-line-inactive: #969696;
    --border-mode-line-inactive: #606060;
    --modeline-err: #ffa9bf;
    --modeline-warning: #dfcf43;
    --modeline-info: #9fefff;
    --bg-tab-bar: #313131;
    --bg-tab-current: #000000;
    --bg-tab-other: #545454;
    --bg-added: #00381f;
    --bg-added-faint: #002910;
    --bg-added-refine: #034f2f;
    --bg-added-fringe: #237f3f;
    --fg-added: #a0e0a0;
    --fg-added-intense: #80e080;
    --bg-changed: #363300;
    --bg-changed-faint: #2a1f00;
    --bg-changed-refine: #4a4a00;
    --bg-changed-fringe: #8a7a00;
    --fg-changed: #efef80;
    --fg-changed-intense: #c0b05f;
    --bg-removed: #4f1119;
    --bg-removed-faint: #380a0f;
    --bg-removed-refine: #781a1f;
    --bg-removed-fringe: #b81a1f;
    --fg-removed: #ffbfbf;
    --fg-removed-intense: #ff9095;
    --bg-diff-context: #1a1a1a;
    --bg-paren-match: #2f7f9f;
    --bg-paren-expression: #453040;
  }
}

/******************************************************************************/
/* Fonts and Colors                                                           */
/******************************************************************************/
body {
  font-family: serif;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
}

body {
  background-color: var(--bg-dim);
  color: var(--fg-main);
}

body > header {
  background-color: var(--bg-dim);
  color: var(--main-header-fg-color);
  border-bottom: 1px solid var(--border);
}

main {
  background-color: var(--bg-main);
}

/* headings */
h1 {
  color: var(--fg-main);
}

h2 {
  color: var(--fg-alt);
}

h3 {
  color: var(--fg-dim);
}

/* links */
a, a:visited {
  color: var(--blue-warmer);
  text-decoration: inherit;
}

a:hover {
  color: var(--blue-cooler);
}

p.warning {
  color: var(--yellow-intense);
}

/* table borders */
table {
  border-collapse: collapse;
  border: 1px solid var(--border);
}

th, td {
  border: 1px solid var(--border);
}

tr:nth-child(even) {
  background-color: var(--bg-dim);
}

/* definition lists */
dt {
  color: var(--magenta);
}

/* forms */
label {
  color: var(--magenta-cooler);
  font-weight: bold;
}

input[type="text"], input[type="search"], input[type="number"], input[type="date"], select {
  background-color: var(--bg-dim);
  color: var(--fg-main);
  border: none;
}

form.search input[type="search"] {
  background-color: var(--bg-main);
}

button {
  background-color: var(--bg-blue-intense);
  color: var(--fg-main);
  border: none;
  cursor: pointer;
}

button.delete {
  background-color: var(--bg-red-intense);
}

/* collection positions form */
section.collection form tr:nth-child(odd) td.position input {
  background-color: var(--bg-main);
}

form.merge tr:nth-child(odd) td input {
  background-color: var(--bg-main);
}

/* readthroughs forms */
section.reading section.form form {
  background-color: var(--bg-main);
  border: none;
}

section.reading section.form button {
  background-color: var(--bg-cyan-nuanced);
}

section.reading section.form button.delete {
  background-color: var(--bg-red-nuanced);
}

/* progress bars */
progress {
  background-color: var(--bg-dim);
}

section.not-started progress::-moz-progress-bar {
  background-color: var(--bg-magenta-nuanced);
}

section.in-progress progress::-moz-progress-bar {
  background-color: var(--bg-green-intense);
}

section.paused progress::-moz-progress-bar {
  background-color: var(--bg-yellow-intense);
}

section.skipped progress::-moz-progress-bar {
  background-color: var(--bg-magenta-intense);
}

section.did-not-finish progress::-moz-progress-bar {
  background-color: var(--bg-red-intense);
}

section.complete progress::-moz-progress-bar, section.completed progress::-moz-progress-bar {
  background-color: var(--bg-blue-intense);
}

section.form form {
  background-color: var(--bg-inactive);
  border: 1px solid var(--border);
}

section.staged {
  border-bottom: 1px solid var(--border);
}

nav.paging {
  /* background-color: var(--bg-inactive); */
  border: 1px solid var(--border);
}

#search-results {
  background-color: var(--bg-main);
  border: 1px solid var(--border);
}

#search-results li.active {
  background-color: var(--bg-active);
}

#search-results .kind {
  font-family: sans-serif;
  font-size: 0.5rem;
  text-transform: uppercase;
  text-align: right;
}

#search-results .kind.author {
  color: var(--fg-clay);
}

#search-results .kind.edition {
  color: var(--fg-lavender);
}

#search-results .kind.part {
  color: var(--fg-sage);
}

#search-results .kind.collection {
  color: var(--fg-ochre);
}

/******************************************************************************/
/* Layout                                                                     */
/******************************************************************************/
html {
  max-width: 70ch;
  margin: auto;
  padding: 1rem 1rem;
}

html:has(body.wide) {
  max-width: 100%;
}

body {
  margin: 0;
}

/* separate brand from nav */
@media screen and (min-width: 600px) {
  body > header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 600px) {
  body > header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
  }
}

body > footer {
  margin-top: 1.5rem;
}

/* align top nav horizontally */
body > header nav ul {
  display: grid;
  grid-auto-columns: min-content;
  grid-template-rows: auto;
  grid-gap: 1.0rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* keep all nav items on same row */
body > header nav ul li {
  grid-row: 1;
}

body > footer nav ul {
  list-style-type: none;
  padding: 0;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.0rem;
  justify-content: center;
}

body main {
  padding: 1rem;
}

body main > section {
  margin-bottom: 1.5rem;
}

body main > section > section {
  margin-bottom: 1.25rem;
}

body main > section > section > section {
  margin-bottom: 1.0rem;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

h1, header:has(h1) {
  margin-bottom: 1.0rem;
}

h2, header:has(h2) {
  margin-bottom: 0.75rem;
}

h3, header:has(h3) {
  margin-bottom: 0.5rem;
}

h4, header:has(h4) {
  margin-bottom: 0.25rem;
}

header h1, header h2, header h3, header h4, header p {
  margin: 0;
}

nav.paging {
  padding: 0.5rem;
  margin-bottom: 1.0rem;
}

nav.paging ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* full-width tables */
table {
  width: 100%;
  margin-bottom: 1rem;
}

/* cell padding */
table th, table td {
  margin: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* simplify tables in phone screens */
@media screen and (max-width: 600px) {
  /* reduce columns */
  table.sessions thead th.hideable, table.sessions tr td.hideable {
    display: none;
  }
  /* avoid wrapping titles */
  table.sessions tr td.title {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

table.sessions td.session-gap {
  background-color: var(--bg-red-intense);
}

/* full-width progress bars */
progress {
  appearance: none;
  height: 1rem;
  width: 100%;
  border: none;
  margin-bottom: 0.5rem;
}

dl {
    display: grid;
    column-gap: 1rem;
    margin: 0;
    margin-bottom: 0.5rem;
}

dd {
  margin: 0;
}

/* only two columns of dl if the screen is big enough */
@media screen and (min-width: 600px) {
  dl {
    grid-template-columns: max-content auto max-content auto;
    grid-auto-rows: min-content;
  }
}

/* one column if not */
@media screen and (max-width: 600px) {
  dl {
    grid-template-columns: max-content auto;
    grid-auto-rows: min-content;
  }
}

/* forms */
input, select {
  display: block;
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.25rem;
}

input[type="text"], input[type="number"], input[type="date"], select {
  padding: 0.5rem;
}

section.form input[type="text"], section.form input[type="number"], section.form input[type="date"], section.form select {
  box-sizing: border-box;
  width: min(100%, 60vh);
}

button[type="submit"] {
  padding: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

form.search {
  display: grid;
  grid-template-columns: auto min-content;
  grid-template-rows: min-content;
  gap: 0.5rem;
}

form.search button, form.search input {
  margin: 0;
}

/* collection positions form */
section.collection table td.position {
  padding: 0;
  width: 5rem;
  text-align: center;
}

section.collection form td.position input {
  display: block;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  margin: 0;
}

section.collection form table td.delete {
  padding: 0;
  width: 5rem;
  text-align: center;
}

section.collection form table td.delete input {
  display: inline-block;
  margin: 0;
}

section.collection table {
  margin-bottom: 1rem;p
}

form.merge table {
  width: 100%;
}

form.merge table th:first-child, form.merge table td:first-child {
  white-space: nowrap;
}

form.merge table th:nth-child(2), form.merge table td:nth-child(2), form.merge table th:nth-child(3), form.merge table td:nth-child(3), form.merge table th:nth-child(4), form.merge table td:nth-child(4) {
  width: 33%;
}

form.merge td.left div {
  display: grid;
  grid-template-columns: auto min-content;
  column-gap: 1rem;
}

form.merge td.right div {
  display: grid;
  grid-template-columns: min-content auto;
  column-gap: 1rem;
}

form.merge td input {
  display: block;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  margin: 0;
}

/* reading */
section.covered {
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows-auto;
  grid-gap: 1rem;
}

@media screen and (min-width: 600px) {
  section.covered section.cover img {
    width: 10rem;
  }
}

@media screen and (max-width: 600px) {
  section.covered section.cover img {
    width: 5rem;
  }
}

section.covered section {
  margin: 0;
}

section.covered section.form {
  margin-bottom: 1rem;
}

/* editions */
section.editions {
  display: grid;
  grid-auto-rows: auto;
  column-gap: 0.5rem;
  row-gap: 1rem;
}

@media screen and (min-width: 600px) {
  section.editions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  section.editions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

section.editions section.edition {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0.5rem;
}

section.editions section.edition img {
  grid-row: 1;
  width: 10rem;
}

section.editions section.edition p {
  grid-row: 2;
  margin: 0;
}

section.editions section.edition {
  margin: 0;
  text-align: center;
}

section.form form {
  padding: 0.5rem;
}

/* collections */
section.collection-item section.cover img {
  width: 8rem;
}


section.collection-item section.content dl {
  grid-template-columns: max-content min-content;
}

/* activity */
@media screen and (min-width: 600px) {
  div.months {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-auto-rows: auto;
    gap: 1.0rem;
  }
}

@media screen and (max-width: 600px) {
  div.months {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
  }
}

table.weeks tr td:nth-child(1) {
  font-weight: bold;
}

table.weeks tr.tier-a td {
  background-color: var(--bg-magenta-intense);
}

table.weeks tr.tier-b td {
  background-color: var(--bg-blue-intense);
}

table.weeks tr.tier-c td {
  background-color: var(--bg-green-intense);
}

table.weeks tr.tier-d td {
  background-color: var(--bg-yellow-intense);
}

table.weeks tr.tier-f td {
  color: var(--fg-dim);
}

table.weeks tr.current td:nth-child(1):before {
  content: "→";
}

form.search {
  position: relative;
}

#search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 0.25rem;
}

@media screen and (min-width: 600px) {
  #search-results {
    left: -5rem;
  }
}

#search-results {
  display: grid;
  grid-template-columns: min-content auto;
  grid-auto-rows: min-content;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  margin-top: 0.75rem;

  max-height: 20rem;
  overflow-y: auto;
}

#search-results[hidden] {
  display: none;
}

#search-results li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  align-items: center;
}

section.scans {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: auto;
  column-gap: 1rem;
  row-gap: 0.5rem
}

img.scan {
  max-height: 200px;
  max-width: 200px;
}

.auto-refresh label, .auto-refresh input {
  display: inline-block;
}
