/* shelfgauge styles: written from scratch, system fonts, no external resources. */

/* ---------- Themes ---------- */

:root {
  --bg: #ffffff;
  --fg: #1f2328;
  --muted: #59636e;
  --border: #d1d9e0;
  --sidebar-bg: #f6f8fa;
  --hover: #eaeef2;
  --active-bg: #ddf4ff;
  --accent: #0969da;
  /* Text on the accent (buttons); the profile colors 1-7 set their own. */
  --on-accent: #ffffff;
  --banner-bg: #ddf4ff;
  --error: #cf222e;
  --warning-bg: #fff8c5;
  --input-bg: #ffffff;
  --cover-bg: #e6e9ed;
  --pcolor-0: #0969da;
  --on-pcolor-0: #ffffff;
  --pcolor-1: #1a7f37;
  --on-pcolor-1: #ffffff;
  --pcolor-2: #8250df;
  --on-pcolor-2: #ffffff;
  --pcolor-3: #bc4c00;
  --on-pcolor-3: #ffffff;
  --pcolor-4: #cf222e;
  --on-pcolor-4: #ffffff;
  --pcolor-5: #0b7285;
  --on-pcolor-5: #ffffff;
  --pcolor-6: #bf3989;
  --on-pcolor-6: #ffffff;
  --pcolor-7: #8a5a2b;
  --on-pcolor-7: #ffffff;
  color-scheme: light;

  --topbar-height: 3.25rem;
  --sidebar-width: 20rem;
  --radius: 6px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0d1117;
    --fg: #e6edf3;
    --muted: #9198a1;
    --border: #3d444d;
    --sidebar-bg: #151b23;
    --hover: #212830;
    --active-bg: #1f3b61;
    --accent: #4493f8;
    --banner-bg: #0c2d6b;
    --error: #f85149;
    --warning-bg: #3d2e00;
    --input-bg: #0d1117;
    --cover-bg: #262c36;
    --pcolor-0: #4493f8;
    --on-pcolor-0: #000000;
    --pcolor-1: #3fb950;
    --on-pcolor-1: #000000;
    --pcolor-2: #ab7df8;
    --on-pcolor-2: #000000;
    --pcolor-3: #f0883e;
    --on-pcolor-3: #000000;
    --pcolor-4: #ff7b72;
    --on-pcolor-4: #000000;
    --pcolor-5: #39c5cf;
    --on-pcolor-5: #000000;
    --pcolor-6: #f778ba;
    --on-pcolor-6: #000000;
    --pcolor-7: #c9a26d;
    --on-pcolor-7: #000000;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0d1117;
  --fg: #e6edf3;
  --muted: #9198a1;
  --border: #3d444d;
  --sidebar-bg: #151b23;
  --hover: #212830;
  --active-bg: #1f3b61;
  --accent: #4493f8;
  --banner-bg: #0c2d6b;
  --error: #f85149;
  --warning-bg: #3d2e00;
  --input-bg: #0d1117;
  --cover-bg: #262c36;
  --pcolor-0: #4493f8;
  --on-pcolor-0: #000000;
  --pcolor-1: #3fb950;
  --on-pcolor-1: #000000;
  --pcolor-2: #ab7df8;
  --on-pcolor-2: #000000;
  --pcolor-3: #f0883e;
  --on-pcolor-3: #000000;
  --pcolor-4: #ff7b72;
  --on-pcolor-4: #000000;
  --pcolor-5: #39c5cf;
  --on-pcolor-5: #000000;
  --pcolor-6: #f778ba;
  --on-pcolor-6: #000000;
  --pcolor-7: #c9a26d;
  --on-pcolor-7: #000000;
  color-scheme: dark;
}

:root[data-theme="sepia"] {
  --bg: #f6efe2;
  --fg: #3b3024;
  --muted: #7a6a55;
  --border: #ddcfb8;
  --sidebar-bg: #efe5d3;
  --hover: #e6d9c2;
  --active-bg: #e2d1ae;
  --accent: #8a4b14;
  --banner-bg: #ead9b5;
  --error: #b3261e;
  --warning-bg: #f3e0a8;
  --input-bg: #fbf6ec;
  --cover-bg: #e3d6bf;
  --pcolor-0: #8a4b14;
  --on-pcolor-0: #ffffff;
  --pcolor-1: #2f6b2f;
  --on-pcolor-1: #ffffff;
  --pcolor-2: #6a3fb5;
  --on-pcolor-2: #ffffff;
  --pcolor-3: #9c3d00;
  --on-pcolor-3: #ffffff;
  --pcolor-4: #b3261e;
  --on-pcolor-4: #ffffff;
  --pcolor-5: #0b6470;
  --on-pcolor-5: #ffffff;
  --pcolor-6: #a12f72;
  --on-pcolor-6: #ffffff;
  --pcolor-7: #5e3d1c;
  --on-pcolor-7: #ffffff;
  color-scheme: light;
}

