@media (min-width: 961px) {
    .workspace {
        grid-template-columns:
            minmax(450px, var(--planner-pane-width, 1.02fr))
            23px
            minmax(430px, 0.98fr);
        gap: 0;
    }
    .workspace-resize-handle {
        position: sticky;
        top: calc(var(--nav-height) + 20px);
        align-self: start;
        width: 23px;
        height: min(510px, calc(100vh - var(--nav-height) - 40px));
        min-height: 180px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: col-resize;
        touch-action: none;
    }
    .workspace-resize-handle::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 50%;
        width: 1px;
        background: var(--line);
        transform: translateX(-50%);
        transition: width 150ms ease, background 150ms ease;
    }
    .workspace-resize-handle span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 7px;
        height: 42px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--paper);
        box-shadow: 0 2px 8px #1f29251a;
        transform: translate(-50%, -50%);
        transition: border-color 150ms ease, background 150ms ease;
    }
    .workspace-resize-handle:hover::before,
    .workspace-resize-handle:focus-visible::before,
    body.workspace-resizing .workspace-resize-handle::before {
        width: 3px;
        background: var(--red);
    }
    .workspace-resize-handle:hover span,
    .workspace-resize-handle:focus-visible span,
    body.workspace-resizing .workspace-resize-handle span {
        border-color: var(--red);
        background: #fff;
    }
    .workspace-resize-handle:focus-visible {
        outline: 2px solid var(--red);
        outline-offset: -3px;
        border-radius: 5px;
    }
    body.workspace-resizing {
        cursor: col-resize;
        user-select: none;
    }
}

@media (max-width: 960px) {
    .workspace-resize-handle {
        display: none;
    }
}