/* Reader-authored highlights — palette + popover + pulse-on-jump.
   The palette is intentionally muted so highlighted text stays readable on both light and
   dark themes; the popover uses dark chrome so it stands off the page regardless of theme. */

.hl {
    border-radius: 2px;
    padding: 0 1px;
    cursor: pointer;
    transition: filter 120ms ease-out;
}

.hl:hover { filter: brightness(0.95); }

.hl-yellow { background-color: rgba(255, 230, 100, 0.55); }
.hl-green  { background-color: rgba(140, 220, 140, 0.55); }
.hl-pink   { background-color: rgba(255, 170, 200, 0.55); }
.hl-blue   { background-color: rgba(140, 200, 255, 0.55); }

[data-theme="dark"] .hl-yellow { background-color: rgba(255, 220, 80, 0.35); }
[data-theme="dark"] .hl-green  { background-color: rgba(120, 200, 120, 0.35); }
[data-theme="dark"] .hl-pink   { background-color: rgba(255, 140, 180, 0.35); }
[data-theme="dark"] .hl-blue   { background-color: rgba(120, 180, 255, 0.35); }

@keyframes hl-pulse-anim {
    0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.hl-pulse {
    animation: hl-pulse-anim 1.4s ease-out 1;
}

/* Floating popover — created once per page and positioned above the selection. */
.hl-popover {
    position: absolute;
    z-index: 5000;
    display: none;
    gap: 6px;
    padding: 6px 8px;
    background: #1f2937;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    user-select: none;
}

.hl-swatch {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}

.hl-swatch:hover { transform: scale(1.1); }

.hl-swatch-yellow { background-color: rgb(255, 230, 100); }
.hl-swatch-green  { background-color: rgb(140, 220, 140); }
.hl-swatch-pink   { background-color: rgb(255, 170, 200); }
.hl-swatch-blue   { background-color: rgb(140, 200, 255); }

.hl-remove {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.hl-remove:hover { background: rgba(239, 68, 68, 0.25); border-color: #ef4444; }

/* Visual divider between colour swatches and the Note button in the popover. */
.hl-popover-sep {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.25);
    margin: 0 4px;
    align-self: stretch;
}

.hl-note-trigger {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hl-note-trigger:hover { background: rgba(255, 255, 255, 0.12); }

/* Note-mode popover swaps the row of buttons for a textarea + actions; needs more width. */
.hl-popover.hl-popover--note {
    flex-direction: column;
    align-items: stretch;
    width: 280px;
    gap: 8px;
}

.hl-note-textarea {
    width: 100%;
    min-height: 70px;
    background: #fff;
    color: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
    resize: vertical;
}

.hl-note-textarea:focus { outline: 2px solid #2563eb; outline-offset: 0; }

.hl-note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.hl-note-cancel,
.hl-note-save {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.hl-note-save {
    background-color: #2563eb;
    border-color: #2563eb;
}

.hl-note-save:hover { background-color: #1d4ed8; }
.hl-note-cancel:hover { background-color: rgba(255, 255, 255, 0.12); }

/* Inline note marker — a dotted underline so the text reads normally but signals "I have a note attached". */
.hl-note {
    border-bottom: 2px dotted #2563eb;
    cursor: help;
}

[data-theme="dark"] .hl-note { border-bottom-color: #93c5fd; }