/* --------------------------------------------------------------------
   annotate.css — the selection toolbar, the quotes panel, and the
   About/donation bits.

   The marks painted onto the book's own page are styled from a stylesheet
   inside annotate.js instead, because they live in the book's frame rather
   than in this page.
   -------------------------------------------------------------------- */

/* ---------------------------------------------------------------- */
/* Selection toolbar                                                 */
/* ---------------------------------------------------------------- */

.sel-toolbar {
  position: fixed;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: var(--shadow);
  max-width: calc(100vw - 1rem);
  flex-wrap: wrap;
}

.sel-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  padding: 0;
  flex: none;
}
.sel-swatch[data-colour="yellow"] { background: #ffd600; }
.sel-swatch[data-colour="green"]  { background: #40c878; }
.sel-swatch[data-colour="blue"]   { background: #50a0ff; }
.sel-swatch[data-colour="pink"]   { background: #ff6eaa; }
.sel-swatch[aria-pressed="true"] { outline: 2px solid var(--fg); outline-offset: 2px; }

.sel-action {
  min-height: 28px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-size: var(--step--1);
  white-space: nowrap;
}
.sel-action:hover { background: var(--bg-3); }

.sel-divider { width: 1px; align-self: stretch; background: var(--border); margin: 2px; }

.colour-row { display: flex; gap: var(--sp-2); }

[data-epaper] .sel-toolbar { border-width: 2px; }
[data-epaper] .sel-swatch { width: 30px; height: 30px; }
[data-epaper] .sel-action { min-height: 36px; }

/* ---------------------------------------------------------------- */
/* Quotes panel                                                      */
/* ---------------------------------------------------------------- */

/* Sits above both screens, because it opens from the reader and from the
   library and should look the same either way. */
/* At the end edge — the right, or the left when mirrored for right-to-left. */
.quotes-panel {
  position: fixed;
  inset-block: 0;
  inset-inline: auto 0;
  z-index: 60;
  width: var(--drawer-w);
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.quotes-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.quotes-filters .field { flex: 1 1 110px; min-width: 0; }
.quotes-filters .field-wide { flex-basis: 100%; }
/* Book titles are long; the book gets the room and the rest share what is left. */
.quotes-filters .field-book { flex: 2 1 190px; }

/*
 * How many, on the left, directly above the list it counts.
 *
 * It sat at the far end of the row of filters, where it read as one more
 * filter, and wrapped to wherever the row happened to end. Here it is the
 * first line of the list, which is what it describes.
 */
.quotes-count {
  flex: none;
  margin: 0;
  padding: var(--sp-2) var(--sp-4) 0;
  font-size: var(--step--1);
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.quotes-count:empty { display: none; }

.quotes-body { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-4) var(--sp-6); }

.quote-book {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin: var(--sp-4) 0 var(--sp-2);
  position: sticky;
  top: 0;
  background: var(--bg-2);
  padding: var(--sp-1) 0;
}
.quote-book:first-child { margin-top: 0; }

.quote-card {
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.quote-card[data-colour="yellow"] { border-inline-start-color: #ffd600; }
.quote-card[data-colour="green"]  { border-inline-start-color: #40c878; }
.quote-card[data-colour="blue"]   { border-inline-start-color: #50a0ff; }
.quote-card[data-colour="pink"]   { border-inline-start-color: #ff6eaa; }

.quote-text {
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  padding: 0;
  font-size: var(--step--1);
  line-height: 1.5;
  /* Long passages are trimmed in the list; the whole thing is in the book. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quote-text:hover { text-decoration: underline; text-underline-offset: 3px; }

.quote-speaker { font-size: var(--step--1); color: var(--fg-dim); font-style: italic; }
.quote-confidence { font-style: normal; opacity: 0.75; }

.quote-note {
  font-size: var(--step--1);
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}

.quote-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }

.quote-preview {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-inline-start: 3px solid var(--border);
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  line-height: 1.5;
  max-height: 8em;
  overflow-y: auto;
}

.note-input { min-height: 4.5em; padding: var(--sp-2) var(--sp-3); resize: vertical; }

/* Editing a highlight: the quote, the colours, the note, the speaker, each with
   room of its own. The colours get a few pixels around them so the chosen
   one's ring (outline 2px, 2px out) has somewhere to be. */
.mark-edit { display: flex; flex-direction: column; gap: var(--sp-3); }
.mark-edit .colour-row { padding: 4px; }

/* ---------------------------------------------------------------- */
/* About and donations                                               */
/* ---------------------------------------------------------------- */

.about-head {
  font-size: var(--step--1);
  font-weight: 600;
  margin-top: var(--sp-2);
}
.about-list { margin: 0; padding-inline-start: 1.2em; font-size: var(--step--1); color: var(--fg-dim); }
.donate-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.donate-row .btn { text-decoration: none; flex: 1 1 auto; justify-content: center; }

@media (max-width: 720px) {
  .quotes-panel { width: 100vw; }
}