:root[data-theme="navy"] {
  --bg: #161f30;
  --fg: #d6deeb;
  --muted: #8d9bb3;
  --border: #2c3a55;
  --sidebar-bg: #1b2539;
  --hover: #24314b;
  --active-bg: #2b4170;
  --accent: #82aaff;
  --banner-bg: #233a66;
  --error: #ff6b6b;
  --warning-bg: #4a3c12;
  --input-bg: #121a29;
  --cover-bg: #24314b;
  --pcolor-0: #82aaff;
  --on-pcolor-0: #000000;
  --pcolor-1: #7ee787;
  --on-pcolor-1: #000000;
  --pcolor-2: #c3a6ff;
  --on-pcolor-2: #000000;
  --pcolor-3: #ffa657;
  --on-pcolor-3: #000000;
  --pcolor-4: #ff8e88;
  --on-pcolor-4: #000000;
  --pcolor-5: #5fd4dc;
  --on-pcolor-5: #000000;
  --pcolor-6: #ff9bce;
  --on-pcolor-6: #000000;
  --pcolor-7: #d9b88a;
  --on-pcolor-7: #000000;
  color-scheme: dark;
}

:root[data-theme="black"] {
  --bg: #000000;
  --fg: #d4d4d4;
  --muted: #8c8c8c;
  --border: #2b2b2b;
  --sidebar-bg: #0b0b0b;
  --hover: #1c1c1c;
  --active-bg: #1e2f47;
  --accent: #6ea8fe;
  --banner-bg: #102440;
  --error: #ff6b6b;
  --warning-bg: #3a3000;
  --input-bg: #000000;
  --cover-bg: #1c1c1c;
  --pcolor-0: #6ea8fe;
  --on-pcolor-0: #000000;
  --pcolor-1: #56d364;
  --on-pcolor-1: #000000;
  --pcolor-2: #bc8cff;
  --on-pcolor-2: #000000;
  --pcolor-3: #ffa657;
  --on-pcolor-3: #000000;
  --pcolor-4: #ff7b72;
  --on-pcolor-4: #000000;
  --pcolor-5: #56d4dd;
  --on-pcolor-5: #000000;
  --pcolor-6: #ff8ac8;
  --on-pcolor-6: #000000;
  --pcolor-7: #d2a874;
  --on-pcolor-7: #000000;
  color-scheme: dark;
}

/* ---------- Profile colors ---------- */

/* The profile's color as the accent; color 0 is each theme's own accent. The palette
   is checked for contrast by .debug/TESTS/pcolor_contrast.py. */
:root[data-pcolor="1"] {
  --accent: var(--pcolor-1);
  --on-accent: var(--on-pcolor-1);
}

:root[data-pcolor="2"] {
  --accent: var(--pcolor-2);
  --on-accent: var(--on-pcolor-2);
}

:root[data-pcolor="3"] {
  --accent: var(--pcolor-3);
  --on-accent: var(--on-pcolor-3);
}

:root[data-pcolor="4"] {
  --accent: var(--pcolor-4);
  --on-accent: var(--on-pcolor-4);
}

:root[data-pcolor="5"] {
  --accent: var(--pcolor-5);
  --on-accent: var(--on-pcolor-5);
}

:root[data-pcolor="6"] {
  --accent: var(--pcolor-6);
  --on-accent: var(--on-pcolor-6);
}

:root[data-pcolor="7"] {
  --accent: var(--pcolor-7);
  --on-accent: var(--on-pcolor-7);
}

.avatar.pc-0 {
  color: var(--on-pcolor-0);
  background: var(--pcolor-0);
}

.avatar.pc-1 {
  color: var(--on-pcolor-1);
  background: var(--pcolor-1);
}

.avatar.pc-2 {
  color: var(--on-pcolor-2);
  background: var(--pcolor-2);
}

.avatar.pc-3 {
  color: var(--on-pcolor-3);
  background: var(--pcolor-3);
}

.avatar.pc-4 {
  color: var(--on-pcolor-4);
  background: var(--pcolor-4);
}

.avatar.pc-5 {
  color: var(--on-pcolor-5);
  background: var(--pcolor-5);
}

.avatar.pc-6 {
  color: var(--on-pcolor-6);
  background: var(--pcolor-6);
}

.avatar.pc-7 {
  color: var(--on-pcolor-7);
  background: var(--pcolor-7);
}


/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  line-height: 1.25;
}

h2 {
  font-size: 1.25rem;
}

kbd {
  padding: 0 0.3em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  border: 1px solid var(--border);
  border-radius: 4px;
}

input,
select,
button {
  font: inherit;
  color: inherit;
}

