/* Highlights, notes, bookmarks — on the page, in the reader's sidebar, and in the notebook.
   Owned by the annotations feature (src/annotations, src/views/notebook.js).

   Colors: an annotation's color is one of the --hl-* tokens. Elements carry
   data-color="yellow|green|blue|pink|purple"; the rules below turn that into --hl,
   the solid ink used for bars, swatches and markers. */

[data-color="yellow"] { --hl: var(--hl-yellow); }
[data-color="green"] { --hl: var(--hl-green); }
[data-color="blue"] { --hl: var(--hl-blue); }
[data-color="pink"] { --hl: var(--hl-pink); }
[data-color="purple"] { --hl: var(--hl-purple); }

/* ══════════ On the page ══════════ */

/* Strokes are blended with the page as one layer, so the text always stays in front:
   · light and sepia paper — multiply: ink keeps its color, paper takes the highlighter's.
   · dark paper — lighten with a deep tone of the same hue: the paper glows softly and the
     off-white text, being lighter than the stroke, is left exactly as it was.
   (The blend sits on the layer, not on each stroke, so it also holds when the page is rotated.) */
.page__marks {
  mix-blend-mode: multiply;
  --stroke-yellow: color-mix(in srgb, var(--hl-yellow) 82%, white);
  --stroke-green: color-mix(in srgb, var(--hl-green) 80%, white);
  --stroke-blue: color-mix(in srgb, var(--hl-blue) 76%, white);
  --stroke-pink: color-mix(in srgb, var(--hl-pink) 74%, white);
  --stroke-purple: color-mix(in srgb, var(--hl-purple) 72%, white);
}
/* .page--plain: a page left light in a dark theme (a scan under "Recolor") keeps the light recipe. */
.reader[data-page-theme="dark"] .page:not(.page--plain) .page__marks {
  mix-blend-mode: lighten;
  /* Deep, saturated tones of equal lightness (relative luminance 0.078). Measured on screen,
     the page's off-white ink (#C1C8C5) keeps 4.5:1 or better on each, and the stroke still
     stands 2.1:1 off the paper. Text that is not near-white (a red warning, a link) cannot
     keep 4.5:1 under any fill that is still visible on dark paper. */
  --stroke-yellow: #634C07;
  --stroke-green: #24593B;
  --stroke-blue: #215279;
  --stroke-pink: #7F3656;
  --stroke-purple: #554290;
}
.hl { position: absolute; border-radius: 2px; background: var(--stroke-yellow); }
.hl[data-color="green"] { background: var(--stroke-green); }
.hl[data-color="blue"] { background: var(--stroke-blue); }
.hl[data-color="pink"] { background: var(--stroke-pink); }
.hl[data-color="purple"] { background: var(--stroke-purple); }

.reader__scroller--over-mark .textLayer :is(span, br) { cursor: pointer; }

/* Markers, ribbons and the flash ring live above the text. The layer is not rotated:
   children are placed in visual percentages and stay upright. */
