/* ============================================================================
   grader-bank.css — the comment bank inside the grader. Step 6, items 1 and 2.
   Tokens only; tools/grader-tokens-only.js guards this file.

   ⚠ THE DESIGN DOES NOT SPECIFY THIS SURFACE. COMPONENTS.md §4 names
   `CommentBankTrigger` ("/ in --k3200 + 'All my comments'", Coach only) and
   nothing else — there is no palette, no slot treatment and no ranked list
   anywhere in the bundle. This is built from the product's own material so it
   reads as part of the panel rather than as a new idea, and the gap is raised
   at the checkpoint rather than papered over.

   IT COSTS ZERO CONTROLS AT REST. The palette is a disclosure — it does not
   exist until `/` opens it — and "anything behind a disclosure is not counted
   until it is disclosed".
   ========================================================================= */

.gr-bank {
  position: absolute; z-index: 40; min-width: 320px; max-width: 420px;
  border-radius: var(--r-3xl); overflow: hidden;
  background: var(--panel-hi); box-shadow: var(--edge), var(--edge-un), var(--contact), var(--float);
  animation: gr-bank-rise var(--dur-fast) var(--ease-standard);
}
@keyframes gr-bank-rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

.gr-bank-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: inset 0 -1px 0 #232529;
}
.gr-bank-q { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--k3200); }
.gr-bank-scope { margin-left: auto; font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); color: var(--faint); }

.gr-bank-list { max-height: 246px; overflow-y: auto; padding: var(--sp-2); }
.gr-bank-row {
  display: block; width: 100%; text-align: left; border: 0; position: relative;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  background: transparent; color: var(--text3);
  font-family: var(--f-u); font-size: var(--t-ui-xs); line-height: 1.45; cursor: pointer;
}
.gr-bank-row.is-on { background: var(--ctl-up); box-shadow: var(--edge-hi), var(--edge-un); color: var(--text); }
.gr-bank-row .gr-bank-txt { display: block; }
.gr-bank-meta { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
/* What the teacher has actually reached for — the ranking is never by hand. */
.gr-bank-uses { font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); color: var(--faint); }
.gr-bank-tag  { padding: 0 var(--sp-3); border-radius: var(--r-xs); background: var(--k3200-fill); color: var(--k3200); font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); }
.gr-bank-slotmark { color: var(--k3200); }

.gr-bank-foot {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  box-shadow: inset 0 1px 0 #232529;
  font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); color: var(--faint);
}
.gr-bank-empty { padding: var(--sp-7) var(--sp-6); font-family: var(--f-u); font-size: var(--t-ui-xs); color: var(--dim); }

/* A drafted line is the teacher's to accept or overwrite — it is NEVER sent by
   being drafted, so it is marked as unsent rather than looking committed. */
.gr-comment-field.is-draft { box-shadow: inset 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px var(--k3200-line); }
.gr-bank-drafted {
  display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3);
  font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); color: var(--k3200);
}