/* Opening cards: unfold the same sheet of paper instead of opening a tooltip.
   Desktop card artwork is baked into the approved master. Keep all four card
   coordinates fixed and reserve a real reading row below them. On phones, the
   independent paper cards can open directly into the normal document flow. */
.paper-opening .opening-problems {
  position:relative;
  align-items:start;
}
.paper-opening .opening-problems:has(.opening-problem[open]) {
  padding-bottom:var(--opening-detail-space,164px);
}
.paper-opening .opening-problem {
  z-index:auto;
}
.paper-opening .opening-problem[open] {
  z-index:3;
}
.paper-opening .opening-problem > summary {
  outline-offset:6px;
}
.paper-opening .opening-detail-mark {
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .2s;
}
.paper-opening .opening-problem[open] .opening-detail-mark {
  opacity:1;
  transform:rotate(45deg);
}
.paper-opening .opening-detail {
  --opening-fold:19px;
  position:absolute;
  top:var(--opening-detail-top,calc(29.2cqw + 24px));
  left:var(--opening-detail-left,0px);
  width:var(--opening-detail-width,78.9cqw);
  max-width:none;
  padding:30px 44px 32px;
  margin:0;
  border:0;
  border-radius:0;
  color:#292b27;
  background:none;
  box-shadow:none;
  isolation:isolate;
  z-index:2;
  transform-origin:50% 0;
  filter:drop-shadow(0 10px 12px #00000024);
}
.paper-opening .opening-problem:nth-child(even) .opening-detail {
  left:var(--opening-detail-left,-41.325cqw);
}
.paper-opening .opening-problem:nth-child(n+3) .opening-detail {
  top:var(--opening-detail-top,calc(13.2cqw + 24px));
}
.paper-opening .opening-detail:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,#0000000b 0,transparent 16px),
    linear-gradient(#ffffff80,#ffffff80),
    var(--sheet);
  background-color:#f8f8f5;
  background-size:auto,auto,640px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--opening-fold)),calc(100% - var(--opening-fold)) 100%,0 100%);
}
.paper-opening .opening-detail:after {
  content:'';
  position:absolute;
  right:0;
  bottom:0;
  width:var(--opening-fold);
  height:var(--opening-fold);
  background:linear-gradient(135deg,#bdbeb7,#f1f1eb 62%,#fff);
  clip-path:polygon(0 0,100% 0,0 100%);
  filter:drop-shadow(-1px -1px 1px #00000017);
  pointer-events:none;
}
.paper-opening .opening-detail p {
  max-width:65ch;
  margin:0 auto;
  font-size:clamp(13px,1.2cqw,17px);
  line-height:1.95;
  letter-spacing:.015em;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
@media(prefers-reduced-motion:no-preference) {
  .paper-opening .opening-problem[open] > .opening-detail {
    animation:opening-paper-unfold .42s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes opening-paper-unfold {
    from {
      opacity:0;
      transform:perspective(950px) rotateX(-12deg) translateY(-7px);
      clip-path:inset(0 0 68% 0);
    }
    to {
      opacity:1;
      transform:perspective(950px) rotateX(0deg) translateY(0);
      clip-path:inset(0 0 -30px 0);
    }
  }
}
/* Match the approved opening's own 639px breakpoint, not the lower LP's. */
@media(max-width:639px) {
  .paper-opening .opening-problems:has(.opening-problem[open]) {
    padding-bottom:0;
  }
  .paper-opening .opening-problem {
    height:auto;
    min-height:112px;
  }
  .paper-opening .opening-problem > summary {
    height:112px;
    z-index:2;
  }
  .paper-opening .opening-problem .opening-detail,
  .paper-opening .opening-problem:nth-child(even) .opening-detail,
  .paper-opening .opening-problem:nth-child(n+3) .opening-detail {
    --opening-fold:16px;
    position:relative;
    top:auto;
    left:auto;
    width:calc(100% - 12px);
    margin:-4px 6px 12px;
    padding:28px 25px 26px;
    filter:drop-shadow(0 8px 10px #00000021);
  }
  .paper-opening .opening-detail:before {
    background:
      linear-gradient(180deg,#00000013 0,transparent 18px),
      linear-gradient(#ffffff80,#ffffff80),
      var(--sheet);
    background-color:#f8f8f5;
    background-size:auto,auto,640px;
  }
  .paper-opening .opening-detail p {
    font-size:13px;
    line-height:1.95;
    letter-spacing:0;
  }
}
@media(max-width:359px) {
  .paper-opening .opening-problem .opening-detail {
    padding-inline:22px;
  }
  .paper-opening .opening-detail p {
    font-size:12px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .paper-opening .opening-detail,
  .paper-opening .opening-detail-mark {
    animation:none;
    transition:none;
    transform:none;
  }
  .paper-opening .opening-problem[open] .opening-detail-mark {
    transform:rotate(45deg);
  }
}