.page__pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* ---------- Bookmark ribbon ---------- */
.ribbon {
  position: absolute; top: -5px; right: clamp(12px, 5.5%, 44px);
  width: clamp(15px, 3.3%, 24px); aspect-ratio: 10 / 22;
  padding: 0; border: 0; background: none;
  pointer-events: auto; cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28));
  transform-origin: 50% 0;
  transition: transform var(--dur-1) var(--ease);
}
.ribbon__silk {
  display: block; width: 100%; height: 100%;
  background: var(--ribbon);
  /* the fold over the top edge, and a thread of light down the silk */
  background-image:
    linear-gradient(rgba(0, 0, 0, .26) 0 5px, transparent 5px),
    linear-gradient(90deg, transparent 0 18%, rgba(255, 255, 255, .12) 18% 30%, transparent 30%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}
.ribbon::after { content: ""; position: absolute; inset: -6px -10px -8px; }   /* a finger-sized target */
.ribbon:hover { transform: scaleY(1.06); }
.ribbon:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ribbon--new { animation: ribbon-in var(--dur-3) var(--ease); }
.ribbon.is-flashing { animation: ribbon-nod 1.2s var(--ease); }
@keyframes ribbon-in { from { transform: translateY(-70%); opacity: 0; } }
@keyframes ribbon-nod { 0%, 100% { transform: none; } 22%, 62% { transform: scaleY(1.22); } 42% { transform: none; } }

/* ---------- Note markers ---------- */
.pin {
  position: absolute; display: grid; place-items: center;
  width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 6px 6px 6px 2px;
  background: var(--hl, var(--hl-yellow)); color: var(--accent-ink);
  box-shadow: 0 0 0 1px rgba(20, 30, 10, .16), 0 1px 2px rgba(0, 0, 0, .22);
  pointer-events: auto; cursor: pointer;
  transform: translate(calc(-100% - 7px), -50%);
  transition: box-shadow var(--dur-1);
}
.page__pins[data-rotation="90"] .pin { transform: translate(-50%, calc(-100% - 7px)); }
.page__pins[data-rotation="180"] .pin { transform: translate(7px, -50%); }
.page__pins[data-rotation="270"] .pin { transform: translate(-50%, 7px); }
.pin::after { content: ""; position: absolute; inset: -9px; }
.pin:hover { box-shadow: 0 0 0 1px rgba(20, 30, 10, .3), 0 2px 6px rgba(0, 0, 0, .3); }
.pin:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pin.is-flashing { animation: pin-flash 1.6s var(--ease); }
.reader[data-page-theme="dark"] .pin { filter: brightness(.9) saturate(.92); }
@keyframes pin-flash {
  0%, 100% { box-shadow: 0 0 0 1px rgba(20, 30, 10, .16), 0 0 0 0 transparent; }
  15%, 70% { box-shadow: 0 0 0 1px rgba(20, 30, 10, .16), 0 0 0 4px var(--hit-ring); }
}

.pin-tip {
  position: fixed; z-index: var(--z-popover);
  max-width: min(280px, calc(100vw - 16px));
  padding: 8px 12px 9px;
  border-radius: var(--r-sm); border-left: 3px solid var(--hl, var(--hl-yellow));
  background: var(--raised); color: var(--ink);
  box-shadow: var(--shadow-2), 0 0 0 1px var(--line);
  font-size: var(--text-sm); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
  pointer-events: none;
  animation: pop-in var(--dur-1) var(--ease);
}
/* A long note is previewed by its first lines and ends on a whole one; the editor and the notebook show all of it. */
.pin-tip__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; line-clamp: 10; overflow: hidden; }

/* ---------- Flash: where a jump landed ---------- */
.flash {
  position: absolute; box-sizing: content-box; margin: -3px; padding: 3px;
  border-radius: 5px; box-shadow: 0 0 0 2px var(--hit-ring);
  pointer-events: none;
  animation: ann-flash 1.7s var(--ease) both;
}
@keyframes ann-flash {
  0% { opacity: 0; transform: scale(1.04); }
  14% { opacity: 1; transform: none; }
  64% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Bookmark button in the top bar ---------- */
.bookmark-btn[aria-pressed="true"] { background: transparent; color: var(--ribbon); }
.bookmark-btn[aria-pressed="true"]:hover { background: var(--hover); }
.bookmark-btn[aria-pressed="true"] svg { fill: currentColor; }

/* ══════════ Color swatches ══════════ */

.hl-swatches { display: flex; align-items: center; }
.hl-swatch {
  position: relative; display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: none;
}
.hl-swatch::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  background: var(--hl);
  box-shadow: inset 0 0 0 1px rgba(20, 30, 10, .18);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1);
}
.hl-swatch:hover::before { transform: scale(1.12); }
.hl-swatch:active::before { transform: scale(.96); }
.hl-swatch:is([aria-checked="true"], [aria-pressed="true"])::before {
  box-shadow: inset 0 0 0 1px rgba(20, 30, 10, .18), 0 0 0 2px var(--raised), 0 0 0 4px var(--ink);
}
.hl-swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; }
/* As a filter (sidebar, notebook) the ring sits on the view's own background. */
.hl-swatch--filter:is([aria-checked="true"], [aria-pressed="true"])::before {
  box-shadow: inset 0 0 0 1px rgba(20, 30, 10, .18), 0 0 0 2px var(--swatch-gap, var(--bg)), 0 0 0 4px var(--ink);
}

