/* Blank stock is public. Exhibit pictures come only from the board projection or the player's notebook. */
.ag-opening-mark {
  position:absolute; top:17%; left:16%; width:28%; height:36%;
  transform:rotate(-11deg); fill:none; stroke:#56372d; stroke-width:1.4; opacity:.77;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
.ag-opening-mark ellipse { stroke-width:.95; stroke-dasharray:56 1 13 2 31 1; }
.ag-has-image .ag-opening-mark { display:none; }
.ag-exhibits .ag-evidence {
  --stock: url('./exhibit-stock-v1.webp');
  --stock-corner: 0% 0%;
  --edge-cut: polygon(
    0.5% 0.8%, 30% 0.3%, 69% 0.8%, 98.7% 0.1%, 99.8% 1.8%,
    99.4% 38%, 100% 73%, 99.5% 99.6%, 76% 99.1%, 53% 99.8%,
    28% 99.1%, 2.1% 100%, 0.3% 98.2%, 0.8% 71%, 0% 36%
  );
  --mount-shadow: 3px 7px 4px #120d0bb0;
  background: transparent !important;
  box-shadow: none;
  filter: drop-shadow(0 1px 0 #483c2f) drop-shadow(0 2px 1px #130e0cb0) drop-shadow(var(--mount-shadow));
}
.ag-exhibits .ag-evidence::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ddcfb3 var(--stock) var(--stock-corner) / 200% 200% no-repeat;
  clip-path: var(--edge-cut);
}
.ag-exhibits .ag-evidence::after {
  border: 0;
  clip-path: var(--edge-cut);
  background: linear-gradient(124deg, #fffff51a 0%, transparent 21% 86%, #52312022 99%);
  box-shadow: inset 1px 1px 1px #fcf5dc7a, inset -1px -1px 2px #463b3450;
}
.ag-exhibits .ag-caption {
  bottom: 10px;
  left: 12px;
  right: 12px;
  padding: 7px 6px;
  background: transparent;
}
.ag-exhibits .ag-index {
  padding: 3px 6px;
  color: #29251f;
  background: #ebe5d8 var(--stock) 4% 95% / 340% 340%;
  box-shadow: 0 1px 1px #41352770;
  transform: rotate(-2deg);
}
.ag-exhibits .ag-type {
  color: #543f30;
  font-size: 12px;
  letter-spacing: 0.12em;
}
.ag-exhibits .ag-type:lang(ar) { letter-spacing: 0; }
.ag-exhibits .ag-card-title { color: #30241d; text-wrap: balance; }
.ag-exhibits :is(.ag-evidence-document, .ag-evidence-slip, .ag-evidence-trace):not(.ag-has-image) .ag-sleeve {
  background: transparent;
  border: 0;
}
.ag-exhibits .ag-evidence-document:not(.ag-has-image) .ag-sleeve::before,
.ag-exhibits .ag-evidence-document:not(.ag-has-image) .ag-sleeve::after { content: none; }
.ag-exhibits .ag-evidence-document:nth-child(3n + 2) {
  --stock-corner: 0% 100%;
  --mount-shadow: 2px 5px 3px #120d0bad;
}
.ag-exhibits .ag-evidence-document:nth-child(3n + 1)::after {
  /* Light grazes a corner lifted away from the wall. */
  background: linear-gradient(146deg, transparent 72%, #553d1a15 86%, #fffee040 98%);
}
.ag-exhibits .ag-evidence-slip {
  --stock-corner: 0% 100%;
  --edge-cut: polygon(
    7% 0.6%, 26% 1.2%, 47% 0%, 63% 0.7%, 91% 0.2%, 93% 2%,
    92.4% 34%, 93% 64%, 92.5% 98.4%, 90.2% 99.8%, 88.1% 98.5%,
    84.6% 99.9%, 82% 98.6%, 78.5% 100%, 75.6% 99%, 72.4% 99.9%,
    69% 98.5%, 65.9% 99.8%, 63% 98.8%, 60% 99.9%, 56.7% 98.6%,
    53% 99.7%, 49.5% 98.6%, 46% 100%, 43% 98.6%, 39.6% 99.9%,
    36.4% 98.5%, 33% 99.6%, 30% 98.5%, 26.6% 99.9%, 23.4% 98.5%,
    20% 99.8%, 17% 98.7%, 13.6% 99.8%, 10% 98.5%, 6% 99.2%,
    6.3% 57%, 5.6% 32%
  );
}
.ag-exhibits .ag-evidence-slip .ag-index { left: 12%; }
.ag-exhibits .ag-evidence-slip .ag-caption { inset-inline: 10%; }
.ag-exhibits .ag-evidence-trace {
  --stock-corner: 100% 100%;
  --edge-cut: polygon(0.4% 2%, 97.7% 0, 99.9% 1.3%, 100% 98.5%, 0.6% 100%);
}
.ag-exhibits .ag-evidence-trace .ag-caption,
.ag-exhibits .ag-evidence-tape .ag-caption {
  inset-inline: 6% 5%;
  bottom: 7%;
  padding: 6px 10px;
  background: #e0d5bd var(--stock) 7% 94% / 290% 360%;
  box-shadow: 0 1px 1px #3e352c65;
  transform: rotate(-1.2deg);
}
.ag-exhibits .ag-evidence-photo { --stock-corner: 100% 0%; }
/* The server's deliberately low-detail preview is a small contact print on its
   own envelope. Opening the evidence allows a larger print from the notebook. */
.ag-exhibits .ag-evidence-photo:not(.ag-has-image) .ag-sleeve { display: none; }
.ag-exhibits .ag-evidence-photo.ag-has-image:not(.ag-read) .ag-sleeve {
  inset: 12% 8% auto auto;
  width: 34%;
  height: 37%;
  border: 4px solid #e8e0cd;
  border-bottom-width: 9px;
  transform: rotate(-4deg);
  box-shadow: 1px 2px 1px #493825b0, 2px 4px 4px #392c204f;
}
.ag-exhibits .ag-evidence-photo.ag-has-image:not(.ag-read) .ag-sleeve::after {
  content: '';
  position: absolute;
  width: 47%;
  height: 10px;
  top: -8px;
  left: 31%;
  transform: rotate(3deg);
  background: linear-gradient(170deg, #f4e6b68a, #ad975d60 65%, #d7c8a77d);
  border-block: 1px solid #c2b68b5f;
}
.ag-exhibits .ag-evidence-photo:not(.ag-read) .ag-caption {
  inset-inline: 4% 3%;
  bottom: 6%;
  padding: 5px 8px;
  transform: rotate(0.6deg);
}
.ag-exhibits .ag-evidence-photo.ag-read.ag-has-image {
  --stock-corner: 0% 0%;
}
.ag-exhibits .ag-evidence-photo.ag-read.ag-has-image .ag-sleeve {
  inset: 7px 9px 64px;
  border: 1px solid #362b23;
  box-shadow: inset 0 0 0 1px #b7b3ab73;
}
.ag-exhibits .ag-evidence.ag-has-image:not(.ag-evidence-photo, .ag-evidence-tape) .ag-sleeve {
  inset: 10px 16px 65px;
  border: 1px solid #6d645b75;
}
.ag-exhibits .ag-evidence-tape::before,
.ag-exhibits .ag-evidence-tape::after { content: none; }
.ag-exhibits .ag-evidence-tape .ag-sleeve {
  position: absolute;
  inset: 0 2% 15%;
  border: 0;
  border-radius: 0;
  /* Crop the already-public physical cassette photograph to its shell. */
  background: url('/assets/peonies-identity/hub/gray-area-cassette-480-v1.webp') 51.5% 25% / 146% 212% no-repeat !important;
  clip-path: polygon(0.2% 12.4%, 1.5% 9.8%, 91.7% 0.5%, 94.2% 2.5%, 99.4% 87%, 98.3% 90%, 7% 99.2%, 5% 97%);
}
.ag-exhibits .ag-evidence-tape .ag-index { top: 17%; left: 8%; }
.ag-exhibits .ag-evidence-tape .ag-caption { bottom: 0; }

/* The loose edge of the little contact print can lift at its tape hinge.
   Its evidence envelope, tacks and the string tying them together stay put. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-effects='off']) .ag-exhibits .ag-evidence-photo.ag-has-image:not(.ag-read) .ag-sleeve {
    transform-origin: 52% 3%;
    transform: perspective(400px) rotate(-4deg) rotateX(var(--print-pitch, 0deg));
    box-shadow: 1px 2px 1px #493825ae, 2px var(--print-height, 4px) var(--print-penumbra, 4px) #291d15a6;
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
  }
  .ag-viewport:not(.ag-dragging) .ag-evidence:focus-visible {
    --print-pitch: -9deg;
    --print-height: 8px;
    --print-penumbra: 6px;
  }
}
@media (any-hover: hover) and (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ag-viewport[data-input='mouse']:not(.ag-dragging) .ag-evidence:hover {
    --print-pitch: -9deg;
    --print-height: 8px;
    --print-penumbra: 6px;
  }
}