.scratch-surface {
  position: relative;
  isolation: isolate;
}
.scratch-content { display: contents; }
.scratch-coating {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: #6b6b6b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.scratch-coating.scratch-ready { background: transparent; }
.scratch-coating[hidden] { display: none; }
.scratch-coating:focus-visible { outline: 3px solid #0891b2; outline-offset: 4px; }
@media (forced-colors: active) {
  .scratch-coating { forced-color-adjust: none; }
  .scratch-coating:focus-visible { outline-color: Highlight; }
}

/* Keep all other result surfaces concealed while the user scratches the draw. */
.peek-shield { position: relative; }
.peek-cover { position: absolute; inset: 0; z-index: 5; display: grid; place-items: start center; border-radius: 12px; background: #f5f7fa; color: var(--muted); padding: 28px 16px; text-align: center; }
.peek-cover[hidden] { display: none; }
.peek-cover span { display: grid; gap: 8px; font-size: 12px; }
.peek-cover b { color: var(--ink); font-size: 14px; font-weight: 600; }
.peek-cover small { font-size: 11px; line-height: 1.8; }
.is-concealed > .peek-content { visibility: hidden; }
.summary-shield .peek-cover { align-items: center; padding: 16px; border: 1px solid var(--line); }
.panel-shield .peek-cover { border: 1px solid var(--line); min-height: 200px; }