/* ============================================================================
   Bulk grading (v3254)

   Sits at the top of the review queue, closed by default. Grading many
   students at once is a deliberate act, so the panel stays quiet until it is
   opened and the primary action states its own scope ("Apply to 12").
   ========================================================================= */

.bg-panel-v3254{
  margin:0 0 10px;
  border:1px solid var(--line,rgba(148,163,184,.2));
  border-radius:14px;
  background:rgba(125,150,180,.04);
  overflow:hidden;
  transition:border-color .22s cubic-bezier(.16,1,.3,1);
}
.bg-panel-v3254.is-open{
  border-color:rgba(124,92,255,.34);
  background:linear-gradient(180deg,rgba(124,92,255,.08),rgba(124,92,255,.02));
}

/* ------------------------------------------------------------- the toggle */

.bg-toggle-v3254{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .18s ease-out;
}
.bg-toggle-v3254:hover{background:rgba(125,150,180,.06)}
.bg-toggle-v3254 > span:nth-of-type(2){
  flex:1;
  font-size:.83rem;font-weight:780;
  letter-spacing:-.01em;
}
.bg-toggle-v3254 small{
  flex:none;
  padding:3px 9px;
  border:1px solid var(--line,rgba(148,163,184,.2));
  border-radius:999px;
  color:var(--muted,#8ea3b8);
  font-size:.68rem;font-weight:750;
  white-space:nowrap;
}

.bg-toggle-icon-v3254{
  flex:none;
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:9px;
  background:linear-gradient(135deg,rgba(124,92,255,.28),rgba(23,199,255,.16));
  color:#c9b8ff;
}
.bg-toggle-icon-v3254 svg{width:15px;height:15px}
.bg-panel-v3254.is-open .bg-toggle-icon-v3254{
  background:linear-gradient(135deg,#7c5cff,#17c7ff);
  color:#fff;
}

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

.bg-body-v3254{
  padding:0 13px 13px;
  animation:bg-open-v3254 .26s cubic-bezier(.16,1,.3,1);
}
/* `backwards` only: a transform left in effect afterwards would make this a
   containing block for anything fixed inside it. */
@keyframes bg-open-v3254{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}

.bg-picker-v3254{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  padding-bottom:11px;
  margin-bottom:11px;
  border-bottom:1px solid var(--line,rgba(148,163,184,.2));
}
.bg-pick-v3254{
  padding:6px 11px;
  border:1px solid var(--line,rgba(148,163,184,.2));
  border-radius:9px;
  background:transparent;
  color:var(--muted,#8ea3b8);
  font:700 .72rem/1 inherit;
  cursor:pointer;
  transition:color .18s ease-out,border-color .18s ease-out,background .18s ease-out;
}
.bg-pick-v3254:hover{
  color:var(--text,#eef6ff);
  border-color:rgba(124,92,255,.4);
  background:rgba(124,92,255,.08);
}
.bg-count-v3254{
  margin-left:auto;
  color:var(--muted,#8ea3b8);
  font-size:.72rem;font-weight:750;
  font-variant-numeric:tabular-nums;
}

.bg-fields-v3254{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-bottom:11px;
}
.bg-field-v3254{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:96px;
}
.bg-grow-v3254{flex:1;min-width:190px}
.bg-field-v3254 > span{
  color:var(--muted,#8ea3b8);
  font-size:.7rem;font-weight:750;
}
.bg-field-v3254 em{
  font-style:normal;font-weight:500;
  opacity:.72;
}
.bg-field-v3254 input{
  min-height:36px;
  padding:0 10px;
  border:1px solid var(--line,rgba(148,163,184,.2));
  border-radius:9px;
  background:var(--panel-solid,#0f1d31);
  color:inherit;
  font:inherit;font-size:.82rem;
}
.bg-field-v3254 input:focus{
  outline:2px solid rgba(124,92,255,.5);
  outline-offset:1px;
}

.bg-actions-v3254{
  display:flex;
  align-items:center;
  gap:11px;
  flex-wrap:wrap;
}
.bg-note-v3254{
  flex:1;min-width:150px;
  margin:0;
  color:var(--muted,#8ea3b8);
  font-size:.71rem;line-height:1.45;
}
.bg-apply-v3254{
  flex:none;
  font-variant-numeric:tabular-nums;
}
.bg-apply-v3254:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* ----------------------------------------------------------- the checkbox */

.bg-check-v3254{
  flex:none;
  width:19px;height:19px;
  display:grid;place-items:center;
  margin-right:2px;
  border:1.6px solid rgba(148,163,184,.42);
  border-radius:6px;
  background:transparent;
  color:transparent;
  cursor:pointer;
  transition:
    background .16s cubic-bezier(.16,1,.3,1),
    border-color .16s ease-out,
    transform .16s cubic-bezier(.34,1.56,.64,1);
}
.bg-check-v3254 svg{width:12px;height:12px}
.bg-check-v3254:hover{border-color:rgba(124,92,255,.62);transform:scale(1.08)}
.bg-check-v3254:focus-visible{
  outline:2px solid rgba(124,92,255,.6);
  outline-offset:2px;
}
.bg-check-v3254.on{
  background:linear-gradient(135deg,#7c5cff,#17c7ff);
  border-color:transparent;
  color:#fff;
}
/* A graded student can still be ticked — the server skips them — but the
   dimmed state says so before the click. */
.bg-check-v3254.is-graded{
  border-style:dashed;
  opacity:.55;
}

/* --------------------------------------------------------- override switch */
/*
 * Replacing a grade destroys work that cannot be recovered, so this control
 * looks and reads like a deliberate choice, and the panel shifts to a warning
 * tone the moment it is on.
 */

.bg-override-v3254{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px 11px;
  margin-bottom:11px;
  border:1px solid var(--line,rgba(148,163,184,.2));
  border-radius:11px;
  cursor:pointer;
  transition:border-color .18s ease-out,background .18s ease-out;
}
.bg-override-v3254:hover{border-color:rgba(244,114,143,.34)}
.bg-override-v3254 input{
  position:absolute;
  opacity:0;
  width:0;height:0;
}
.bg-override-box-v3254{
  flex:none;
  width:18px;height:18px;
  margin-top:1px;
  display:grid;place-items:center;
  border:1.6px solid rgba(148,163,184,.45);
  border-radius:5px;
  color:transparent;
  transition:background .16s ease-out,border-color .16s ease-out;
}
.bg-override-box-v3254 svg{width:11px;height:11px}
.bg-override-v3254 input:checked + .bg-override-box-v3254{
  background:#f4728f;
  border-color:#f4728f;
  color:#fff;
}
.bg-override-v3254 input:focus-visible + .bg-override-box-v3254{
  outline:2px solid rgba(244,114,143,.6);
  outline-offset:2px;
}
.bg-override-copy-v3254{min-width:0}
.bg-override-copy-v3254 b{
  display:block;
  font-size:.76rem;font-weight:780;
  line-height:1.35;
}
.bg-override-copy-v3254 small{
  display:block;margin-top:2px;
  color:var(--muted,#8ea3b8);
  font-size:.69rem;line-height:1.45;
}

/* While overwriting is armed the whole panel says so. */
.bg-panel-v3254.is-overwriting{
  border-color:rgba(244,114,143,.42);
  background:linear-gradient(180deg,rgba(244,114,143,.09),rgba(244,114,143,.02));
}
.bg-panel-v3254.is-overwriting .bg-override-v3254{
  border-color:rgba(244,114,143,.42);
  background:rgba(244,114,143,.08);
}
.bg-panel-v3254.is-overwriting .bg-toggle-icon-v3254{
  background:linear-gradient(135deg,#f4728f,rgba(244,114,143,.6));
}

.bg-note-v3254.is-warn{
  color:#ff9db4;
  font-weight:750;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width:640px){
  .bg-fields-v3254{flex-direction:column}
  .bg-field-v3254,.bg-grow-v3254{width:100%;min-width:0}
  .bg-actions-v3254{flex-direction:column;align-items:stretch}
  .bg-apply-v3254{width:100%;justify-content:center}
  .bg-count-v3254{width:100%;margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .bg-body-v3254{animation:none!important;opacity:1!important;transform:none!important}
  .bg-check-v3254,.bg-pick-v3254,.bg-toggle-v3254,.bg-panel-v3254{transition:none!important}
  .bg-check-v3254:hover{transform:none!important}
}

/* ------------------------------------------------------------------ toasts */
/*
 * Saving no longer reloads the page, so the confirmation has to come from
 * somewhere. These sit clear of the grading controls, announce themselves to
 * screen readers, and leave on their own.
 */

.bg-toasts-v3254{
  position:fixed;
  right:18px;bottom:18px;
  z-index:11000;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}

.bg-toast-v3254{
  min-width:180px;max-width:330px;
  padding:11px 15px;
  border:1px solid var(--line,rgba(148,163,184,.2));
  border-radius:12px;
  background:var(--panel-solid,#0f1d31);
  box-shadow:0 14px 40px rgba(3,8,18,.42);
  color:var(--text,#eef6ff);
  font-size:.8rem;font-weight:750;
  animation:bg-toast-in-v3254 .26s cubic-bezier(.16,1,.3,1);
}
@keyframes bg-toast-in-v3254{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.bg-toast-v3254.is-out{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .24s ease-out,transform .24s ease-out;
}

.bg-toast-v3254.is-ok{
  border-color:rgba(54,211,153,.34);
  background:linear-gradient(180deg,rgba(54,211,153,.14),var(--panel-solid,#0f1d31));
}
.bg-toast-v3254.is-bad{
  border-color:rgba(244,114,143,.4);
  background:linear-gradient(180deg,rgba(244,114,143,.16),var(--panel-solid,#0f1d31));
}

@media (max-width:640px){
  .bg-toasts-v3254{left:14px;right:14px;bottom:14px}
  .bg-toast-v3254{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .bg-toast-v3254{animation:none!important;opacity:1!important;transform:none!important}
  .bg-toast-v3254.is-out{transition:none!important}
}