/* ══════════ Selection toolbar ══════════ */

.sel-bar {
  position: fixed; z-index: var(--z-popover);
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: 12px;
  background: var(--raised); color: var(--ink);
  box-shadow: var(--shadow-3), 0 0 0 1px var(--line);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  animation: pop-in var(--dur-1) var(--ease);
}
.sel-bar__colors { display: flex; align-items: center; padding: 0 1px; }
.sel-bar__sep { width: 1px; height: 18px; margin: 0 4px 0 3px; background: var(--line-strong); }
.sel-bar__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px 0 8px;
  border: 0; border-radius: 8px; background: none; color: var(--ink);
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  transition: background var(--dur-1);
}
.sel-bar__btn svg { color: var(--ink-2); }
.sel-bar__btn:hover { background: var(--hover); }
.sel-bar__btn:active { background: var(--pressed); }

/* ══════════ Editing on the page ══════════ */

/* The popover never grows past the room between the bars (--ann-room, set by editor.js):
   from there the note field gives way and scrolls. */
.ann-pop { display: flex; flex-direction: column; max-height: var(--ann-room, calc(100dvh - 16px)); border-radius: 12px; overflow: visible; }
.ann-editor { display: flex; flex-direction: column; gap: var(--s-2); min-height: 0; width: 300px; max-width: calc(100vw - 16px); padding: 6px; }
.ann-editor > * { flex: none; }
.ann-editor__bar { display: flex; align-items: center; gap: 2px; min-height: 32px; padding-left: 2px; }
.ann-editor__spacer { flex: 1; }
.ann-editor__delete:hover { color: var(--danger); background: var(--danger-soft); }
.ann-editor__note {
  display: block; flex: 0 1 auto; width: 100%; min-height: 62px; max-height: min(40dvh, 260px);
  padding: 9px 11px; resize: none;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font-size: var(--text-md); line-height: 1.5;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.ann-editor__note::placeholder { color: var(--ink-3); }
.ann-editor__note:focus-visible {
  outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
}
.ann-editor[data-type="bookmark"] { gap: var(--s-3); padding: var(--s-3); }
.ann-editor__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.ann-editor__actions .ann-editor__delete { margin-left: -6px; color: var(--ink-2); }

/* ══════════ Entries (sidebar + notebook) ══════════ */

.entry { position: relative; min-width: 0; }
.entry__body {
  display: block; min-width: 0; border-radius: var(--r-sm);
  color: inherit; text-decoration: none;
  transition: background var(--dur-1);
}
.entry__body:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.entry__quote {
  margin: 0; padding-left: 13px;
  border-left: 3px solid var(--hl, var(--hl-yellow)); border-radius: 1.5px 0 0 1.5px;
  color: var(--ink); font-family: var(--font-display); overflow-wrap: anywhere;
}
.entry__note {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere;
}
.entry__note > span { white-space: pre-wrap; min-width: 0; }
.entry__note > svg { flex: none; color: var(--ink-3); }
.entry__note--empty { color: var(--ink-3); font-style: italic; }
.entry[data-type="highlight"] .entry__note { padding-left: 16px; }
.entry[data-type="note"] .entry__note { color: var(--ink); }
.entry[data-type="note"] .entry__note > svg { color: color-mix(in srgb, var(--hl, var(--hl-yellow)) 55%, var(--ink)); }

.entry :is(.entry__quote, .entry__note, .entry__label) mark {
  color: inherit; border-radius: 2px;
  background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 88% / 100% 46%;
}

.entry[data-type="bookmark"] .entry__body { display: flex; align-items: baseline; gap: 10px; }
.entry__ribbon { flex: none; align-self: center; color: var(--ribbon); fill: currentColor; }
.entry__label { min-width: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

.entry__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 30px; }
.entry__meta { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--ink-3); font-size: var(--text-xs); white-space: nowrap; }
.entry__page { color: var(--ink-2); font-weight: 600; }
.entry__page + .entry__date::before { content: "·"; margin-right: 6px; }
.entry__actions { display: flex; flex: none; }
.entry__action { color: var(--ink-3); }
.entry__action--danger:hover { color: var(--danger); background: var(--danger-soft); }
@media (hover: hover) {
  .entry__actions { opacity: 0; transition: opacity var(--dur-1); }
  .entry:hover .entry__actions, .entry:focus-within .entry__actions { opacity: 1; }
}
.entry__field { display: block; }
textarea.entry__field { min-height: 64px; max-height: 280px; resize: none; }

