/* Marking report: a compact header above the workspace that expands into the
   rubric scores, evidence and feedback. */
.report {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  flex-direction: column;
  max-height: 58%;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  container-type: inline-size;
}

/* ---------------------------------------------------------------- header */

.rp-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px 8px 14px;
  cursor: pointer;
  user-select: none;
}
.rp-ring { position: relative; flex: none; width: 34px; height: 34px; }
.rp-ring svg { display: block; width: 100%; height: 100%; }
.rp-ring-track { fill: none; stroke: var(--line); stroke-width: 3.5; }
.rp-ring-arc { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .5s ease, opacity .2s; }
.rp-ring-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 600 11px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.rp-figures { flex: 0 1 auto; display: flex; flex-direction: column; min-width: max-content; line-height: 1.25; }
.rp-total { font: 600 16px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.rp-total small { font-size: 12px; font-weight: 500; color: var(--muted); }
.rp-sub { min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-grade {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font: 700 14px/1 var(--sans);
}
.rp-grade.suggested { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.rp-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.rp-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.rp-status.proposed { background: var(--proposed-soft); color: var(--proposed); }
.rp-status.proposed::before { background: var(--proposed); }
.rp-status.confirmed { background: color-mix(in srgb, var(--confirmed) 12%, transparent); color: var(--confirmed); }
.rp-status.confirmed::before { background: var(--confirmed); }
.rp-status.running { color: var(--ink-2); }
.rp-status.running::before { background: var(--agent); animation: rp-blink .8s ease-in-out infinite alternate; }
.rp-spacer { flex: 1; }

.rp-mark {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-weight: 600;
  white-space: nowrap;
}
/* The armed "Replace scores?" label is longer; make room for it in narrow panes. */
@container (max-width: 520px) {
  .rp-head:has(.rp-mark.armed) .rp-sub,
  .rp-head:has(.rp-mark.armed) .rp-status { display: none; }
}
.rp-mark.primary { box-shadow: none; }
.rp-mark.stop { color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent); }
.rp-mark.stop::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 2px; background: currentColor; }
.rp-mark.armed { background: var(--proposed-soft); color: var(--proposed); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--proposed) 45%, transparent); }
.rp-toggle { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--ink-2); }
.rp-toggle .icon { display: grid; transition: transform .2s ease; }
.report.open .rp-toggle .icon { transform: rotate(180deg); }

/* Indeterminate progress along the bottom edge of the header while marking */
.rp-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; background: var(--accent-soft); }
.rp-progress::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  border-radius: 2px;
  background: var(--accent);
  animation: rp-indeterminate 1.3s ease-in-out infinite;
}
@keyframes rp-indeterminate { from { left: -35%; } to { left: 100%; } }
@keyframes rp-blink { from { opacity: .35; } }
@keyframes rp-breathe { 50% { transform: scale(.86); opacity: .7; } }

/* Run status and the agent's closing note */
.rp-run, .rp-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 12px 7px 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12.5px;
}
.rp-run .avatar, .rp-note .avatar { flex: none; margin-top: 1px; }
.rp-run .avatar { animation: rp-breathe 1.6s ease-in-out infinite; }
.rp-run-text { flex: 1; }
.rp-note { background: var(--surface-2); }
.rp-note-text { flex: 1; white-space: pre-line; }
.rp-note-label { display: block; margin-bottom: 2px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.rp-note.error { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--ink); }
.rp-note.error .avatar { background: var(--danger); color: var(--surface); }
.rp-note.warn { background: var(--proposed-soft); color: var(--ink); }
.rp-note.warn .avatar { background: var(--proposed); color: var(--surface); }
.rp-note-x { flex: none; width: 20px; height: 20px; padding: 0; margin: -1px -2px 0 0; color: var(--muted); font-size: 15px; line-height: 1; }

/* ------------------------------------------------------------------ body */

.rp-body {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
}
.report.open .rp-body { display: block; }

