/* Same paper, typography and pointer as the module-title help. */
body[data-chapter-canvas-refresh] .wip-draw-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0 0 0 6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  vertical-align: middle;
  cursor: pointer;
  opacity: .72;
}
body[data-chapter-canvas-refresh] .wip-draw-trigger::before { content: ''; position: absolute; inset: -10px; }
body[data-chapter-canvas-refresh] .wip-draw-trigger svg { display: block; width: 18px; height: 18px; }
body[data-chapter-canvas-refresh] .wip-draw-trigger:is(:hover, :focus-visible, [aria-expanded="true"]) { opacity: 1; }
body[data-chapter-canvas-refresh] .wip-draw-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
body[data-chapter-canvas-refresh] :is(.live-draw-deadline,.wip-live-deadline,.wip-trail-live-deadline) { display: flex; align-items: center; column-gap: 0; }
body[data-chapter-canvas-refresh] .wip-draw-popover {
  --draw-edge: color-mix(in srgb, currentColor 28%, var(--draw-fill));
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  display: flex;
  border: 1px solid var(--draw-edge);
  border-radius: 12px;
  background: var(--draw-fill);
  box-shadow: 0 5px 16px #0003;
  font: 400 14px/1.45 var(--pluritual-sans,Arial,sans-serif);
  letter-spacing: normal;
  text-align: left;
  white-space: normal;
  user-select: text;
}
body[data-chapter-canvas-refresh] .wip-draw-popover[hidden] { display: none; }
.wip-draw-popover::before {
  content: ''; position: absolute; top: -1px; left: var(--draw-tip-x);
  width: 9px; height: 9px; box-sizing: border-box;
  transform: translate(-50%,-50%) rotate(45deg);
  border-top: 1px solid var(--draw-edge); border-left: 1px solid var(--draw-edge);
  background: var(--draw-fill);
}
.wip-draw-popover[data-side="above"]::before { top: auto; bottom: -1px; transform: translate(-50%,50%) rotate(225deg); }
.wip-draw-content { min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; scrollbar-width: thin; }
.wip-draw-popover h3 { margin: 0 0 6px; font: 400 21px/1.15 var(--pluritual-serif,Georgia,serif); text-align: center; }
.wip-draw-popover p { margin: 0; }
.wip-draw-lead { text-align: center; }
.wip-draw-sections { display: grid; gap: 12px; margin: 16px 0; }
.wip-draw-popover h4 { margin: 0 0 3px; font: 600 13px/1.4 var(--pluritual-sans,Arial,sans-serif); color: inherit; }
.wip-draw-popover details { border-top: 1px solid var(--draw-edge); padding-top: 10px; }
.wip-draw-popover summary { cursor: pointer; font-size: 12px; }
.wip-draw-popover details p { margin-top: 8px; font-size: 12px; }
.wip-draw-popover .wip-draw-foot { margin-top: 12px; font-size: 12px; opacity: .8; }