/* Emphasize a thought unfolding; essential copy is never hidden. */
.criteria-stack {
  position: relative;
  padding: 26px 20px;
  gap: 14px;
  border: 1px solid #c8d1b9;
  border-radius: 16px;
  background: #f6f7f0;
  overflow: hidden;
}
.criteria-stack > * { position: relative; background: #fff; box-shadow: 0 3px 12px #2b312708; }
.criteria-stack > :nth-child(2) { margin-left: 14px; }
.criteria-stack > strong { align-self: flex-end; padding-block: 16px; border-color: #9baa72; }
.motion-replay { display: block; margin: -14px 0 22px auto; padding: 10px 0 10px 16px; min-height: 44px; border: 0; background: none; color: #536047; font: inherit; font-size: 12px; cursor: pointer; }
.motion-replay:focus-visible, .review-track:focus-visible, .review-navigation button:focus-visible { outline: 2px solid #668336; outline-offset: 5px; }
.work-preview { position: relative; box-shadow: 0 14px 40px #29302009; }
.work-preview dl > div { position: relative; padding-inline: 12px; margin-inline: -12px; }
.work-preview dd { width: fit-content; position: relative; z-index: 0; }
.work-preview dd::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 8px; background: #dcee9780; z-index: -1; transform-origin: left; }
.work-preview + .motion-replay { margin-top: 7px; }
.writing-results { position: relative; }
.writing-results li { position: relative; }
.writing-results li > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; padding: 0; border: 1px solid #79866c; border-radius: 50%; }
.story-outcome .motion-replay { color: #dcee97; margin-top: 0; }
.review-provenance { font-size: 13px; color: var(--muted); line-height: 1.8; margin-top: 23px; }
.review-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 30px; padding: 2px 2px 18px; scrollbar-width: thin; scrollbar-color: #a4b38b transparent; }
.reader-quote { flex: 0 0 70%; margin: 0; padding: 26px; border: 1px solid #d5dbcc; border-radius: 12px; background: #f0f2e8; scroll-snap-align: start; display: flex; flex-direction: column; }
.quote-mark { font-family: Georgia, serif; font-size: 64px; color: #859967; height: 48px; line-height: 1; }
.reader-quote blockquote { margin: 12px 0 30px; }
.reader-quote blockquote p { font-size: 24px; font-weight: 600; line-height: 1.65; letter-spacing: -.04em; }
.reader-quote figcaption { margin-top: auto; font-size: 13px; }
.reader-quote figcaption span { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); }
.review-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 3px; }
.review-navigation[hidden] { display: none; }
.review-navigation p { font-size: 11px; color: var(--muted); }
.review-navigation button { border: 1px solid #bbc6ad; border-radius: 50%; background: transparent; width: 44px; height: 44px; cursor: pointer; margin-left: 5px; font-size: 20px; }
.review-navigation button:disabled { opacity: .3; cursor: default; }
.review-bridge { margin-top: 26px; font-size: 17px; line-height: 1.8; }
.review-draft-note { padding: 10px 14px; margin-bottom: 24px; background: #fff1d4; color: #715122; font-size: 12px; border-radius: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .criteria-stack.is-playing > :nth-child(1) { animation: separate-first 1.7s cubic-bezier(.2,.7,.2,1) both; }
  .criteria-stack.is-playing > :nth-child(2) { animation: separate-second 1.7s cubic-bezier(.2,.7,.2,1) both; }
  .criteria-stack.is-playing > strong { animation: find-own 2.3s ease both; }
  .work-preview.is-playing dl > div { animation: follow-row 1.3s ease both; }
  .work-preview.is-playing dl > div:nth-child(2) { animation-delay: .7s; }
  .work-preview.is-playing dl > div:nth-child(3) { animation-delay: 1.4s; }
  .work-preview.is-playing dd::after { animation: draw-answer 1s ease both; }
  .work-preview.is-playing dl > div:nth-child(2) dd::after { animation-delay: .7s; }
  .work-preview.is-playing dl > div:nth-child(3) dd::after { animation-delay: 1.4s; }
  .writing-results.is-playing li > span { animation: connect-step 1.1s ease both; }
  .writing-results.is-playing li:nth-child(2) > span { animation-delay: .65s; }
  .writing-results.is-playing li:nth-child(3) > span { animation-delay: 1.3s; }
  .review-track { scroll-behavior: smooth; }
}
@keyframes separate-first { from { transform: translate(12px,28px) rotate(-4deg); } to { transform: none; } }
@keyframes separate-second { from { transform: translate(-8px,7px) rotate(3deg); } to { transform: none; } }
@keyframes find-own { 0%,20% { transform: translateY(-15px); background: #f0f2e8; } 70% { box-shadow: 0 0 0 8px #dcee9755; } 100% { transform: none; background: #dcee97; box-shadow: 0 3px 12px #2b312708; } }
@keyframes follow-row { 0%,100% { background: transparent; } 40% { background: #eff5dc; } }
@keyframes draw-answer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes connect-step { 0% { background: transparent; } 45% { transform: scale(1.12); background: #dcee97; color: #2b3127; } 100% { transform: none; background: #4b5939; } }
@media (prefers-reduced-motion: reduce) { .motion-replay { display: none; } }
@media (max-width: 760px) {
  .criteria-stack { padding: 24px 14px; }
  .criteria-stack > * { padding-inline: 11px; font-size: 13px; }
  .criteria-stack > :nth-child(2) { margin-left: 8px; }
  .reader-quote { flex-basis: 88%; padding: 24px 21px; }
  .reader-quote blockquote p { font-size: 21px; }
  .writing-results li { gap: 14px; }
}