/* Quiet Stanza — the finish sheet.
   The stars, the reflection question and its ring, the feedback rows, setting a sitting
   aside, and the digital twin tucked away while the page is reflected on. */

.star-button {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 26px; line-height: 1; color: var(--sheet-edge);
}
.star-button.star-on { color: var(--gold); }
.reflect-question {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink);
}
.reflect-question.reflect-loading {
  font-family: inherit;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-secondary);
}
.reflect-hint { margin: 8px 0 0; }

/* Finish: reflection is for the physical journal — tuck the digital twin away. */
.journal-wrap.journal-aside {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.finish-set-aside { margin-left: auto; color: var(--text-secondary); }
.finish-set-aside:hover { color: var(--wax); }
/* Finish: the question beside a ring that fills over ten seconds once it arrives — a pause
   offered before the stars, which nothing waits on. */
.reflect-block { display: flex; gap: 16px; align-items: flex-start; margin: 6px 0 14px; }
.reflect-body { flex: 1; min-width: 0; }
.reflect-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; margin-top: 2px; }
.reflect-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.reflect-ring circle { fill: none; stroke-width: 3; }
.reflect-ring-track { stroke: var(--sheet-edge); }
.reflect-ring-fill {
  stroke: var(--laurel); stroke-linecap: round;
  stroke-dasharray: 119.4; stroke-dashoffset: 119.4;
  animation: reflect-ring-fill 10s linear 2 forwards;
}
.reflect-ring.is-waiting .reflect-ring-fill, .reflect-ring.is-waiting .reflect-ring-icon { animation: none; }
.reflect-ring-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--laurel);
}
/* The question for the first ten seconds, the pen for the next ten; then the pen in wax. */
.reflect-ring-ask { animation: reflect-ask 20s step-end forwards; }
.reflect-ring-pen { opacity: 0; animation: reflect-pen 20s step-end forwards; }
@keyframes reflect-ring-fill { to { stroke-dashoffset: 0; } }
@keyframes reflect-ask { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes reflect-pen { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; color: var(--wax); } }
.reflect-question { font-size: 22px; line-height: 1.35; margin-top: 2px; }
.finish-feedback { border-top: 1px solid var(--sheet-edge); padding-top: 10px; }
.finish-feedback .option-row + .option-row { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .reflect-ring-fill { animation-duration: .01s; } }
/* The read-back: one quiet button under the question, sat in line with its words. */
.finish-read-back { margin: -4px 0 14px 72px; }
@media (max-width: 520px) { .finish-read-back { margin-left: 0; } }