/* ============================================================================
   Shared map "drag to resize" handle (v1 + v2 + Split View pinned map)
   ============================================================================
   Markup: rfcc_print_resize_handle() in includes/resize-handle.php (or
   rfccResizeHandle.build() in assets/js/rfcc-resize-handle.js).
   Colours only come from the plugin's --rf-* tokens (assets/css/dark-mode.css
   defines light values on :root and dark values for .rf-dark-mode,
   [data-rf-theme="dark"] and prefers-color-scheme), so the handle follows
   light/dark mode with no separate dark rules. The fallbacks are the light
   values, used when dark mode support is switched off (tokens not loaded).

   - Fine pointers (mouse): a slim 20px bar.
   - Touch / narrow screens: a 44px bar (minimum comfortable touch target)
     with 44px-wide step buttons.
   - touch-action:none on the handle only, so dragging it never scrolls the
     page while scrolling anywhere else is untouched. */

.rfcc-resize-handle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0 8px;
    box-sizing: border-box;
    background: var(--rf-bg-secondary, #f5f5f5);
    border-top: 1px solid var(--rf-border-light, #e9ecef);
    border-bottom: 1px solid var(--rf-border-light, #e9ecef);
    cursor: ns-resize;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.rfcc-resize-handle .rfcc-resize-handle-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 0 10px;
    border-radius: 6px;
    color: var(--rf-text-secondary, #6c757d);
    cursor: ns-resize;
    outline: none;
}
.rfcc-resize-handle .rfcc-resize-handle-sep:focus-visible {
    outline: 2px solid var(--rf-accent-primary, #d30b4c);
    outline-offset: -2px;
}

.rfcc-resize-handle .rfcc-resize-handle-grip {
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--rf-text-muted, #adb5bd);
    transition: background-color 0.15s, width 0.15s;
}
.rfcc-resize-handle:hover .rfcc-resize-handle-grip,
.rfcc-resize-handle.is-dragging .rfcc-resize-handle-grip,
.rfcc-resize-handle .rfcc-resize-handle-sep:focus-visible .rfcc-resize-handle-grip {
    width: 48px;
    background: var(--rf-accent-primary, #d30b4c);
}

.rfcc-resize-handle .rfcc-resize-handle-label {
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
    color: var(--rf-text-secondary, #6c757d);
    pointer-events: none;
}

/* Step buttons - the single-tap alternative to dragging. Reset the theme's
   and dark-mode.css's generic button styling (specificity 0,2,0 beats the
   broad `.rf-dark-mode button` rule). */
.rfcc-resize-handle .rfcc-resize-handle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    min-width: 0;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    color: var(--rf-text-secondary, #6c757d);
    font: inherit;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.15s, color 0.15s;
}
.rfcc-resize-handle .rfcc-resize-handle-btn:hover {
    background: var(--rf-bg-hover, #f8f9fa);
    color: var(--rf-text-primary, #212529);
}
.rfcc-resize-handle .rfcc-resize-handle-btn:focus {
    outline: none;
}
.rfcc-resize-handle .rfcc-resize-handle-btn:focus-visible {
    outline: 2px solid var(--rf-accent-primary, #d30b4c);
    outline-offset: -2px;
}
.rfcc-resize-handle .rfcc-resize-handle-btn svg {
    display: block;
    pointer-events: none;
}

/* Touch devices and narrow screens: 44px touch targets. */
@media (pointer: coarse), (max-width: 768px) {
    .rfcc-resize-handle {
        height: 44px;
        gap: 2px;
        padding: 0 4px;
    }
    .rfcc-resize-handle .rfcc-resize-handle-grip {
        width: 44px;
        height: 5px;
        border-radius: 3px;
    }
    .rfcc-resize-handle:hover .rfcc-resize-handle-grip,
    .rfcc-resize-handle.is-dragging .rfcc-resize-handle-grip,
    .rfcc-resize-handle .rfcc-resize-handle-sep:focus-visible .rfcc-resize-handle-grip {
        width: 56px;
    }
    .rfcc-resize-handle .rfcc-resize-handle-label {
        font-size: 12px;
    }
    .rfcc-resize-handle .rfcc-resize-handle-btn {
        width: 44px;
        height: 40px;
        border-radius: 8px;
    }
    .rfcc-resize-handle .rfcc-resize-handle-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* While any handle is being dragged: keep the resize cursor everywhere and
   stop the drag from selecting page text. */
html.rfcc-resize-dragging,
html.rfcc-resize-dragging * {
    cursor: ns-resize !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}