/*!
 * ScoutMagic — Copyright (C) 2026 Xavier Dubois and contributors
 * Licensed under AGPL-3.0-or-later. See LICENSE and NOTICE.
 */

.editable-content,
.editable-image {
    position: relative;
    transition: outline 0.15s;
}
/* The "Modifier" overlay button is absolutely positioned, so it never
   contributes to this box's height — without a floor, short/empty
   editable text collapses to near-zero height and becomes almost
   impossible to hover to reveal the button at all. */
.editable-content {
    min-height: 2.25rem;
}
.editable-content:hover,
.editable-image:hover {
    outline: 2px dashed var(--bs-primary);
    outline-offset: 4px;
}
.editable-overlay {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.15s;
}
.editable-content:hover .editable-overlay,
.editable-image:hover .editable-overlay {
    opacity: 1;
}
/* Touch devices: no hover — make overlays always visible and ensure
   the edit button meets the 44px minimum touch target. */
@media (pointer: coarse) {
    .editable-overlay {
        opacity: 1;
    }
    .editable-overlay .btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}