/* Feedback stays inside native cells. Paint hues, glyphs, region edges, native
   motion, focus and Planner outlines remain visible underneath the soft sheen. */
body[data-pip-frame].cf-depth-art .cf-depth-feedback-status {
  display: block;
  min-height: 2.6em;
  margin: var(--cf-depth-gap) 0;
  color: var(--cf-depth-ink);
  font: 600 .8rem/1.3 'Plus Jakarta Sans', system-ui, sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}

body[data-pip-frame].cf-depth-art #card-grid .tile.cf-depth-feedback-pour::after,
body[data-pip-frame].cf-depth-art #card-grid .tile.cf-depth-feedback-undo::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgb(248 243 231 / .18) 48%, rgb(248 243 231 / .09) 54%, transparent 66%) 200% 0 / 300% 100% no-repeat;
  animation: cf-depth-pour-trace 420ms ease-out var(--cf-depth-feedback-delay, 0ms) both;
}

body[data-pip-frame].cf-depth-art #card-grid .tile.cf-depth-feedback-pour.cf-depth-feedback-alt::after {
  animation-name: cf-depth-pour-trace-alt;
}

body[data-pip-frame].cf-depth-art #card-grid .tile.cf-depth-feedback-undo::after {
  border-color: rgb(16 42 54 / .6);
  border-style: dotted;
  animation-name: cf-depth-undo-trace;
}

body[data-pip-frame].cf-depth-art #card-grid .tile.cf-depth-feedback-undo.cf-depth-feedback-alt::after {
  animation-name: cf-depth-undo-trace-alt;
}

body[data-pip-frame].cf-depth-art .ov-card.cf-depth-feedback-clear { position: relative; }
body[data-pip-frame].cf-depth-art .ov-card.cf-depth-feedback-clear::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--cf-depth-edge);
  border-radius: var(--cf-depth-rim);
  pointer-events: none;
  animation: cf-depth-clear-rim 600ms ease-out both;
}

@keyframes cf-depth-pour-trace { from { background-position: 200% 0; } to { background-position: -100% 0; } }
@keyframes cf-depth-pour-trace-alt { from { background-position: 200% 0; } to { background-position: -100% 0; } }
@keyframes cf-depth-undo-trace { from { background-position: -100% 0; opacity: 1; } to { background-position: 200% 0; opacity: 0; } }
@keyframes cf-depth-undo-trace-alt { from { background-position: -100% 0; opacity: 1; } to { background-position: 200% 0; opacity: 0; } }
@keyframes cf-depth-clear-rim { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  body[data-pip-frame].cf-depth-art #card-grid .tile.cf-depth-feedback-pour::after,
  body[data-pip-frame].cf-depth-art #card-grid .tile.cf-depth-feedback-undo::after {
    animation: none;
    background: none;
    border-color: var(--cf-depth-ink);
    opacity: 1;
  }
  body[data-pip-frame].cf-depth-art .ov-card.cf-depth-feedback-clear::after {
    animation: none;
    opacity: 1;
  }
}