/* THE FRAME OF THE THREE EDITORS (view/js/vk_eframe.js): a charcoal background with soft diagonal light streaks, one black notched panel (.vkf-panel) for the working area, the side panels on the charcoal beside it.
   Margins (his order, 2026-10-29): narrow - 20 px - on the LEFT of the panel; on the right only while the side panel is popped out into a window of its own (docked, the right side is the side panel's area). */
.vkf-root, .vkv.vkf-root{ --vkf-margin: 20px; background-color: #212121;
    background-image: linear-gradient(104deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.028) 34%, rgba(255,255,255,0) 48%), linear-gradient(158deg, rgba(255,255,255,0) 46%, rgba(255,255,255,.04) 62%, rgba(255,255,255,0) 78%),
        radial-gradient(ellipse 34vw 9vh at 86% 63%, rgba(255,255,255,.07), rgba(255,255,255,0)), radial-gradient(ellipse 22vw 7vh at 24% 99%, rgba(255,255,255,.08), rgba(255,255,255,0)); }
.vkf-panel{ position: relative; background: #000; }
.vkf-svg{ position: absolute; left: 0; top: 0; pointer-events: none; z-index: 60; }
.vkf-grip{ position: absolute; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 70; touch-action: none; display: flex; justify-content: center; }
.vkf-popped > .vkf-grip{ right: 0 !important; width: 12px; }
.vkf-grip > i{ width: 2px; height: 100%; background: transparent; border-radius: 2px; transition: background .12s; }
.vkf-grip:hover > i, .vkf-grip.is-drag > i{ background: transparent; }          /* his orders, 2026-10-30 and 2026-10-31 (IB A1): the long line from one end of the panel to the other never shows, on hover or while dragged - the edge stays draggable, unseen; the lit notch (below) is the grip */
.vkf-veil{ position: fixed; inset: 0; z-index: 99999; cursor: col-resize; background: transparent; }

/* THE NOTCHES ARE THE GRIPS (view/js/vk_eframe.js F.notches): over each notch of the outline, col-resize on a side one, row-resize on the bottom one; the notch's own outline lights on hover and while dragging */
.vkf-notch{ position: absolute; z-index: 60; touch-action: none; }
.vkf-notch-left, .vkf-notch-right{ cursor: col-resize; }
.vkf-notch-bottom{ cursor: row-resize; }
.vkf-notch svg{ position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; transition: filter .12s; }
.vkf-notch path{ fill: none; stroke: transparent; stroke-width: 2px; transition: stroke .12s; }
.vkf-notch:hover path, .vkf-notch.is-drag path{ stroke: var(--ve-accent, #25d79f); }
/* the lit edge keeps the notch's length and fades to nothing at both tips, the way the underline of the editor switch does (view/css/vk_eshell.css .vks-glow: the same stops): a side notch fades top and bottom, the bottom one left and right */
.vkf-notch svg{ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); }
.vkf-notch-bottom svg{ -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); }
.vkf-notch:hover svg, .vkf-notch.is-drag svg{ filter: drop-shadow(0 0 4px rgba(37, 215, 159, .8)); }
.vkf-popped .vkf-notch-right{ display: none; }