/* Image resize handles: "edge knobs" (the owner's pick, 11 Oct). A round knob on the middle of each side edge, sitting on a
   brand-blue ring round the image, shown on hover or with the image selected; its width in a small badge while dragging.
   Only the look lives here — js/editor/tiptap-image.js draws the same DOM for any look:
   .cadeo-image > figure > .cadeo-image-frame > img + .cadeo-image-handle[data-side=left|right] + .cadeo-image-size;
   the block is .ProseMirror-selectednode when selected, .is-resizing while dragged (the dragged handle .is-active).
   The iOS editor has its own copy (CadeoiOS/CadeoiOS/Editor/editor.css). */
.task-editor-tiptap .cadeo-image-handle {
    position: absolute; top: 50%; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 48px; max-height: 100%;
    transform: translate(-50%, -50%);
    cursor: ew-resize; opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-in-out);
}
.task-editor-tiptap .cadeo-image-handle[data-side="left"] { left: -2px; }
.task-editor-tiptap .cadeo-image-handle[data-side="right"] { left: calc(100% + 2px); }
.task-editor-tiptap .cadeo-image-handle::before {
    content: ''; flex: none; width: 10px; height: 10px; border-radius: var(--radius-circle);
    background: #fff; border: 2px solid var(--accent-blue, #4A90D9);
    box-shadow: 0 1px 3px rgba(26, 26, 46, 0.3);
    transition: transform var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast);
}
.task-editor-tiptap .cadeo-image-handle:hover::before,
.task-editor-tiptap .cadeo-image-handle.is-active::before { transform: scale(1.25); background: var(--accent-blue, #4A90D9); border-color: #fff; }
@media (hover: hover) {
    .task-editor-tiptap .cadeo-image-frame:hover .cadeo-image-handle { opacity: 1; }
    .task-editor-tiptap .cadeo-image-frame:hover > img { outline: 1px solid color-mix(in srgb, var(--accent-blue, #4A90D9) 55%, transparent); outline-offset: 2px; }
}
.task-editor-tiptap .cadeo-image.ProseMirror-selectednode .cadeo-image-handle,
.task-editor-tiptap .cadeo-image.is-resizing .cadeo-image-handle { opacity: 1; }
.task-editor-tiptap .cadeo-image.ProseMirror-selectednode .cadeo-image-frame > img,
.task-editor-tiptap .cadeo-image.is-resizing .cadeo-image-frame > img { outline: 2px solid var(--accent-blue, #4A90D9); outline-offset: 2px; }
.task-editor-tiptap .cadeo-image-size {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    padding: 2px 8px; border-radius: var(--radius-md); background: var(--accent-fill, #357ABD); color: #fff; /* white text: the fill blue (4.5:1) */
    font-family: 'Avenir Next', -apple-system, sans-serif; font-size: var(--font-size-12); font-weight: 600; line-height: 18px; font-variant-numeric: tabular-nums;
    pointer-events: none; opacity: 0;
}
.task-editor-tiptap .cadeo-image.is-resizing .cadeo-image-size { opacity: 1; }
@media (pointer: coarse) { .task-editor-tiptap .cadeo-image-handle { width: 44px; } }
@media (prefers-reduced-motion: reduce) { .task-editor-tiptap .cadeo-image-handle, .task-editor-tiptap .cadeo-image-handle::before { transition: none; } }