/* Restrained, static research figures and a working editorial preview. */
#problem .problem-note { margin-top: 30px; max-width: 72ch; font: 15px/1.65 var(--sans); color: var(--body); padding: 0 0 0 16px; border-left: 2px solid var(--gold); }
.rubric-example { margin: 28px 0 36px; padding: 20px 0; border-block: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.rubric-example p { font-size: 15px; line-height: 1.65; color: var(--body); }
.rubric-example b { display: block; color: var(--ink); margin-bottom: 5px; }
.rubric-origin { font-size: 15px; color: var(--body); max-width: 74ch; margin-top: 20px; }
#rubric .axes { margin-top: 32px; }
#rubric .dim .chk { display: none; }
#rubric .dim[aria-expanded="true"] .chk { display: block; max-height: none; opacity: 1; margin-top: 10px; }
#rubric .bid { display: none; }
#rubric .dim[aria-expanded="true"] .bid { display: block; }
#rubric .bid .sl { display: none; }
.rubric-method { margin-top: 32px; border-top: 1px solid var(--rule); padding-top: 16px; }
.rubric-method summary { cursor: pointer; font-size: 15px; font-weight: 500; }
.rubric-method .ladder { margin-top: 24px; }
.rubric-method .rung { opacity: 1 !important; transform: none !important; }
.rubric-method > p { font-size: 14px; max-width: 72ch; margin-top: 20px; color: var(--body); }

.review-wrap { max-width: 1220px; }
.review-preview { margin-top: 32px; border: 1px solid var(--rule2); border-radius: 10px; background: var(--card); overflow: hidden; }
.review-toolbar { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.review-toolbar .preview-label { font-family: var(--mono); font-size: 11px; color: var(--soft); }
.review-modes { display: flex; gap: 4px; }
.review-modes button { padding: 7px 10px; font-size: 13px; border-radius: 4px; }
.review-modes button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.review-modes button:hover { text-decoration: underline; text-underline-offset: 3px; }
.review-context { padding: 12px 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 13px; border-bottom: 1px solid var(--rule); color: var(--body); }
.review-context select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--rule2); padding: 5px 24px 5px 8px; border-radius: 4px; }
.review-context .reset-example { margin-left: auto; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; padding: 6px; }
.review-grid { display: grid; grid-template-columns: 0.95fr 1.1fr 1.15fr; }
.writing-pane { padding: 22px 20px; min-width: 0; }
.writing-pane + .writing-pane { border-left: 1px solid var(--rule); }
.writing-pane h3, .suggestion-pane h3 { font: 500 15px/1.4 var(--sans); margin: 0 0 6px; }
.editor-hint { font: 11px/1.6 var(--mono); color: var(--soft); min-height: 35px; }
.writing-editor { white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.85 var(--sans); margin-top: 16px; min-height: 310px; color: var(--body); outline-offset: 5px; }
.writing-editor:empty::before { content: attr(data-placeholder); color: var(--soft); pointer-events: none; }
.writing-editor mark { border-bottom: 2px solid var(--gold); background: var(--gold-t); color: var(--ink); padding: 2px 0; }
.writing-editor .draft-issue { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-style: dotted; text-underline-offset: 5px; }
.writing-editor.is-editing mark { background: none; border-bottom: 0; }
.writing-editor.is-editing .draft-issue { text-decoration: none; }
.suggestion-pane { padding: 22px 18px; border-left: 1px solid var(--rule); background: var(--paper); min-width: 0; }
.review-counts { display: flex; gap: 12px; font: 11px/1.6 var(--mono); color: var(--soft); margin: 10px 0 18px; flex-wrap: wrap; }
.review-counts b { color: var(--ink); font-weight: 500; }
.suggestion { border-top: 1px solid var(--rule2); padding: 12px 0; }
.suggestion-heading { width: 100%; text-align: left; display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.suggestion-heading .issue-number { font: 11px var(--mono); color: var(--gold); }
.suggestion-heading strong { font-size: 14px; font-weight: 500; flex: 1; }
.suggestion-heading .expand-symbol { color: var(--soft); font-size: 16px; }
.suggestion-kind { font: 10px/1.5 var(--mono); color: var(--soft); margin: 5px 0 0 24px; }
.suggestion-details { margin: 12px 0 0 24px; font-size: 13px; line-height: 1.6; color: var(--body); }
.suggestion-details blockquote { margin: 12px 0; border-left: 2px solid var(--gold); padding-left: 10px; color: var(--ink); overflow-wrap: anywhere; }
.suggestion-details .evidence-label { display: block; font: 10px/1.5 var(--mono); color: var(--soft); margin: 14px 0 4px; }
.suggestion-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.suggestion-actions button { font-size: 12px; padding: 6px 9px; border-radius: 4px; border: 1px solid var(--rule2); }
.suggestion-actions .apply-suggestion { background: var(--ink); border-color: var(--ink); color: var(--card); }
.review-empty { font-size: 14px; line-height: 1.65; color: var(--body); padding: 12px 0; }
.review-notice { font: 11px/1.6 var(--mono); color: var(--soft); margin-top: 12px; }
.review-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--rule); padding: 18px 20px; }
.review-footer p { font-size: 12px; line-height: 1.65; color: var(--soft); }
.review-footer b { color: var(--body); font-weight: 500; }
.review-footer a { text-underline-offset: 3px; }
.review-feedback-status { padding: 0 20px; font: 12px/1.6 var(--sans); color: var(--accent); }
.review-feedback-status:not(:empty) { padding-block: 10px; border-top: 1px solid var(--rule); }