/* Compact: the reader's sidebar */
.entry--compact { padding: 0 var(--s-2); }
.entry--compact .entry__body { padding: 8px 8px 6px; margin: 0 -2px; }
.entry--compact .entry__body:hover { background: var(--hover); }
.entry--compact .entry__quote {
  font-size: 0.875rem; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.entry--compact .entry__note { margin-top: 7px; font-size: var(--text-sm); }
/* The list is for finding one's place: a long note shows its first lines here and all of it when edited. */
.entry--compact .entry__note > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.entry--compact .entry__note > svg { margin-top: 3px; }
.entry--compact[data-type="note"] .entry__note { margin-top: 0; }
.entry--compact .entry__label { font-size: var(--text-md); line-height: 1.35; }
.entry--compact .entry__foot { min-height: 26px; padding: 0 0 0 22px; margin-top: -4px; }
.entry--compact .entry__action { width: 26px; height: 26px; }
/* A bookmark is one unit: ribbon and label, the date beneath, and its two actions beside
   them — not on a row of their own, where they read as belonging to the next bookmark. */
.entry--compact[data-type="bookmark"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-1); }
.entry--compact[data-type="bookmark"] + .entry--compact[data-type="bookmark"] { margin-top: var(--s-1); }
.entry--compact[data-type="bookmark"] .entry__foot { display: contents; }
.entry--compact[data-type="bookmark"] :is(.entry__body, .entry__field, .entry__meta) { grid-column: 1; }
.entry--compact[data-type="bookmark"] .entry__meta { margin-top: -4px; padding: 0 0 6px 32px; }
.entry--compact[data-type="bookmark"] .entry__actions { grid-column: 2; grid-row: 1 / span 2; }
.entry--compact[data-type="note"] .entry__foot { padding-left: 28px; }
.entry--compact .entry__field { margin: 4px 6px 6px; width: calc(100% - 12px); font-size: var(--text-sm); }

/* ══════════ Sidebar tabs ══════════ */

.panel__tools { display: flex; align-items: center; gap: 2px; padding: 0 var(--s-2) var(--s-2) var(--s-4); }
.panel--bookmarks .panel__tools { padding-right: var(--s-4); }
.panel__primary { flex: 1; min-height: 34px; }
.panel__search { flex: 1; min-width: 0; margin-right: 4px; }
.panel__search .input { min-height: 34px; padding-top: 6px; padding-bottom: 6px; font-size: var(--text-sm); }
.panel__search .input::-webkit-search-cancel-button { display: none; }
.panel__filters { --swatch-gap: var(--surface); display: flex; align-items: center; gap: 2px; padding: 0 var(--s-3) var(--s-2) var(--s-4); }
.panel__all { min-height: 26px; margin-right: 6px; padding: 0 10px; font-size: var(--text-xs); }
.panel__group { padding-bottom: var(--s-2); }
.panel__page {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px var(--s-4) 4px;
  background: var(--surface); color: var(--ink-2);
  font-size: var(--text-xs); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.panel__chapter {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink-3); font-weight: 500; letter-spacing: 0; text-transform: none;
}
.panel .sidebar__empty .kbd { margin: 0 1px; }

