/* PaperGrade evidence scene: a fictional student answer whose exact excerpts
   connect to selectable rubric criteria and illustrative score proposals.
   Consumes only the shared scene roles, scene palette tokens, and interaction
   states defined in site.css; geometry below is scene-local. */

.pg-scene {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: 50rem;
  padding: var(--s3);
  background: var(--scene-sheet);
  border: var(--rule) solid var(--scene-line);
  border-radius: var(--radius);
  box-shadow: var(--s1) var(--s1) 0 var(--scene-bg);
}

.pg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
}

/* Document half: the primary evidence stays in view while criteria are judged.
   Stretch keeps the rail's rule a full-height column divider. */
.pg-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s3);
}

.pg-doc { min-width: 0; }

.pg-doc-label {
  font-size: var(--fine);
  font-weight: 600;
  color: var(--scene-muted);
  margin-bottom: var(--s1);
}

.pg-question {
  font: 400 var(--document-size)/1.25 var(--display);
  color: var(--scene-ink);
  max-width: 22ch;
  padding-bottom: var(--s2);
  border-bottom: var(--rule) solid var(--scene-line);
}

.pg-answer { margin: var(--s2) 0 0; }

.pg-answer p {
  font: 400 var(--body-large)/1.8 var(--display);
  color: var(--scene-ink);
  max-width: 46ch;
}

/* Excerpts are the evidence under judgment: quiet until their criterion is
   selected, then filled with the shared selection colors. Horizontal padding
   stays on each cloned line so wrapped highlights keep an inset. */
.pg-excerpt {
  background: none;
  color: inherit;
  padding: .08em .18em;
  border-bottom: var(--rule) dotted var(--scene-muted);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.pg-excerpt.is-active {
  background-color: var(--scene-selection-bg);
  color: var(--scene-selection-ink);
  border-bottom-color: transparent;
}

/* Criteria rail: choices above, the active criterion's proposal below. */
.pg-criteria {
  display: grid;
  gap: var(--s2);
  align-content: start;
  min-width: 0;
  border-inline-start: var(--rule) solid var(--scene-line);
  padding-inline-start: var(--s3);
}

.pg-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.pg-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 2.75rem;
  padding: var(--s1) var(--s2);
  background: var(--scene-sheet);
  border: var(--rule) solid var(--scene-muted);
  border-radius: var(--radius);
  color: var(--scene-ink);
  font-size: var(--small);
  font-weight: 600;
  text-align: center;
}

/* Before the shared script enables them, choices stay honest about being
   dormant rather than vanishing into a grayed-out state. */
.pg-scene:not([data-enhanced]) .pg-choice { border-style: dashed; }

.pg-scene button.pg-choice:not(:disabled):hover {
  border-color: var(--scene-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* The round marker keeps the selected state visible beyond color alone. */
.pg-choice::before {
  content: '';
  flex-shrink: 0;
  width: .5rem;
  height: .5rem;
  border: var(--rule) solid currentColor;
  border-radius: 50%;
}

.pg-choice[aria-pressed="true"] {
  background: var(--scene-selection-bg);
  border-color: var(--scene-selection-bg);
  color: var(--scene-selection-ink);
}

.pg-choice[aria-pressed="true"]::before { background: currentColor; }

.pg-scene .scene-detail-copy { max-width: 34ch; }

/* Exam workflow strip: the excerpt being judged is one stage of a workflow
   the instructor controls. Numbered markers give the order without relying
   on position or color alone; the current stage is underlined, not colored. */
.pg-steps {
  counter-reset: pg-step;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: 0;
  padding: 0 0 var(--s2);
  list-style: none;
  border-bottom: var(--rule) solid var(--scene-line);
  font-size: var(--small);
  color: var(--scene-muted);
}
.pg-steps li {
  counter-increment: pg-step;
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.pg-steps li::before {
  content: counter(pg-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border: var(--rule) solid var(--scene-line);
  border-radius: 50%;
  font-size: var(--fine);
  font-weight: 600;
  color: var(--scene-muted);
}
.pg-steps .is-current {
  color: var(--scene-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--scene-accent);
  text-underline-offset: .25em;
}

/* Names the rail so the proposals read as rubric criteria, not free comments. */
.pg-criteria-label {
  font-size: var(--fine);
  font-weight: 600;
  color: var(--scene-muted);
  margin-bottom: var(--s1);
}

/* Instructor control: a proposal is decided, never auto-applied. */
.pg-decision {
  margin-top: var(--s2);
  font-size: var(--small);
  font-weight: 600;
  color: var(--scene-ink);
}

@media (max-width: 640px) {
  .pg-scene { padding: var(--s2); }
  .pg-head { flex-direction: column; gap: var(--s0); }
  .pg-body { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .pg-criteria {
    border-inline-start: 0;
    border-top: var(--rule) solid var(--scene-line);
    padding-inline-start: 0;
    padding-top: var(--s3);
  }
  .pg-choice { flex: 1 1 auto; }
  .pg-scene .scene-detail-copy { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-excerpt { transition: none; }
}

@media (forced-colors: active) {
  .pg-choice[aria-pressed="true"] { border-color: Highlight; }
  .pg-choice[aria-pressed="true"]::before { background: currentColor; }
  .pg-excerpt { border-bottom-color: CanvasText; }
  .pg-excerpt.is-active { background-color: var(--scene-selection-bg); color: var(--scene-selection-ink); }
}