.panel-resizer {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 48px;
  transform: translateY(-50%);
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
}
.panel-resizer::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 36px;
  background: rgba(0,0,0,0.18);
  border-radius: 2px;
  pointer-events: none;
}
#outline-panel .panel-resizer,
#draft-panel .panel-resizer { cursor: ew-resize; }

body[data-layout="B"] #draft-panel .panel-resizer   { display: flex; left: 0; }
body[data-layout="D"] #draft-panel .panel-resizer   { display: flex; right: 0; }
body[data-layout="D"] #outline-panel .panel-resizer { display: flex; left: 0; }
body[data-layout="E"] #outline-panel .panel-resizer { display: flex; left: 0; }
body[data-layout="F"] #draft-panel .panel-resizer   { display: flex; right: 0; }


body[data-layout="A"] #draft-panel {
  left: calc(100% - var(--peek-border));
  border-left-width: var(--peek-border);
  border-radius: 0;
  box-shadow: -3px 0 10px var(--panel-peek-shadow);
  cursor: grab;
}
body[data-layout="A"] #draft-panel:active { cursor: grabbing; }

@keyframes draft-strip-flash {
  0%, 100% { border-left-color: var(--panel-peek-color); box-shadow: -3px 0 10px var(--panel-peek-shadow); }
  50% {
    border-left-color: #f8b4b4;
    box-shadow: -3px 0 12px rgba(224,92,92,0.40);
  }
}
body[data-layout="A"] #draft-panel.strip-flash {
  animation: draft-strip-flash 1s ease-in-out;
}
body[data-layout="A"] #outline-panel {
  left: 100%; border-radius: 0; box-shadow: none;
}

body[data-layout="B"] #draft-panel {
  left: calc(100% - var(--draft-w) - var(--panel-side-gap));
  border-radius: 0; z-index: 22;
  box-shadow: 0 2px 5px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.16);
}
body[data-layout="B"] #outline-panel {
  left: calc(100% - var(--draft-w) - var(--panel-side-gap) + 6px);
  margin-top: calc(var(--panel-top-gap) + 6px);
  margin-bottom: calc(var(--panel-bot-gap) - 6px);
  border-radius: 0; z-index: 19;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22), 0 1px 1px rgba(0,0,0,0.10);
  pointer-events: none;
}

body[data-layout="C"] #draft-panel {
  left: 16%; width: 44%;
  border-radius: 0; border: var(--panel-border-w) solid var(--panel-border-color);
  box-shadow: var(--panel-float-shadow);
  z-index: 22;
}
body[data-layout="C"] #outline-panel {
  left: 62%; width: 22%;
  border-radius: 0; border: var(--panel-border-w) solid var(--panel-border-color);
  box-shadow: var(--panel-float-shadow);
}

body[data-layout="D"] #draft-panel {
  left: var(--panel-side-gap); width: var(--draft-w);
  border-radius: 0;
  border: var(--panel-border-w) solid var(--panel-border-color);
}
body[data-layout="D"] #outline-panel {
  left: calc(100% - var(--outline-w) - var(--panel-side-gap)); width: var(--outline-w);
  border-radius: 0;
  border: var(--panel-border-w) solid var(--panel-border-color);
}

body[data-layout="E"] #draft-panel {
  left: calc(-1 * var(--draft-w) + var(--peek-border));
  width: var(--draft-w);
  border-right-width: var(--peek-border);
  border-radius: 0;
  box-shadow: 3px 0 10px var(--panel-peek-shadow);
  cursor: grab;
}
body[data-layout="E"] #draft-panel:active { cursor: grabbing; }
body[data-layout="E"] #outline-panel {
  left: calc(100% - var(--outline-w) - var(--panel-side-gap));
  border-radius: 0;
  border: var(--panel-border-w) solid var(--panel-border-color);
}

body[data-layout="F"] #draft-panel {
  left: var(--panel-side-gap); width: var(--draft-w);
  border-radius: 0;
  border: var(--panel-border-w) solid var(--panel-border-color);
}
body[data-layout="F"] #outline-panel {
  left: calc(100% - var(--peek-border));
  border-left-width: var(--peek-border);
  border-radius: 0;
  box-shadow: -3px 0 10px var(--panel-peek-shadow);
  cursor: grab;
}
body[data-layout="F"] #outline-panel:active { cursor: grabbing; }

body[data-layout="G"] #draft-panel {
  left: calc(-1 * var(--draft-w) + var(--peek-border));
  border-right-width: var(--peek-border);
  border-radius: 0;
  box-shadow: 3px 0 10px var(--panel-peek-shadow);
  cursor: grab;
}
body[data-layout="G"] #draft-panel:active { cursor: grabbing; }
body[data-layout="G"] #outline-panel {
  left: calc(100% - var(--peek-border));
  border-left-width: var(--peek-border);
  border-radius: 0;
  box-shadow: -3px 0 10px var(--panel-peek-shadow);
  cursor: grab;
}
body[data-layout="G"] #outline-panel:active { cursor: grabbing; }