fix(reader): highlight color picker + window-aware note popover under CSP build

- Highlight color dots carried a nested-ternary + comma-sequence
  expression that the CSP-safe Alpine evaluator cannot parse — the
  buttons were dead. Logic moved to pickHighlightColor(color): sets
  the color, saves changes for edit-mode, creates the highlight for
  create-mode.
- The selection popover (and its note area) rendered above the
  selection anchor with a fixed size, so on small windows or
  top-of-page selections it escaped the viewport. Placement is now
  window-aware: show-time clamping via estimated popover size, and a
  measure-and-shift pass when the note area widens the popover (the
  post-open adjustment runs well after the enter transition; mutating
  during it is what breaks compositor hit-testing).

templates/reader.templ

@@ -135,13 +135,7 @@ templ Reader(user User, metadata ReaderMetadata) {
 							:style="'background-color:' + c"
 							:title="selectionPopover.mode === 'create' ? 'Highlight' : 'Set color'"
 							:aria-label="'Highlight color ' + c"
-							@click="selectionPopover.noteOpen
-							? (selectionPopover.mode === 'create'
-								? (selectionPopover.color = c)
-								: (selectionPopover.color = c, saveHighlightChanges(true)))
-							: (selectionPopover.mode === 'create'
-								? createHighlight(c)
-								: (selectionPopover.color = c, saveHighlightChanges()))"
+							@click="pickHighlightColor(c)"
 						></button>
 					</template>
 					<div class="w-px h-5 reader-sep"></div>
@@ -149,7 +143,7 @@ templ Reader(user User, metadata ReaderMetadata) {
 						type="button"
 						class="reader-popover-btn"
 						title="Note"
-						@click="selectionPopover.noteOpen = true"
+						@click="openSelectionNote()"
 					>
 						<svg class="reader-icon" width="16" height="16" aria-hidden="true"><path d="M 4 13 L 4 16 L 7 16 L 14.5 8.5 L 11.5 5.5 L 4 13 M 12.5 4.5 L 15.5 7.5"></path></svg>
 					</button>