/* Reflection cards beside the writing. */
.margin-reflection { width:min(100%,22rem);margin:40px auto 48px;perspective:900px; }
.reflection-card { --note-colour:#f0e5ef;color:var(--ink); }
.margin-reflection--left .reflection-card { --note-colour:#e7ebf3; }
.margin-reflection--last .reflection-card { --note-colour:#f4e6df; }
.reflection-card summary { list-style:none;cursor:pointer;touch-action:manipulation; }
.reflection-card summary::-webkit-details-marker { display:none; }
.reflection-face { min-height:13rem;padding:24px;background:var(--note-colour);border:1px solid var(--rule-dark);border-radius:3px;box-shadow:3px 6px 0 rgba(61,35,55,.06);animation:reflection-turn .4s var(--ease) both;backface-visibility:hidden; }
.reflection-front { display:flex;flex-direction:column;justify-content:space-between;gap:20px; }
.reflection-back { display:none; }
.reflection-card[open] .reflection-front { display:none; }
.reflection-card[open] .reflection-back { display:flex;flex-direction:column;justify-content:space-between;gap:20px; }
.reflection-number,.reflection-action { display:block;font:400 14px/1.5 var(--body); }
.reflection-title { display:block;font:400 27px/1.15 var(--display);letter-spacing:-.02em; }
.reflection-question { display:block;font:400 21px/1.4 var(--display); }
.reflection-action { text-decoration:underline;text-underline-offset:4px; }
@keyframes reflection-turn { from { opacity:.3;transform:rotateY(-75deg); } to { opacity:1;transform:rotateY(0); } }
@media (min-width:84rem) {
  .margin-reflection { position:relative;width:100%;height:0;margin:0; }
  .margin-reflection .reflection-card { position:absolute;top:0;left:calc(100% + 36px);width:216px;transform:rotate(2deg); }
  .margin-reflection--left .reflection-card { left:auto;right:calc(100% + 36px);transform:rotate(-2deg); }
  .margin-reflection--last .reflection-card { transform:rotate(-1deg); }
}
@media (prefers-reduced-motion:reduce) {
  .reflection-face { animation:none; }
}
@media print {
  .margin-reflection { position:static;width:100%;height:auto;margin:24px 0;break-inside:avoid; }
  .margin-reflection .reflection-card { position:static;width:100%;transform:none; }
  .reflection-card .reflection-front { display:none; }
  .reflection-card .reflection-back { display:block;box-shadow:none; }
  .reflection-action { display:none; }
}