:root {
  --bg: #fafaf9;
  --surface: #ffffff;
  --text: #1c1917;
  --text-muted: #78716c;
  --border: #e7e5e4;
  --accent: #14532d;
  --accent-contrast: #ffffff;
  --danger: #b91c1c;
  --header-h: 64px;
  --controls-h: 52px;
  --status-to-read-bg: #e7e5e4;
  --status-to-read-text: #57534e;
  --status-reading-bg: #fef3c7;
  --status-reading-text: #92400e;
  --status-completed-bg: #dcfce7;
  --status-completed-text: #166534;
  --placeholder-gradient: linear-gradient(135deg, #ece5d8, #d8cebe);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1917;
    --surface: #292524;
    --text: #f5f5f4;
    --text-muted: #a8a29e;
    --border: #44403c;
    --accent: #4ade80;
    --accent-contrast: #052e16;
    --status-to-read-bg: rgba(255, 255, 255, 0.08);
    --status-to-read-text: #a8a29e;
    --status-reading-bg: rgba(217, 119, 6, 0.25);
    --status-reading-text: #fbbf24;
    --status-completed-bg: rgba(34, 197, 94, 0.2);
    --status-completed-text: #4ade80;
    --placeholder-gradient: linear-gradient(135deg, #3d372c, #2b271f);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2 { margin: 0; }

button {
  font: inherit;
  cursor: pointer;
}

/* Header */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(env(safe-area-inset-top), 16px) 16px 12px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.app-header h1 {
  font-size: 1.3rem;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}

.btn-small {
  padding: 6px 10px;
  font-size: 0.8rem;
}

/* Controls: tabs + sort + view toggle */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px 12px;
  position: sticky;
  top: var(--header-h);
  z-index: 9;
  background: var(--bg);
}

.status-tabs {
  overflow-x: auto;
}

.right-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-tabs, .view-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}

.tab, .view-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.tab.active, .view-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
}

#sort-select {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 0.85rem;
}

/* Grouping heading — used when sorting by author (grouped by author name), or
   when sorting the Completed tab by publication date / date completed (grouped
   by year). Sticky so the current group stays visible while scrolling. */

.group-heading {
  grid-column: 1 / -1;
  position: sticky;
  top: calc(var(--header-h) + var(--controls-h));
  z-index: 8;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}

/* Grid view */

.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px 24px;
  padding: 4px 16px 32px;
}

.book-card {
  display: flex;
  flex-direction: column;
  border: none;
  padding: 0;
  background: transparent;
  text-align: left;
}

.cover-wrap {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

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

.card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 2px 0;
}

.card-title {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-author {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-completed {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* List view — spreadsheet-style columns: title (cover + title combined into one
   cell) | author | year | rating | [completed] | status, all equal-width via
   repeat(N, 1fr) — they flex together as the browser width changes rather than
   title/author being favored over the narrower columns. The Completed column
   only appears on the Completed tab (toggled via .show-completed on the
   container), since that date is only ever set for completed books. */

.list-view {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 32px;
}

/* Each row/header gets its own horizontal-scroll box (see wrapForHorizontalScroll
   in render.js for why it's per-row rather than one shared wrapper). Grid tracks
   still won't shrink below their content's natural minimum, so if the row's
   natural width (most likely on the 7-column Completed tab) exceeds the
   viewport, this scrolls instead of every column getting squeezed unreadably
   thin. */
.list-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px;
}

.list-header,
.book-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 8px;
  min-width: fit-content;
}

.list-view.show-completed .list-header,
.list-view.show-completed .book-row {
  grid-template-columns: repeat(6, 1fr);
}

/* Below ~640px, true equal columns leave the Title cell too narrow to read (the
   cover thumbnail alone eats most of an equal share). Instead of squeezing text
   or forcing horizontal scroll, wrap onto two lines: Title + Status up top
   (the two things worth seeing at a glance), the smaller metadata underneath. */
@media (max-width: 640px) {
  .list-header,
  .book-row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 8px;
    min-width: 0;
  }

  .header-title,
  .row-title-cell {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-status,
  .status-badge {
    order: 2;
    flex: 0 0 auto;
  }

  .header-author,
  .row-author {
    order: 3;
    flex: 1 1 auto;
    min-width: 60px;
  }

  .header-year,
  .row-year {
    order: 4;
    flex: 0 0 auto;
    text-align: left;
  }

  .header-rating,
  .row-rating {
    order: 5;
    flex: 0 0 auto;
  }

  .header-completed,
  .row-completed {
    order: 6;
    flex: 0 0 auto;
  }
}

.list-header {
  padding: 0 8px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.header-year,
.header-status {
  text-align: right;
}

.header-rating,
.header-completed {
  text-align: center;
}

.book-row {
  border: none;
  background: var(--surface);
  border-radius: 10px;
  padding: 6px 8px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 8px;
  text-align: left;
}

.cover-thumb {
  width: 44px;
  height: 66px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.book-row .cover-thumb {
  width: 36px;
  height: 54px;
}

.placeholder-cover {
  background: var(--placeholder-gradient);
}

.row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.row-title-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.row-title {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.rating-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}

.dot.full {
  background: var(--text-muted);
}

.dot.half {
  background: linear-gradient(90deg, var(--text-muted) 50%, var(--border) 50%);
}

.row-author {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.row-year {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.row-rating {
  display: flex;
  justify-content: center;
}

.row-completed {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.status-badge {
  justify-self: end;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  text-align: center;
}

.status-badge.status-to_read {
  background: var(--status-to-read-bg);
  color: var(--status-to-read-text);
}

.status-badge.status-reading {
  background: var(--status-reading-bg);
  color: var(--status-reading-text);
}

.status-badge.status-completed {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  margin-top: 40px;
}

/* Modals */

dialog.modal {
  border: none;
  border-radius: 14px;
  padding: 16px;
  width: min(480px, 92vw);
  max-height: 85vh;
  background: var(--surface);
  color: var(--text);
}

dialog.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

#search-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}

.hint {
  color: var(--text-muted);
  font-size: 0.85rem;
  min-height: 1.2em;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 55vh;
  overflow-y: auto;
}

.search-result .row-info { flex: 1; }

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Edit form */

#edit-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edit-title-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.edit-cover {
  width: 56px;
  height: 84px;
  object-fit: cover;
  border-radius: 6px;
}

.edit-title-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.edit-title-input {
  font-weight: 700;
  font-size: 1rem;
}

.edit-author-input {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.synopsis {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text);
  max-height: 6.5em;
  overflow-y: auto;
  margin: 0 0 4px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 8px;
}

#edit-form label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 8px;
}

#edit-form select,
#edit-form input,
#edit-form textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}

#edit-form input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.edit-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

/* Login page */

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  width: min(320px, 90vw);
  background: var(--surface);
  border-radius: 14px;
  padding: 32px 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  text-align: center;
}

.login-card h1 {
  margin-bottom: 24px;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.login-card input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}

.login-card button {
  margin-top: 8px;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.error {
  color: var(--danger);
  font-size: 0.85rem;
}