/* Apple Books colors are independent of the book's interface palette. */
.book-annotation,
.annotation-row,
.annotation-detail,.annotation-color-choice { --annotation-fill:transparent; --annotation-color:var(--accent); }
[data-annotation-color="green"] { --annotation-fill:#dceecd; --annotation-color:#53753d; }
[data-annotation-color="blue"] { --annotation-fill:#d8eafb; --annotation-color:#416a94; }
[data-annotation-color="yellow"] { --annotation-fill:#f8edb6; --annotation-color:#8a7228; }
[data-annotation-color="pink"] { --annotation-fill:#f8dce2; --annotation-color:#a35d70; }
[data-annotation-color="purple"] { --annotation-fill:#e8ddf7; --annotation-color:#7a5a9a; }
:is(.chapter-body,#chapter-title,#chapter-kicker) .book-annotation {
  background:var(--annotation-fill);
  color:inherit;
  border-radius:2px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding-block:1px;
  cursor:pointer;
}
:is(.chapter-body,#chapter-title,#chapter-kicker) .book-annotation.annotation-has-note { cursor:pointer; }
:is(.chapter-body,#chapter-title,#chapter-kicker) .book-annotation.annotation-underlined {
  text-decoration-line:underline;
  text-decoration-color:var(--annotation-color);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
:is(.chapter-body,#chapter-title,#chapter-kicker) .book-annotation:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
:is(.chapter-body,#chapter-title,#chapter-kicker) .annotation-note-indicator::before {
  content:'✎';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  margin-right:4px;
  border-radius:50%;
  background:var(--annotation-color);
  color:#fff;
  font:700 14px/1 "Segoe UI Symbol","Segoe UI",Arial,sans-serif;
  vertical-align:2px;
  box-shadow:0 0 0 1px var(--paper);
}
:is(.chapter-body,#chapter-title,#chapter-kicker) .annotation-jump { animation:annotation-pulse 1.4s ease-out; }
@keyframes annotation-pulse { from { box-shadow:0 0 0 3px var(--accent); } to { box-shadow:0 0 0 0 transparent; } }
.annotations-trigger { white-space:nowrap; }
.annotation-dialog { color:var(--ink); background:var(--paper); padding:0; border:1px solid var(--line); }
.annotation-dialog::backdrop { background:var(--dialog-backdrop,#26352b50); backdrop-filter:blur(3px); }
.annotation-dialog .dialog-heading { padding-bottom:16px; }
.annotations-summary { padding:0 28px 17px; color:var(--ui-muted,var(--muted)); font-size:12px; line-height:1.7; }
.annotations-list { overflow:auto; overscroll-behavior:contain; padding:0 14px 18px; min-height:130px; }
.annotation-row { display:block; text-align:left; width:100%; border-radius:7px; padding:15px 14px; margin:0; line-height:1.6; }
.annotation-row + .annotation-row { border-top:1px solid var(--line); }
.annotation-row:hover { background:var(--surface-soft,var(--accent-soft)); }
.annotation-row-meta { display:flex; flex-wrap:wrap; gap:6px 12px; margin-bottom:8px; color:var(--ui-muted,var(--muted)); font-size:10px; }
.annotation-style-label { display:inline-flex; align-items:center; gap:6px; color:var(--annotation-color); font:12px/1.5 "Segoe UI",Arial,sans-serif; }
.annotation-style-label::before { content:''; width:10px; height:10px; border-radius:2px; background:var(--annotation-fill); border:1px solid var(--annotation-color); flex-shrink:0; }
.annotation-location { overflow-wrap:anywhere; }
.annotation-snippet { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; overflow-wrap:anywhere; font:17px/1.6 Georgia,"Times New Roman",serif; color:var(--ink); }
.annotation-note-preview { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; margin-top:9px; font:12px/1.6 "Segoe UI",Arial,sans-serif; color:var(--ui-ink,var(--muted)); white-space:pre-wrap; }
.annotation-note-content { overflow:auto; overscroll-behavior:contain; padding:0 28px 28px; }
.annotation-detail { padding-bottom:24px; }
.annotation-detail:last-child { padding-bottom:0; }
.annotation-detail + .annotation-detail { border-top:1px solid var(--line); padding-top:24px; }
.annotation-detail-meta { display:flex; flex-wrap:wrap; gap:8px 15px; align-items:center; color:var(--ui-muted,var(--muted)); font:11px/1.7 "Segoe UI",Arial,sans-serif; }
.annotation-quote { margin:18px 0; padding:12px 15px; border-left:3px solid var(--annotation-color); background:var(--annotation-fill); color:var(--ink); font:18px/1.7 Georgia,"Times New Roman",serif; white-space:pre-wrap; overflow-wrap:anywhere; }
.annotation-note-text { margin:20px 0 18px; color:var(--ink); font:15px/1.8 "Segoe UI",Arial,sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; }
.annotation-no-note,.annotation-placement-hint { margin:15px 0; color:var(--ui-muted,var(--muted)); font:12px/1.7 "Segoe UI",Arial,sans-serif; }
.annotation-jump-button { margin-top:8px; padding:9px 12px; border-radius:5px; background:var(--accent-soft); color:var(--ui-strong,var(--accent)); font:12px/1.5 "Segoe UI",Arial,sans-serif; }
.annotation-jump-button:hover { background:var(--surface-hover,var(--line)); }
.annotation-source { color:var(--ui-muted,var(--muted)); font-size:10px; }
.annotation-empty { padding:20px 14px; color:var(--muted); font:14px/1.8 "Segoe UI",Arial,sans-serif; }
.annotation-selection-tools { position:fixed; z-index:110; padding:4px; border:1px solid var(--line); border-radius:9px; background:var(--paper); box-shadow:0 4px 22px var(--shadow-panel); }
.annotation-selection-tools button { min-height:40px; padding:9px 14px; border-radius:5px; background:var(--accent); color:var(--paper); font:600 13px/1.4 "Segoe UI",Arial,sans-serif; white-space:nowrap; }
.annotation-selection-tools button:hover { filter:brightness(.95); }
.annotation-selection-tools button:focus-visible,.annotation-dialog button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.annotation-backup-actions { display:flex; gap:8px; flex-wrap:wrap; padding:0 28px 16px; flex-shrink:0; }
.annotation-secondary-button,.annotation-primary-button,.annotation-delete-button { padding:9px 13px; border:1px solid var(--line); border-radius:6px; color:var(--ui-strong,var(--accent)); background:var(--paper); font:600 12px/1.5 "Segoe UI",Arial,sans-serif; }
.annotation-secondary-button:hover { background:var(--surface-hover,var(--line)); }
.annotation-primary-button { background:var(--accent); color:var(--paper); border-color:var(--accent); }
.annotation-primary-button:hover { filter:brightness(.95); }
.annotation-delete-button { color:#a24141; background:transparent; margin-right:auto; }
.annotation-delete-button:hover { background:#f9eded; }
.annotation-detail>.annotation-secondary-button { margin-right:10px; }
.annotation-editor-form { overflow:auto; overscroll-behavior:contain; padding:0 28px 24px; min-height:0; }
.annotation-editor-form .annotation-quote { max-height:160px; overflow:auto; margin:0 0 20px; font-size:16px; }
.annotation-quote.annotation-underlined { text-decoration:underline; text-decoration-color:var(--annotation-color); text-underline-offset:3px; }
.annotation-colors { display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:0 0 16px; border:0; }
.annotation-colors legend,.annotation-note-label { display:block; margin-bottom:10px; color:var(--ink); font:600 12px/1.6 "Segoe UI",Arial,sans-serif; }
.annotation-color-choice { display:flex; align-items:center; gap:6px; padding:8px 9px; border:1px solid var(--line); border-radius:6px; color:var(--ink); cursor:pointer; font:12px/1.5 "Segoe UI",Arial,sans-serif; }
.annotation-color-choice:has(input:checked) { border-color:var(--annotation-color); background:var(--annotation-fill); }
.annotation-color-choice:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.annotation-color-choice input { margin:0; accent-color:var(--annotation-color); }
.annotation-color-swatch { width:13px; height:13px; border:1px solid var(--annotation-color); background:var(--annotation-fill); border-radius:50%; }
.annotation-color-choice[data-annotation-color="underline"] .annotation-color-swatch { border:0; border-bottom:2px solid var(--accent); border-radius:0; background:transparent; }
.annotation-color-choice[data-annotation-color="underline"]:has(input:checked) { background:var(--surface-soft,var(--accent-soft)); }
#annotation-note-input { display:block; width:100%; resize:vertical; min-height:100px; max-height:35dvh; padding:12px; border:1px solid var(--control-border,var(--line)); border-radius:6px; color:var(--ink); background:var(--surface-raised,var(--paper)); font:15px/1.7 "Segoe UI",Arial,sans-serif; }
#annotation-note-input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.annotation-storage-hint { font:11px/1.7 "Segoe UI",Arial,sans-serif; color:var(--muted); margin:12px 0 18px; }
.annotation-editor-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.annotation-status { flex-shrink:0; margin:0 28px 16px; font:12px/1.7 "Segoe UI",Arial,sans-serif; color:var(--ui-strong,var(--accent)); overflow-wrap:anywhere; }
.annotation-editor-form .annotation-status { margin-inline:0; }
.annotation-error { color:#a24141; }
@media (max-width:1250px) { .annotations-trigger span { display:none; } }
.focus-reading .annotations-trigger span { display:none; }
@media (max-width:760px) {
  .annotations-trigger { padding:8px; }
  .annotation-dialog .dialog-heading { padding:22px 21px 15px; }
  .annotations-summary { padding-inline:21px; }
  .annotation-note-content { padding:0 21px 24px; }
  .annotation-quote { font-size:17px; }
  .annotation-backup-actions { padding-inline:21px; }
  .annotation-editor-form { padding-inline:21px; }
  .annotation-status { margin-inline:21px; }
}
@media (max-width:400px) {
  .has-book-annotations .breadcrumb { max-width:18vw; }
  .has-book-annotations .annotations-trigger { padding-inline:6px; }
}
@media (pointer:coarse) {
  .annotation-dialog .icon-button,.annotation-jump-button { min-height:44px; min-width:44px; }
  .annotation-color-choice,.annotation-secondary-button,.annotation-primary-button,.annotation-delete-button { min-height:44px; }
  .annotation-selection-tools { top:auto!important; left:50%!important; bottom:max(16px,env(safe-area-inset-bottom)); transform:translateX(-50%); }
  .annotation-selection-tools button { min-height:44px; }
  #annotation-note-input { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { :is(.chapter-body,#chapter-title,#chapter-kicker) .annotation-jump { animation:none; } }
@media print {
  .annotations-trigger,.annotation-dialog,.annotation-selection-tools,.annotation-note-indicator::before { display:none!important; }
}
