/* ============================================================================
   grader-pane-text.css — the text response. Step 5, pane 2 of 7.
   Tokens only; tools/grader-tokens-only.js guards this file.

   READING SURFACE, same material as the question set — but this one is built
   for continuous prose, so the measure is tighter and the leading is looser:
   the design states 15.5px on 1.78 with the column centred rather than
   stretched. An essay set at the full 1500px stops being readable, and a
   teacher who cannot read it comfortably grades the first paragraph.

   THE MARKER LANGUAGE IS THE IMAGE PANE'S. A numbered anchor on a sentence and
   a numbered pin on a photograph are the same gesture, the same badge and the
   same card — that continuity is most of what makes this one tool instead of
   seven. See grader-pane-image.css.
   ========================================================================= */

.gr-stagecol-body > .gr-text { width: 100%; height: 100%; }
.gr-text {
  position: relative; flex: 1; min-height: 0; overflow-y: auto;
  border-radius: var(--r-2xl); background: #131416;
  box-shadow: inset 0 0 0 1px #1f2226;
  padding: var(--sp-10) 0;
}
/* 620px, not the question set's 648 — prose wants a tighter measure than a
   list of one-line answers. Both are the design's own numbers. */
.gr-text-col { width: 620px; max-width: calc(100% - 48px); margin: 0 auto; }

/* ── the prompt ───────────────────────────────────────────────────────────── */
.gr-text-head { display: flex; align-items: baseline; gap: var(--sp-5); padding-bottom: var(--sp-7); box-shadow: inset 0 -1px 0 #1e1f22; }
.gr-text-num  { font-family: var(--f-n); font-size: var(--t-mono-md); letter-spacing: var(--t-mono-md-ls); color: var(--k3200); }
.gr-text-pts  { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--faint); }
.gr-text-spacer { flex: 1; }
.gr-text-shown { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--faint); }
.gr-text-prompt { margin-top: var(--sp-7); font-family: var(--f-u); font-size: var(--t-ui-md); line-height: 1.55; color: var(--muted); }

/* ── the response — the thing being read ─────────────────────────────────── */
.gr-text-body {
  margin-top: var(--sp-10); font-family: var(--f-u);
  font-size: 15.5px; line-height: 1.78; letter-spacing: -.003em; color: var(--text2);
}
.gr-text-body p { margin: 0 0 17px; }
.gr-text-body.is-anchoring { cursor: text; }

/* An anchored range. The underline is what makes it read as a mark ON the
   sentence rather than a highlight behind it. */
.gr-text-hl { border-radius: 2px; padding: 1px 0; }
.gr-text-hl[data-tone="gold"]  { background: var(--k3200-fill); border-bottom: 1.5px solid var(--k3200-line); }
.gr-text-hl[data-tone="fail"]  { background: var(--fail-fill);  border-bottom: 1.5px solid var(--fail-line); }
.gr-text-hl[data-tone="pass"]  { background: var(--pass-fill);  border-bottom: 1.5px solid var(--pass-line); }

/* The numbered badge — the same object as an image pin, set inline. */
.gr-text-sup {
  margin-left: var(--sp-1); padding: 1px var(--sp-2); border-radius: var(--r-xs);
  font-family: var(--f-n); font-size: var(--t-mono-sm); vertical-align: super;
  color: var(--sub); cursor: pointer;
  animation: gr-pin-drop var(--dur-drop) var(--ease-drop);
}
.gr-text-sup[data-tone="gold"] { background: var(--k3200); }
.gr-text-sup[data-tone="fail"] { background: var(--fail); }
.gr-text-sup[data-tone="pass"] { background: var(--pass); }

.gr-text-hint {
  margin-top: var(--sp-9); font-family: var(--f-n); font-size: var(--t-mono-xs);
  letter-spacing: var(--t-mono-xs-ls); color: var(--faint);
}

/* ── anchored comment cards, in the score panel ───────────────────────────
   Identical card shape to the image pane's pin notes, on purpose. */
.gr-anchors { display: flex; flex-direction: column; gap: var(--sp-4); }
.gr-anchors-head { display: flex; align-items: center; gap: var(--sp-4); }
.gr-anchors-title { font-family: var(--f-d); font-weight: 700; font-size: var(--t-display-sm); letter-spacing: var(--t-display-sm-ls); color: var(--text2); }
.gr-anchors-count { margin-left: auto; font-family: var(--f-n); font-size: var(--t-mono-xs); letter-spacing: var(--t-mono-xs-ls); color: var(--faint); }
.gr-anchor-card {
  padding: var(--sp-6); border-radius: var(--r-2xl);
  background: var(--panel-hi); box-shadow: var(--edge), var(--edge-un), var(--contact);
}
.gr-anchor-top { display: flex; align-items: center; gap: var(--sp-4); }
.gr-anchor-n {
  width: 18px; height: 18px; flex: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-n); font-size: var(--t-mono-lg); color: var(--sub);
}
.gr-anchor-n[data-tone="gold"] { background: var(--k3200); }
.gr-anchor-n[data-tone="fail"] { background: var(--fail); }
.gr-anchor-n[data-tone="pass"] { background: var(--pass); }
.gr-anchor-quote {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--f-u); font-size: var(--t-ui-xs); font-style: italic; color: var(--dim);
}
.gr-anchor-note { margin-top: var(--sp-4); font-family: var(--f-u); font-size: var(--t-ui-sm); line-height: 1.5; color: var(--text2); }
.gr-anchor-foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.gr-anchor-crit { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-xs); background: var(--k3200-fill); font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); color: var(--k3200); }
.gr-anchor-remove {
  margin-left: auto; padding: var(--sp-2) var(--sp-4); border: 0; border-radius: var(--r-sm);
  background: transparent; box-shadow: inset 0 0 0 1px transparent;
  font-family: var(--f-u); font-size: var(--t-ui-xxs); color: var(--dim); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  position: relative;
}
.gr-anchor-remove:hover { color: var(--fail); box-shadow: inset 0 0 0 1px var(--fail-line); }

/* ── edge states — neutral, same rule as every other pane ─────────────────── */
.gr-text-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-4); text-align: center;
}
.gr-text-empty .gr-l { font-family: var(--f-d); font-weight: 600; font-size: var(--t-display-sm); letter-spacing: var(--t-display-sm-ls); color: var(--text3); }
.gr-text-empty .gr-d { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--faint); }

/* The anchored note. CommentField's material, sized for a panel card — the
   full 70px minimum would push a second anchor off the panel. */
.gr-anchor-field { min-height: calc(var(--sp-10) * 2); margin-top: var(--sp-4); }