/* Empty state */
.rp-empty { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 6px; }
.rp-empty-title { font-size: 14px; color: var(--ink); }
.rp-empty-text { margin: 0; max-width: 56ch; color: var(--ink-2); }
.rp-rubric { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.rp-rubric li { padding: 2px 9px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 12px; }
.rp-empty-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rp-empty-actions button { padding: 6px 12px; border-radius: 8px; font-weight: 600; }
.rp-ghost { box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Criterion rows */
.rp-criteria { margin: 0; padding: 0; list-style: none; }
.crit { position: relative; padding: 11px 14px 10px 16px; border-bottom: 1px solid var(--line); transition: background-color .15s; }
.crit::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.crit.proposed::before { background: var(--proposed); opacity: .75; }
.crit.hot { background: color-mix(in srgb, var(--evidence) 6%, transparent); }
.crit.arrive { animation: rp-arrive 1s ease-out; }
.crit.flash { animation: rp-flash 1.2s ease-out; }
@keyframes rp-arrive { 0%, 20% { background-color: color-mix(in srgb, var(--agent) 16%, transparent); } }
@keyframes rp-flash { 0%, 35% { background-color: color-mix(in srgb, var(--evidence) 20%, transparent); } }

.crit-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; }
.crit-title { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.crit-name { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.crit-meta { display: flex; flex-wrap: wrap; gap: 0 6px; color: var(--muted); font-size: 12px; }
.crit-level { color: var(--ink-2); }
.crit-level + .crit-state::before { content: "·"; margin-right: 6px; color: var(--muted); }
.crit-state.proposed { color: var(--proposed); }
.crit-state.confirmed { color: var(--confirmed); }
.crit-scorebox { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.crit-score { min-width: 40px; text-align: right; color: var(--ink); font: 600 15px/1 var(--sans); font-variant-numeric: tabular-nums; }
.crit-score small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.crit.unscored .crit-score { color: var(--muted); }

/* Score pips: click to score; hovering previews the fill */
.pips { display: flex; gap: 3px; }
.pip {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font: 600 11px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  transition: background-color .12s, color .12s, box-shadow .12s;
}
.pip.zero { width: 18px; background: transparent; box-shadow: none; }
.pip.on { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.pip.half { background: linear-gradient(90deg, var(--accent) 50%, var(--surface-2) 50%); color: var(--ink); }
.pip.zero.cur { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pips:hover .pip:not(.zero) { background: color-mix(in srgb, var(--accent) 28%, var(--surface-2)); box-shadow: none; color: var(--ink); }
.pips .pip:hover ~ .pip { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.pips .pip:not(.zero):hover { background: var(--accent); color: var(--on-accent); }
.pips .pip.zero:hover { background: var(--surface-2); color: var(--ink); }
/* Read-only while the agent marks */
.pips.locked .pip:not(.on):not(.cur) { opacity: .6; }
.report.running .crit-rationale:hover { background: transparent; }
.report.running .rp-field[readonly] { background: transparent; border-style: dashed; }
.report.running .rp-field[readonly]:focus { border-color: var(--line-strong); box-shadow: none; }
.pip-input { width: 64px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); font: 600 13px var(--sans); }

.crit-rationale {
  display: block;
  width: calc(100% + 12px);
  margin: 6px -6px 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  font: 13px/1.5 var(--sans);
  resize: none;
  overflow: hidden;
  transition: background-color .12s;
}
.crit-rationale:hover { background: var(--surface-2); }
.crit-rationale:focus { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); }
.crit-rationale::placeholder { color: var(--muted); }

.crit-foot { display: flex; align-items: flex-end; gap: 8px; margin-top: 6px; }
.crit-foot:not(:has(.chip, .crit-confirm:not([hidden]))) { display: none; }
.chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--evidence-soft);
  color: var(--ink-2);
  font: italic 12.5px/1.35 var(--serif);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color .12s, box-shadow .12s, color .12s;
}
.chip::before { content: "“"; color: var(--evidence); }
.chip::after { content: "”"; color: var(--evidence); }
.chip:hover, .chip.hot { background: color-mix(in srgb, var(--evidence) 22%, transparent); box-shadow: inset 0 0 0 1px var(--evidence); color: var(--ink); }
.crit-confirm {
  flex: none;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--confirmed) 40%, transparent);
  color: var(--confirmed);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.crit-confirm:hover { background: color-mix(in srgb, var(--confirmed) 10%, transparent); }

/* Feedback */
.rp-feedback { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 6px 16px; }
.rp-section-head { display: flex; align-items: center; gap: 10px; }
.rp-section-title { flex: 1; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.rp-grade-field { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.rp-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.rp-label small { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.rp-field {
  display: block;
  flex-basis: 100%;
  width: 100%;
  margin-top: 4px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font: 400 13px/1.5 var(--sans);
  resize: none;
  overflow: hidden;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.rp-field:hover { border-color: var(--line-strong); }
.rp-field:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.rp-field::placeholder { color: var(--muted); }
.rp-field.fb-grade { width: 56px; margin: 0; padding: 4px 6px; text-align: center; font-weight: 700; font-size: 14px; }
.rp-field.fb-grade::placeholder { color: var(--muted); font-weight: 600; }

/* Instructions for the agent */
.rp-instr { margin: 2px 14px 12px 16px; }
.rp-instr summary {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 6px 0;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  list-style: none;
}
.rp-instr summary::-webkit-details-marker { display: none; }
.rp-instr summary::before { content: "›"; font-size: 15px; line-height: 1; transition: transform .15s; }
.rp-instr[open] summary::before { transform: rotate(90deg); }
.rp-instr summary:hover { color: var(--ink-2); }
.rp-instr .rp-field { margin-top: 0; }

/* ---------------------------------------------------------------- footer */

.rp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; row-gap: 6px; padding: 8px 10px 8px 14px; border-top: 1px solid var(--line); }
.report:not(.open) .rp-foot { display: none; }
.rp-foot button { padding: 5px 10px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; white-space: nowrap; }
.rp-foot button.primary { box-shadow: none; font-weight: 600; }
.rp-foot .rp-clear { color: var(--muted); box-shadow: none; }
.rp-foot .rp-clear:hover:not(:disabled) { color: var(--danger); }

/* ------------------------------------------------------------ narrow panes */

@container (max-width: 520px) {
  .rp-head { gap: 8px; padding-left: 12px; }
  .rp-status { font-size: 0; gap: 0; padding: 0; width: 18px; height: 18px; justify-content: center; background: transparent; }
  .rp-sub { max-width: 120px; }
}
@container (max-width: 400px) {
  .rp-sub { display: none; }
  .rp-mark { padding: 6px 10px; }
  .crit-scorebox { width: 100%; justify-content: space-between; }
}
@container (max-width: 320px) {
  .rp-head { gap: 5px; padding-left: 10px; padding-right: 4px; }
  .rp-ring { width: 30px; height: 30px; }
  .rp-total small, .rp-grade { display: none; }
  .rp-mark { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 5px 8px; font-size: 12.5px; }
  .rp-foot .rp-spacer { display: none; }
}
@container (max-width: 240px) {
  .rp-status { display: none; }
}

@media (max-width: 860px) {
  .report { max-height: none; }
  .rp-body { overflow: visible; }
}