input[type="search"],
select {
  padding: 0.3rem 0.5rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

button {
  padding: 0.35rem 0.8rem;
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

button:hover {
  background: var(--hover);
}

.symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  vertical-align: -0.15em;
}

.muted,
.count,
.detail,
.authors,
.series {
  color: var(--muted);
}

.count {
  font-size: 0.85em;
}

.empty,
.note {
  color: var(--muted);
}

.no-js .theme-select,
.no-js .sidebar-resizer,
.no-js .twisty {
  display: none;
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--topbar-height);
  padding: 0 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.brand {
  color: var(--fg);
  font-weight: 600;
}

.topbar .home-link {
  display: none;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  color: var(--muted);
  background: none;
  border: 0;
}

.icon-button:hover {
  color: var(--fg);
  background: var(--hover);
}

/* `display` above would override the `hidden` attribute (buttons that need JS). */
.icon-button[hidden] {
  display: none;
}

.search {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  max-width: 32rem;
  margin-left: auto;
}

.search .icon {
  position: absolute;
  left: 0.6rem;
  color: var(--muted);
  pointer-events: none;
}

.search input {
  width: 100%;
  padding-left: 2rem;
}

.rescan {
  margin: 0;
}

.banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--banner-bg);
  border-bottom: 1px solid var(--border);
}

.banner[hidden] {
  display: none;
}

.banner progress {
  flex: 0 1 16rem;
}

/* ---------- Layout ---------- */

.layout {
  display: grid;
  /* sidebar | resizer (zero-width column; the handle overlaps the border) | main */
  grid-template-columns: var(--sidebar-width) 0 minmax(0, 1fr);
}

.sidebar-resizer {
  position: sticky;
  top: var(--topbar-height);
  z-index: 5;
  width: 9px;
  height: calc(100vh - var(--topbar-height));
  margin-left: -5px;
  cursor: col-resize;
  touch-action: none;
}

.sidebar-resizer::after {
  display: block;
  width: 3px;
  height: 100%;
  margin: 0 auto;
  content: "";
  transition: background 0.15s;
}

.sidebar-resizer:hover::after,
.sidebar-resizer:focus-visible::after,
body.resizing .sidebar-resizer::after {
  background: var(--accent);
}

.sidebar-resizer:focus-visible {
  outline: none;
}

body.resizing {
  cursor: col-resize;
  user-select: none;
}

.sidebar {
  position: sticky;
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  padding: 0.75rem 0.5rem 2rem 0.75rem;
  overflow-y: auto;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
}

.main {
  width: 100%;
  max-width: 54rem;
  padding: 1.5rem 2rem 3rem;
}

body.sidebar-hidden .layout {
  grid-template-columns: minmax(0, 1fr);
}

body.sidebar-hidden .sidebar,
body.sidebar-hidden .sidebar-resizer {
  display: none;
}

/* ---------- Sidebar ---------- */