.benchmark-wrap { margin-top: clamp(72px, 9vw, 116px); }
.paper-figure { margin: 36px auto 0; border-block: 1px solid var(--rule2); padding: 22px 0 0; }
.figure-kicker { font: 11px/1.5 var(--mono); color: var(--soft); letter-spacing: .03em; }
.paper-diagram { display: block; width: 100%; height: auto; margin-top: 16px; overflow: visible; }
.paper-diagram text { fill: var(--ink); font-family: var(--sans); }
.paper-diagram .figure-step { fill: var(--soft); font: 11px var(--mono); letter-spacing: .05em; }
.paper-diagram .figure-heading { font-size: 17px; font-weight: 500; }
.paper-diagram .figure-small { fill: var(--soft); font-size: 13px; }
.paper-diagram .figure-mono { fill: var(--soft); font: 11px var(--mono); }
.paper-diagram .paper { fill: var(--card); stroke: var(--rule2); stroke-width: 1.3; }
.paper-diagram .document-line { fill: none; stroke: var(--rule2); stroke-width: 3; stroke-linecap: round; }
.paper-diagram .document-accent { stroke: var(--accent); opacity: .7; }
.paper-diagram .connector { fill: none; stroke: var(--soft); stroke-width: 1.2; }
.paper-diagram .reference-connector { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 4 5; }
.paper-diagram .rubric-outline { fill: var(--card); stroke: var(--accent); stroke-width: 1.3; }
.paper-diagram .axis-label { fill: var(--accent); font: 500 15px var(--sans); }
.paper-diagram a:hover .rubric-outline { fill: var(--acc-t); }
.paper-diagram a:focus-visible { outline: 2px solid var(--accent); }
.paper-figure figcaption { font-size: 13px; color: var(--body); line-height: 1.65; padding: 18px 0 22px; border-top: 1px solid var(--rule); max-width: 78ch; }
.paper-figure figcaption b { font-weight: 500; color: var(--ink); }
.benchmark-status { display: flex; gap: 20px; align-items: baseline; margin-top: 20px; color: var(--body); }
.benchmark-status .status-label { white-space: nowrap; font: 11px var(--mono); color: var(--gold); }
.benchmark-status p { font-size: 14px; line-height: 1.65; max-width: 68ch; }
.paper-diagram-mobile { display: none; }
/* These sections explain an instrument: their contents never move on a loop. */
#instruments .reveal, #rubric .reveal { opacity: 1; transform: none; transition: none; }
#instruments .hit { animation: none; }

@media (max-width: 1099px) {
  .review-grid { grid-template-columns: 1fr 1fr; }
  .suggestion-pane { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); }
  .suggestion-details { max-width: 68ch; }
  .writing-editor { min-height: 230px; }
}
@media (max-width: 640px) {
  .rubric-example, .review-grid, .review-footer { grid-template-columns: 1fr; }
  .rubric-example { gap: 20px; }
  .writing-pane + .writing-pane { border-left: 0; border-top: 1px solid var(--rule); }
  .writing-editor { min-height: 150px; font-size: 15px; }
  .review-toolbar, .review-context { padding: 12px 16px; }
  .writing-pane, .suggestion-pane { padding: 18px 16px; }
  .review-toolbar { gap: 10px; }
  .review-modes button { min-height: 40px; padding-inline: 9px; }
  .suggestion-heading { min-height: 38px; }
  .suggestion-actions button { min-height: 40px; }
  .review-footer { gap: 12px; padding: 16px; }
  .paper-diagram-desktop { display: none; }
  .paper-diagram-mobile { display: block; }
  .benchmark-status { flex-direction: column; gap: 8px; }
  #problem .problem-note { margin-top: 28px; }
}