/*
 * The Vessel wall is fixed foreground chrome, not a scrolling container.
 * Page content keeps the document as its sole scroller and passes beneath
 * this pointer-transparent five-pixel wall and thirty-pixel visual depth.
 */
:root {
  --vessel-wall-size: 5px;
  --vessel-visual-inset: 30px;
}

.vessel-frame.vessel-frame {
  position: fixed;
  z-index: 90;
  inset: 0;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
}

.vessel-frame::before {
  content: "";
  position: absolute;
  inset: var(--vessel-wall-size);
  box-shadow: 0 0 0 var(--vessel-wall-size) color-mix(in srgb, var(--bg) 96%, var(--text));
  pointer-events: none;
}

.vessel-frame::after {
  content: "";
  position: absolute;
  inset: var(--vessel-wall-size);
  border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
  box-shadow:
    inset 0 0 var(--vessel-visual-inset) color-mix(in srgb, var(--bg) 88%, transparent),
    inset 0 0 1px color-mix(in srgb, var(--text) 34%, transparent);
  pointer-events: none;
}

:root[data-theme="light"] .vessel-frame::before {
  box-shadow: 0 0 0 var(--vessel-wall-size) color-mix(in srgb, var(--bg) 94%, var(--text));
}

:root[data-theme="light"] .vessel-frame::after {
  border-color: color-mix(in srgb, var(--text) 24%, transparent);
  box-shadow:
    inset 0 0 var(--vessel-visual-inset) color-mix(in srgb, var(--bg) 82%, transparent),
    inset 0 0 1px color-mix(in srgb, var(--text) 28%, transparent);
}