/* Faint still paper under the prose; the broad outer halo breathes gently. */

body[data-view] .app-container .content-area {
  isolation: isolate;
  background: var(--weave-color-canvas);
}

body[data-view] .app-container .content-area::before,
body[data-view] .app-container .content-area::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url('/ui/assets/materials/dither-a.svg') repeat;
  background-size: 768px 768px;
  opacity: .055;
}

body[data-view] .app-container .content-area::after {
  background-image: url('/ui/assets/materials/dither-b.svg');
  opacity: .10;
  mask-image: linear-gradient(to right, #000, transparent 24%, transparent 76%, #000);
  -webkit-mask-image: linear-gradient(to right, #000, transparent 24%, transparent 76%, #000);
}

@media (prefers-reduced-motion: no-preference) {
  body[data-view] .app-container .content-area::after {
    animation: weave-paper-breathe 24s ease-in-out infinite;
  }
}
@keyframes weave-paper-breathe {
  0%, 100% { opacity: .165; }
  50% { opacity: .06; }
}

@media print, (forced-colors: active) {
  body[data-view] .app-container .content-area::before,
  body[data-view] .app-container .content-area::after { display: none; animation: none; }
  body[data-view] .app-container .content-area,
  .app-container .top-bar { background: Canvas; }
}

@media print {
  body[data-view] .app-container .content-area { background: #fff; }
}