.modes {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.modes a {
  flex: 1;
  padding: 0.25rem 0.5rem;
  color: var(--muted);
  text-align: center;
  border-radius: var(--radius);
}

.modes a:hover {
  text-decoration: none;
  background: var(--hover);
}

.modes a.active {
  color: var(--fg);
  font-weight: 600;
  background: var(--active-bg);
}

.filter input {
  width: 100%;
  margin-bottom: 0.5rem;
}

.tree {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree li {
  margin: 0;
}

.tree .node {
  display: grid;
  grid-template-columns: 1.25rem 1.25rem minmax(0, 1fr) auto;
  align-items: baseline;
}

.tree .node > .children {
  grid-column: 2 / -1;
}

.tree .node > a,
.tree .book > a {
  display: block;
  padding: 0.1rem 0.3rem;
  overflow: hidden;
  color: var(--fg);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 4px;
}

.tree .book > a {
  margin-left: 2.5rem;
  white-space: normal;
}

.tree .node > .children .book > a {
  margin-left: 1.25rem;
}

.tree a:hover {
  text-decoration: none;
  background: var(--hover);
}

.tree a.active {
  font-weight: 600;
  background: var(--active-bg);
}

.tree .node > .icon {
  align-self: center;
  color: var(--muted);
}

.tree .count {
  padding: 0 0.3rem;
}

/* Showcase marks (admins, the library on a hub): a fifth column with a checkbox. */
.showcase-on .tree .node {
  grid-template-columns: 1.25rem 1.25rem minmax(0, 1fr) auto auto;
}

.tree .showcase-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 1.5rem;
  height: 1.25rem;
  cursor: pointer;
}

.tree .showcase-mark input {
  margin: 0;
  cursor: inherit;
}

.tree .showcase-mark input:disabled {
  cursor: default;
}

.showcase-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.showcase-missing {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.tree .heading {
  margin: 0.4rem 0 0.1rem 1.5rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.twisty {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  align-self: center;
  background: none;
  border: 0;
  border-radius: 4px;
}

.twisty::before {
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  margin: auto;
  content: "";
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.node.open > .twisty::before {
  transform: rotate(45deg);
}

.node.loading > .twisty::before {
  opacity: 0.4;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Main area ---------- */

.path {
  overflow-wrap: anywhere;
}

.breadcrumbs {
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.breadcrumbs .sep {
  margin: 0 0.35rem;
}

.inline-form {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}

.books,
.authors,
.folders {
  padding: 0;
  list-style: none;
}

.books li,
.authors li,
.folders li {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}

.folders li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.folders .icon {
  color: var(--muted);
}

.books .heading {
  padding-top: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
}

.books .authors,
.books .series {
  margin-left: 0.5rem;
  font-size: 0.9em;
}

.badge {
  margin-left: 0.5rem;
  padding: 0 0.4rem;
  font-size: 0.75rem;
  border-radius: 999px;
}

.badge.error {
  color: var(--bg);
  background: var(--error);
}

.badge.protected {
  color: var(--muted);
  border: 1px solid var(--border);
}

.book-card {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.cover {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
}

.cover.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  padding: 1rem;
  color: var(--muted);
  text-align: center;
  background: var(--cover-bg);
  box-shadow: none;
}

.by {
  margin-top: 0;
  font-size: 1.1rem;
}

.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 1rem;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
}

.notice {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  background: var(--warning-bg);
}

.notice.error {
  border-left: 3px solid var(--error);
}

.notice.protected {
  border-left: 3px solid var(--border);
}

.annotation p {
  margin: 0 0 0.75rem;
}

.button {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  color: var(--fg);
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.button:hover {
  text-decoration: none;
  background: var(--hover);
}

.button.primary {
  color: var(--on-accent);
  font-weight: 600;
  background: var(--accent);
  border-color: var(--accent);
}

.button.primary:hover {
  filter: brightness(1.1);
}

/* ---------- Bookmarks and marks on the book card ---------- */

.badge {
  display: inline-block;
  padding: 0 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}

kbd {
  padding: 0 0.3rem;
  font-family: inherit;
  font-size: 0.85em;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.progress {
  margin-left: 0.5rem;
  font-size: 0.9rem;
}

/* The book card's actions: the buttons, the progress and the finished toggle. */
.book-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

.book-actions .progress {
  margin-left: 0;
}

/* The finished mark: a check mark, in the accent color while pressed. */
.finished-toggle {
  border-radius: 4px;
  cursor: pointer;
}

.finished-toggle[aria-pressed="true"],
.finished-toggle[aria-pressed="true"]:hover {
  color: var(--accent);
}

.book-annotations {
  margin-top: 1.5rem;
}

.book-annotations details {
  margin-bottom: 1rem;
}

.book-annotations summary {
  font-weight: 600;
  cursor: pointer;
}

.book-annotations .hint {
  color: var(--muted);
}

.annotation-list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

/* One entry: the text on the left, edit and delete icons at the top right; the note
   form (a native <details>) opens below the text, so it works without JavaScript. */
.annotation-list li {
  position: relative;
  padding: 0.6rem 4.5rem 0.6rem 0.25rem;
  border-bottom: 1px solid var(--border);
}

.annotation-list .label {
  color: var(--fg);
}

.annotation-list .quote {
  display: block;
  padding-left: 0.75rem;
  color: var(--fg);
  white-space: pre-line;
  border-left: 3px solid var(--border);
}

.annotation-list .quote:hover {
  text-decoration: none;
  border-left-color: var(--accent);
}

.annotation-list .note {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: pre-line;
}

.annotation-list .icon-button {
  padding: 0.3rem;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.55;
}

.annotation-list li:hover .icon-button,
.annotation-list .icon-button:focus-visible,
.annotation-list details[open] > summary {
  opacity: 1;
}

.annotation-list .icon-button.danger:hover {
  color: var(--error);
}

.annotation-list .delete-form {
  position: absolute;
  top: 0.45rem;
  right: 0;
}

.note-edit > summary {
  position: absolute;
  top: 0.45rem;
  right: 2rem;
  list-style: none;
}

.note-edit > summary::-webkit-details-marker {
  display: none;
}

.note-form {
  margin: 0.5rem -4.25rem 0 0;
}

/* While the note is edited, it is shown only in the form. */
.annotation-list li:has(> details[open]) .note {
  display: none;
}

.note-form textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--fg);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  resize: vertical;
}

.note-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

button.small {
  padding: 0.15rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--fg);
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

button.small:hover {
  background: var(--hover);
}

button.small.primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

/* Without JavaScript the form is closed with the edit icon again. */
.no-js .note-cancel {
  display: none;
}

/* ---------- The library page ---------- */

.home-section {
  margin: 1.5rem 0;
}

.home-section h2,
.section-head h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.text-button {
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
}

.text-button:hover {
  text-decoration: underline;
}

/* A small cover (or its placeholder) in a card or a row of books. */
.thumb {
  display: block;
  flex: none;
  width: 5rem;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--cover-bg);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0.4rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

.reading-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reading-card {
  display: flex;
  gap: 0.9rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.reading-book {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.reading-book .title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.reading-book .authors {
  font-size: 0.9rem;
}

.reading-meta {
  font-size: 0.85rem;
}

.reading-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.reading-actions .button {
  padding: 0.25rem 0.9rem;
}

.reading-actions .icon-button {
  border-radius: 4px;
  cursor: pointer;
}

/* A thin bar: its fill's width is one of the w0…w100 classes. */
.progress-bar {
  height: 4px;
  margin-top: 0.4rem;
  overflow: hidden;
  background: var(--hover);
  border-radius: 2px;
}

.progress-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.recent-books {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recent-books li {
  min-width: 0;
}

.recent-books .thumb {
  width: 100%;
  margin-bottom: 0.35rem;
}

.recent-books a:hover {
  text-decoration: none;
}

.recent-books a:hover .recent-title {
  text-decoration: underline;
}

.recent-title,
.recent-books .authors {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.85rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.recent-books .authors {
  font-size: 0.8rem;
  -webkit-line-clamp: 1;
}

.summary {
  margin: 1.5rem 0 0.25rem;
}

.attention {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.welcome {
  max-width: 40rem;
}

.keys {
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.keys summary {
  cursor: pointer;
}

.keys h3 {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.9rem;
}

.keys dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 1rem;
  margin: 0.5rem 0 0;
}

.keys dd {
  margin: 0;
}

/* The books that could not be read. */
.unreadable li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
}

.unreadable .path {
  overflow-wrap: anywhere;
}

.unreadable .reason {
  color: var(--muted);
  font-size: 0.9em;
}

.stats-link {
  margin-left: 0.5rem;
  font-size: 0.9rem;
}

/* ---------- Library statistics ---------- */

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.stat-card {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.stat-card a {
  display: flex;
  flex-direction: column;
  color: inherit;
}

.stat-card a:hover .stat-label {
  color: var(--accent);
  text-decoration: underline;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.stat-label {
  color: var(--muted);
}

.stat-detail {
  color: var(--muted);
  font-size: 0.85rem;
}

.charts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 0.5rem 2rem;
}

.chart h2,
.stats-section h2 {
  margin: 1rem 0 0.5rem;
  font-size: 1.15rem;
}

.stats-section h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
}

.bars {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bars li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) max-content;
  gap: 0.75rem;
  align-items: center;
  padding: 0.2rem 0;
  font-size: 0.9rem;
}

.bars .bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bars .bar {
  height: 0.6rem;
  overflow: hidden;
  background: var(--hover);
  border-radius: 3px;
}

.bars .bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

.bars .bar-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.facts-list {
  margin: 0;
  padding-left: 1.25rem;
}

.facts-list li {
  padding: 0.15rem 0;
}

.latest-quotes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.latest-quotes li {
  padding: 0.4rem 0 0.4rem 0.75rem;
  border-left: 3px solid var(--border);
}

.latest-quotes li + li {
  margin-top: 0.5rem;
}

.latest-quotes .quote {
  color: var(--fg);
  font-style: italic;
}

/* ---------- Duplicates ---------- */

.modes.switch {
  max-width: 26rem;
  margin: 0.75rem 0;
}

.duplicate-group {
  margin: 0 0 1rem;
  border-top: 2px solid var(--border);
}

.copy-meta {
  font-size: 0.85rem;
}

.copy-meta .path {
  color: var(--muted);
}

/* ---------- Bars ---------- */

.w0 {
  width: 0%;
}

.w5 {
  width: 5%;
}

.w10 {
  width: 10%;
}

.w15 {
  width: 15%;
}

.w20 {
  width: 20%;
}

.w25 {
  width: 25%;
}

.w30 {
  width: 30%;
}

.w35 {
  width: 35%;
}

.w40 {
  width: 40%;
}

.w45 {
  width: 45%;
}

.w50 {
  width: 50%;
}

.w55 {
  width: 55%;
}

.w60 {
  width: 60%;
}

.w65 {
  width: 65%;
}

.w70 {
  width: 70%;
}

.w75 {
  width: 75%;
}

.w80 {
  width: 80%;
}

.w85 {
  width: 85%;
}

.w90 {
  width: 90%;
}

.w95 {
  width: 95%;
}

.w100 {
  width: 100%;
}

/* ---------- Reading mode ---------- */

.toc-book {
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.toc ul {
  margin: 0;
  padding-left: 0.9rem;
  list-style: none;
}

.toc > ul {
  padding-left: 0;
}

.toc a {
  display: block;
  padding: 0.15rem 0.3rem;
  color: var(--fg);
  border-radius: 4px;
}

.toc a:hover {
  text-decoration: none;
  background: var(--hover);
}

.toc a.active {
  font-weight: 600;
  background: var(--active-bg);
}

/* Reader settings (reader.css) set the --reader-* properties; these are the defaults. */
.reader {
  max-width: var(--reader-width, 40rem);
  margin: 0 auto;
}

.reader-head {
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.reader-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.reader-nav a {
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text {
  font-family: var(--reader-font, inherit);
  font-size: var(--reader-size, 1.125rem);
  line-height: var(--reader-leading, 1.65);
  /* Inherited, so titles, epigraphs and figures keep their own alignment. */
  text-align: var(--reader-align, start);
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Deep links (#b123) must not end up under the sticky top bar. */
.text [id] {
  scroll-margin-top: calc(var(--topbar-height) + 1rem);
}

/* The block a link leads to (contents, bookmark, quote, the status line's track)
   flashes: the highlight fades out. */
.text :target {
  border-radius: 4px;
  animation: target-flash 2s ease-out;
}

@keyframes target-flash {
  from {
    background: var(--active-bg);
  }
}

.text p {
  margin: 0 0 0.6em;
  text-indent: 1.5em;
}

.text .title {
  margin: 2rem 0 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.text .title p {
  margin: 0;
  text-indent: 0;
}

.text .title-1 {
  font-size: 1.6em;
}

.text .title-2 {
  font-size: 1.35em;
}

.text .title-3 {
  font-size: 1.15em;
}

.text .subtitle {
  margin: 1.2em 0 0.6em;
  font-weight: 600;
  text-align: center;
  text-indent: 0;
}

.text .empty-line {
  height: 1em;
}

.text figure {
  margin: 1.2em 0;
  text-align: center;
}

.text img {
  max-width: 100%;
  height: auto;
}

.text img.inline {
  max-height: 1.5em;
  vertical-align: middle;
}

.text figcaption {
  color: var(--muted);
  font-size: 0.9em;
}

.text blockquote {
  margin: 1em 0 1em 2em;
}

.text .epigraph {
  margin-left: 40%;
  font-size: 0.95em;
}

.text .epigraph p,
.text .attribution,
.text .date,
.text .poem p,
.text .stanza p {
  text-indent: 0;
}

.text .attribution {
  font-style: italic;
  text-align: right;
}

.text .date {
  color: var(--muted);
  text-align: right;
}

.text .poem {
  margin: 1em 0 1em 2em;
}

.text .stanza {
  margin-bottom: 0.8em;
}

.text .poem-title,
.text .stanza-title {
  font-weight: 600;
}

.text .verse {
  margin: 0;
}

.text table {
  margin: 1em 0;
  border-collapse: collapse;
}

.text th,
.text td {
  padding: 0.25em 0.6em;
  border: 1px solid var(--border);
}

.text .align-left {
  text-align: left;
}

.text .align-center {
  text-align: center;
}

.text .align-right {
  text-align: right;
}

.text ol,
.text ul {
  margin: 0.6em 0;
  padding-left: 2em;
}

.text li p {
  margin: 0 0 0.3em;
  text-indent: 0;
}

.text li > ol,
.text li > ul {
  margin: 0.3em 0;
}

.text pre {
  margin: 1em 0;
  padding: 0.5em 0.75em;
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.4;
  white-space: pre;
  text-align: left;
  hyphens: none;
  background: var(--active-bg);
  border-radius: 4px;
}

.text hr {
  width: 30%;
  margin: 1.5em auto;
  border: 0;
  border-top: 1px solid var(--border);
}

.text .note-ref {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
}

.text .notes {
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: 0.95em;
  border-top: 1px solid var(--border);
}

/* ---------- Settings ---------- */

.settings-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.settings-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  max-width: 44rem;
  margin: 0 0 0.75rem;
}

.settings-notice form {
  margin: 0;
}

.notice.ok {
  background: var(--banner-bg);
}

.notice.info {
  border-left: 3px solid var(--accent);
}

.settings-section {
  max-width: 44rem;
  margin: 0 0 2rem;
  scroll-margin-top: calc(var(--topbar-height) + 1rem);
}

.settings-section h2 {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
}

.settings-section > .muted {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

/* Phone and other devices: QR codes keep their white quiet zone in every theme. */
.qr-code {
  margin: 1rem 0;
}

svg.qr {
  display: block;
  width: min(16rem, 100%);
  height: auto;
  border-radius: 4px;
}

.secret-text code {
  display: block;
  max-width: 44rem;
  padding: 0.5rem 0.75rem;
  overflow-wrap: anywhere;
  user-select: all;
}

.device-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.device-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.device-list li .hint {
  flex: 1 1 12rem;
  margin: 0;
}

.field {
  margin: 0 0 1rem;
}

.field > label:not(.check),
.field legend {
  display: block;
  margin: 0 0 0.25rem;
  padding: 0;
  font-weight: 600;
}

.field fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.field .check {
  display: block;
  margin: 0.15rem 0;
}

.field > .check {
  font-weight: 600;
}

.field input[type="number"],
.field input[type="text"],
.field input[type="password"],
.field select,
.field textarea {
  box-sizing: border-box;
  padding: 0.3rem 0.5rem;
  color: var(--fg);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.field input[type="number"],
.field input[type="password"] {
  width: 12rem;
  max-width: 100%;
}

.field input[type="text"] {
  width: 20rem;
  max-width: 100%;
}

.field textarea {
  display: block;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  resize: vertical;
}

.field.invalid input,
.field.invalid textarea {
  border-color: var(--error);
}

.field-error {
  margin: 0.25rem 0 0;
  color: var(--error);
  font-size: 0.9rem;
}

.hint {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.hint .default {
  white-space: nowrap;
}

.settings-save {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  max-width: 44rem;
  margin: 0 0 2rem;
  padding: 0.75rem 0;
  font-size: 0.9rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

button.primary {
  color: var(--on-accent);
  font-weight: 600;
  background: var(--accent);
  border-color: var(--accent);
}

button.primary:hover {
  filter: brightness(1.1);
}

button:disabled,
button:disabled:hover {
  cursor: not-allowed;
  opacity: 0.55;
  filter: none;
}

.settings-facts {
  grid-template-columns: max-content minmax(0, 1fr);
  overflow-wrap: anywhere;
}

.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.actions .action {
  margin: 0 0 1rem;
}

.actions form {
  margin: 0;
}

.no-js-note {
  display: none;
}

.no-js .no-js-note {
  display: block;
}

.no-js .browser-settings {
  display: none;
}

.browser-done:empty {
  display: none;
}

/* ---------- Profiles ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Initials on the profile color; the name is always shown next to it or announced. */
.avatar {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
}

.avatar-large {
  width: 5rem;
  height: 5rem;
  font-size: 1.75rem;
}

.lock-badge {
  position: absolute;
  right: -0.2rem;
  bottom: -0.2rem;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.25rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.profile-menu {
  position: relative;
}

.profile-menu > summary {
  display: flex;
  padding: 0.2rem;
  list-style: none;
  border-radius: 50%;
  cursor: pointer;
}

.profile-menu > summary::-webkit-details-marker {
  display: none;
}

.profile-menu > summary:hover,
.profile-menu[open] > summary {
  background: var(--hover);
}

.profile-menu .menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.35rem 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
}

.profile-menu .menu-name {
  margin: 0;
  padding: 0.35rem 0.9rem 0.5rem;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.profile-menu .menu form {
  margin: 0;
}

.profile-menu .menu a,
.profile-menu .menu button {
  display: block;
  width: 100%;
  padding: 0.4rem 0.9rem;
  color: var(--fg);
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 0;
}

.profile-menu .menu a:hover,
.profile-menu .menu button:hover,
.profile-menu .menu a:focus-visible,
.profile-menu .menu button:focus-visible {
  background: var(--hover);
}

/* The narrow top bar's admin entries, in the menu instead of the bar. */
.profile-menu .menu .narrow-only {
  display: none;
}

/* The picker and the PIN page. */
body.minimal .topbar {
  justify-content: center;
}

.minimal-main {
  max-width: 48rem;
  margin: 0 auto;
  padding: 3rem 1rem;
  text-align: center;
}

.profile-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.profile-tiles form {
  margin: 0;
}

.profile-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 8rem;
  padding: 0.75rem 0.5rem;
  color: var(--fg);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.profile-tile:hover,
.profile-tile:focus-visible {
  background: var(--hover);
  border-color: var(--border);
}

.tile-name {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* The login list: a profile without a password cannot log in from here. */
.profile-tile:disabled {
  cursor: default;
  opacity: 0.6;
}

.profile-tile:disabled:hover {
  background: none;
  border-color: transparent;
}

.tile-note {
  font-size: 0.85rem;
}

.picker-note {
  max-width: 32rem;
  margin: 0 auto;
}

.pin-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.pin-box h1 {
  margin: 0;
}

.pin-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.pin-form input:not([type="checkbox"]) {
  width: 10rem;
  padding: 0.4rem 0.6rem;
  font-size: 1.25rem;
  text-align: center;
  letter-spacing: 0.3em;
  color: var(--fg);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* A password is not a number: no spacing, room for a passphrase. */
.login-form input[type="password"] {
  width: min(18rem, 100%);
  font-size: 1rem;
  text-align: start;
  letter-spacing: normal;
}

/* My profile: the color swatches. */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.swatch {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

.swatch input {
  position: absolute;
  opacity: 0;
}

.swatch:has(input:checked) {
  border-color: var(--fg);
}

.swatch:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.swatch .avatar {
  width: 2.25rem;
  height: 2.25rem;
}

/* Settings → Profiles. */
.profile-rows {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.profile-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.25rem 0.75rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.profile-facts {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-facts strong {
  overflow-wrap: anywhere;
}

.profile-edit {
  justify-self: end;
}

.profile-edit[open] {
  grid-column: 1 / -1;
  justify-self: stretch;
}

.profile-edit > summary {
  cursor: pointer;
  color: var(--accent);
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0 0.25rem;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
}

.inline-form input[type="text"] {
  padding: 0.3rem 0.5rem;
  color: var(--fg);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.add-profile h3 {
  margin-top: 0;
}

fieldset.field {
  padding: 0;
  border: 0;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  margin: 0 0 1rem;
}

.profile-actions {
  align-items: flex-start;
}

button.danger,
.button.danger {
  color: var(--error);
  border-color: var(--error);
}

.save-notice {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  z-index: 40;
  padding: 0.5rem 1rem;
  color: var(--bg);
  background: var(--fg);
  border-radius: var(--radius);
  transform: translateX(-50%);
}

.save-notice[hidden] {
  display: none;
}

/* "Family is reading" and the book card's line. */
.family-reader {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.family-reader .avatar {
  width: 22px;
  height: 22px;
  font-size: 0.65rem;
}

.family-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: center;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 48rem) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar-resizer {
    display: none;
  }

  .sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    z-index: 10;
    display: none;
    width: min(var(--sidebar-width), 85vw);
    box-shadow: 2px 0 8px rgb(0 0 0 / 0.25);
  }

  body.sidebar-shown .sidebar {
    display: block;
  }

  body.sidebar-hidden .sidebar {
    display: none;
  }

  /* Behind the open sidebar: dims the page, and a tap on it closes the sidebar
     (app.js). */
  body.sidebar-shown .layout::after {
    position: fixed;
    inset: var(--topbar-height) 0 0;
    z-index: 9;
    content: "";
    background: rgb(0 0 0 / 0.35);
  }

  .main {
    padding: 1rem;
  }

  .text .epigraph {
    margin-left: 20%;
  }

  .brand {
    display: none;
  }

  /* The way home on a phone, where the name is hidden. */
  .topbar .home-link {
    display: inline-flex;
  }

  /* The buttons have their own padding: little gap, more room for the search field. */
  .topbar {
    gap: 0.25rem;
  }

  /* The theme is also on the settings page (and in the reader's Aa panel), and the
     t key switches it: the bar keeps its room for the search field. */
  .topbar .theme-select {
    display: none;
  }

  /* With the profile menu, Rescan and the gear move into it: the bar keeps its room
     for the search field. */
  .topbar:has(.profile-menu) > .rescan,
  .topbar:has(.profile-menu) > .settings-link {
    display: none;
  }

  .profile-menu .menu .narrow-only {
    display: block;
  }

  .settings-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-facts dd {
    margin-bottom: 0.5rem;
  }

  .book-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .cover {
    max-width: 12rem;
  }
}

/* ---------- Touch screens ---------- */

/* Fingers need bigger targets than a mouse pointer: at least 44 by 44 CSS pixels
   (WCAG 2.5.5) for every control, menu entry and list of links. Links inside running
   text keep their size. The layout stays the same, only the targets grow. */
@media (pointer: coarse) {
  .icon-button,
  .avatar-button,
  .twisty {
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .twisty {
    align-self: start;
  }

  .avatar-button {
    display: inline-flex;
    align-items: center;
  }

  input:not([type="checkbox"], [type="radio"], [type="hidden"]),
  select,
  button,
  .button {
    min-height: 2.75rem;
  }

  /* A link styled as a button keeps its label in the middle of the taller box. */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
  }

  label.check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
  }

  summary {
    box-sizing: border-box;
    min-height: 2.75rem;
    padding-block: 0.6rem;
  }

  .profile-menu .menu a,
  .profile-menu .menu button {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .modes a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
  }

  /* The sidebar tree: one row per finger. */
  .tree .node {
    grid-template-columns: 2.75rem 1.25rem minmax(0, 1fr) auto;
    align-items: center;
  }

  .showcase-on .tree .node {
    grid-template-columns: 2.75rem 1.25rem minmax(0, 1fr) auto auto;
  }

  /* A finger-sized target around the Showcase checkbox. */
  .tree .showcase-mark {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* Author and folder names keep their ellipsis: a block with a tall line. */
  .tree .node > a {
    line-height: 2.75rem;
  }

  .tree .book > a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Lists of links: authors, folders, books, facts and the statistics. */
  .authors a,
  .folders a,
  .books a,
  .facts-list a,
  .annotation-links a,
  .find-hits a,
  .latest-quotes a,
  .annotation-list a,
  .reading-book a.title,
  .bars .bar-label a,
  .facts dd a {
    display: inline-flex;
    align-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .swatch {
    padding: 0.5rem;
  }
}

/* ---------- Notches and rounded corners ---------- */

/* With `viewport-fit=cover` the page reaches the screen edges: the bars and the text
   keep clear of a notch, a rounded corner and the home indicator. */
@supports (padding: env(safe-area-inset-left)) {
  .topbar {
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  .main {
    padding-right: max(2rem, env(safe-area-inset-right));
    padding-bottom: calc(3rem + env(safe-area-inset-bottom));
  }

  .sidebar {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    padding-left: max(0.75rem, env(safe-area-inset-left));
  }

  @media (max-width: 48rem) {
    .main {
      padding-right: max(1rem, env(safe-area-inset-right));
      padding-left: max(1rem, env(safe-area-inset-left));
    }
  }
}

/* The book card's hub shelf. */
.shelf-box {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.shelf-box h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.shelf-box .book-link summary {
  cursor: pointer;
}

.shelf-box .book-link {
  margin: 0 0 0.75rem;
}