/* ══════════ Notebook (#/notebook) ══════════ */

.notebook {
  display: flex; flex-direction: column;
  max-width: var(--content-max); min-height: 100%; margin: 0 auto;
  padding: var(--s-8) var(--s-10) 96px;
}
.notebook[data-state="loading"] > * { visibility: hidden; }
.notebook[data-state="empty"] { justify-content: center; padding-bottom: var(--s-10); }
.notebook[data-state="empty"] .notebook__header { display: none; }

.notebook__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.notebook__heading { min-width: 0; }
.notebook__title { font-size: var(--text-2xl); }
.notebook__summary { margin-top: 6px; color: var(--ink-3); font-size: var(--text-sm); }
.notebook__summary:empty { display: none; }

.notebook__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-6); }
.notebook__filters { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.notebook__chips { display: flex; gap: 6px; }
.notebook__chips .chip { min-height: 32px; padding: 0 13px; }
.notebook__colors { display: flex; align-items: center; padding-left: var(--s-3); border-left: 1px solid var(--line-strong); }
.notebook__tools { display: flex; align-items: center; gap: var(--s-2); min-width: 0; margin-left: auto; }
.notebook__search { width: 250px; }
.notebook__search .input { padding-right: 36px; }
.notebook__search .input::-webkit-search-cancel-button { display: none; }
.notebook__pick { gap: 6px; padding: 0 var(--s-3); font-weight: 600; min-width: 0; }
.notebook__pick svg { flex: none; color: var(--ink-2); }
.notebook__pick-label { min-width: 0; max-width: 15ch; overflow: hidden; text-overflow: ellipsis; }
/* The book picker's icon only stands in for its label on phones. */
.notebook__pick-icon { display: none; }
.notebook__pick.is-set { border-color: var(--ink); }
.notebook__menu .menu__label { max-width: min(320px, 70vw); overflow: hidden; text-overflow: ellipsis; }

.notebook__status {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin: calc(-1 * var(--s-2)) 0 var(--s-4); color: var(--ink-3); font-size: var(--text-sm);
}
.notebook__reset {
  padding: 0; border: 0; background: none; color: var(--ink-2); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.notebook__reset:hover { color: var(--ink); text-decoration-color: currentColor; }

/* One book: its cover and title stay in view in the left column while its passages scroll. */
.nb-book {
  display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: var(--s-12);
  padding: var(--s-10) 0;
  /* Off-screen books are not laid out until they come near (long notebooks stay quick).
     That clips painting to the box, so the box is widened a little to leave room for
     cover shadows and focus rings; the rule above the book is drawn inside it. */
  content-visibility: auto; contain-intrinsic-size: auto 480px;
  margin-inline: -12px; padding-inline: 12px;
  background: linear-gradient(var(--line), var(--line)) no-repeat 12px 0 / calc(100% - 24px) 1px;
}
.nb-book__head {
  position: sticky; top: var(--s-6); align-self: start;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-2); align-items: start;
}
.nb-book__cover { display: block; grid-column: 1 / -1; width: 104px; height: 148px; place-items: end start; border-radius: var(--r-book); }
.nb-book__cover:hover .cover { transform: translateY(-2px); }
.nb-book__cover .cover { transition: transform var(--dur-2) var(--ease); }
.nb-book__text { min-width: 0; }
.nb-book__title { font-size: var(--text-lg); line-height: 1.22; text-wrap: balance; overflow-wrap: anywhere; }
.nb-book__title a { text-decoration: none; }
.nb-book__title a:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.nb-book__author { margin-top: 4px; color: var(--ink-2); font-size: var(--text-sm); }
.nb-book__count { margin-top: var(--s-2); color: var(--ink-3); font-size: var(--text-xs); line-height: 1.55; }
.nb-book__count span { display: block; }
.nb-book__more { margin: -6px -8px 0 0; color: var(--ink-3); }
.nb-book__items { display: grid; gap: var(--s-6); max-width: 680px; min-width: 0; }

/* Roomy: the notebook's reading typography */
.entry--roomy .entry__body { margin: -6px -10px; padding: 6px 10px; }
.entry--roomy .entry__quote { padding-left: 18px; font-size: 1.0625rem; line-height: 1.62; text-wrap: pretty; }
.entry--roomy .entry__note { margin-top: 10px; font-size: var(--text-md); }
.entry--roomy .entry__note > svg { margin-top: 4px; }
.entry--roomy[data-type="highlight"] .entry__note { padding-left: 21px; }
.entry--roomy[data-type="note"] .entry__note { margin-top: 0; font-size: 1rem; line-height: 1.55; }
.entry--roomy .entry__label { font-size: 1rem; }
.entry--roomy .entry__foot { margin-top: 6px; padding-left: 21px; }
.entry--roomy[data-type="note"] .entry__foot { padding-left: 22px; }
/* The ribbon's glyph is inset 3px in its box: pull it onto the rule and keep every label on the same 21px edge. */
.entry--roomy[data-type="bookmark"] .entry__body { gap: 8px; }
.entry--roomy .entry__ribbon { margin-left: -3px; }
.entry--roomy[data-type="bookmark"] .entry__foot { padding-left: 21px; margin-top: 0; }
.entry--roomy .entry__field { margin: 10px 0 0 21px; width: calc(100% - 21px); }
.entry--roomy[data-type="note"] .entry__field, .entry--roomy[data-type="bookmark"] .entry__field { margin-top: 0; }
@media (hover: hover) {
  .entry--roomy .entry__body:hover :is(.entry__quote, .entry__label, .entry__note > span) {
    text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 4px;
  }
}

/* Nothing found / could not load */
.notebook__none {
  display: grid; justify-items: center; gap: var(--s-2);
  max-width: 460px; margin: 0 auto; padding: var(--s-16) var(--s-4);
  color: var(--ink-2); text-align: center;
}
.notebook__none > svg { color: var(--ink-3); margin-bottom: var(--s-2); }
.notebook__none-title { font-size: var(--text-xl); color: var(--ink); overflow-wrap: anywhere; }
.notebook__none .btn { margin-top: var(--s-4); }

/* First visit */
.notebook__empty { display: grid; justify-items: center; gap: var(--s-3); width: 100%; max-width: 560px; margin: 0 auto; text-align: center; }
.notebook__empty-title { margin-top: var(--s-6); font-size: var(--text-2xl); }
.notebook__empty-text { max-width: 46ch; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.notebook__empty .btn { margin-top: var(--s-4); }
.notebook__empty-hint { color: var(--ink-3); font-size: var(--text-sm); font-family: var(--font-display); font-style: italic; }
/* A specimen of what will be collected here: a quoted passage and a note beneath it. */
.specimen {
  width: min(100%, 440px); padding: var(--s-6) var(--s-6) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); text-align: left;
}
.specimen__quote {
  padding-left: 18px; border-left: 3px solid var(--accent);
  color: var(--ink); font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.62;
}
.specimen__note { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-left: 21px; color: var(--ink-2); font-size: var(--text-md); }
.specimen__note svg { color: var(--ink-3); }

@media (max-width: 980px) {
  .nb-book { grid-template-columns: 168px minmax(0, 1fr); gap: var(--s-8); }
  .nb-book__cover { width: 88px; height: 126px; }
  .notebook__search { width: 220px; }
}

@media (max-width: 720px) {
  .notebook { padding: var(--s-5) var(--s-4) var(--s-12); }
  .notebook__header { align-items: center; margin-bottom: var(--s-5); }
  .notebook__title { font-size: 1.75rem; }
  .notebook__summary { margin-top: 2px; }

  .notebook__toolbar { gap: var(--s-3); margin-bottom: var(--s-5); }
  .notebook__tools { order: -1; width: 100%; }
  .notebook__search { flex: 1; width: auto; min-width: 0; }
  .notebook__pick { padding: 0 var(--s-2); }
  .notebook__pick-label { display: none; }
  .notebook__pick svg:last-child { display: none; }
  .notebook__pick-icon { display: block; }
  /* Chips and colors scroll sideways, bleeding to the screen edges. */
  .notebook__filters {
    width: calc(100% + 2 * var(--s-4)); margin: 0 calc(-1 * var(--s-4)); padding: 3px var(--s-4);
    overflow-x: auto; scrollbar-width: none;
  }
  .notebook__filters::-webkit-scrollbar { display: none; }
  .notebook__chips .chip { padding: 0 10px; }
  .notebook__colors { flex: none; }

  .nb-book { display: block; padding-block: var(--s-6) var(--s-8); }
  .nb-book__head {
    position: static; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center;
    margin-bottom: var(--s-5);
  }
  .nb-book__cover { grid-column: auto; width: 44px; height: 62px; place-items: center; }
  .nb-book__title { font-size: 1.0625rem; }
  .nb-book__author { margin-top: 1px; }
  .nb-book__count { margin-top: 2px; }
  .nb-book__count span { display: inline; }
  .nb-book__count span + span::before { content: " · "; }
  .nb-book__more { margin: 0 -8px 0 0; }
  .nb-book__items { gap: var(--s-5); }
  .entry--roomy .entry__quote { padding-left: 14px; font-size: 1rem; line-height: 1.58; }
  .entry--roomy[data-type="highlight"] .entry__note, .entry--roomy .entry__foot { padding-left: 17px; }
  .entry--roomy .entry__field { margin-left: 17px; width: calc(100% - 17px); }
  .entry--roomy[data-type="bookmark"] .entry__body { gap: 4px; }
  .entry--roomy[data-type="bookmark"] .entry__foot { padding-left: 17px; }

  .notebook__empty-title { font-size: 1.75rem; }
  .ann-editor { width: min(320px, calc(100vw - 16px)); }
}

/* Fingers need larger targets than a mouse pointer. */
@media (pointer: coarse) {
  .sel-bar { padding: 5px; }
  .sel-bar .hl-swatch { width: 38px; height: 38px; }
  .sel-bar .hl-swatch::before { width: 24px; height: 24px; }
  .sel-bar__btn { height: 38px; padding: 0 12px 0 10px; }
  .sel-bar__sep { height: 22px; }
  .ann-editor .hl-swatch { width: 38px; height: 38px; }
  .ann-editor .hl-swatch::before { width: 24px; height: 24px; }
  .ann-editor .icon-btn--sm { width: 38px; height: 38px; }
  .hl-swatch--filter { width: 40px; height: 40px; }
  .entry .entry__action { width: 40px; height: 40px; }
  .entry--compact .entry__foot { min-height: 40px; margin-top: 0; }
  .notebook__chips .chip { min-height: 40px; }
}

/* Narrow phones: the toolbar keeps its five colors and drops the two words. */
@media (max-width: 380px) {
  .sel-bar__btn span { display: none; }
  .sel-bar__btn { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  /* The ring must stay visible for its whole life; only its fading is motion. */
  .flash { animation: none !important; }
  .pin.is-flashing { animation: none !important; box-shadow: 0 0 0 1px rgba(20, 30, 10, .16), 0 0 0 4px var(--hit-ring); }
  .ribbon.is-flashing { animation: none !important; outline: 2px solid var(--hit-ring); outline-offset: 3px; }
}