/* ═══════════════════════════════════════════════════════════════════════════
   GRADES — оценки
   Акцент: #f97316 (orange)

   gh-1: только мини-бары с названиями, инпуты скрыты.
   gh-2+: бары + инпуты + кнопка сохранить.
   gh-3/4: строки просторнее.
   ═══════════════════════════════════════════════════════════════════════════ */

.t-gr-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
}

.t-gr-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.t-gr-name {
  font-size: 10.5px;
  color: var(--muted);
  width: 36px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-gr-track {
  flex: 1;
  height: 5px;
  background: var(--surface2);
  border-radius: 99px;
  overflow: hidden;
  min-width: 0;
}
.t-gr-fill {
  height: 100%;
  background: #f97316;
  border-radius: 99px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.t-gr-input {
  width: 46px;
  flex-shrink: 0;
  font-size: 11px !important;
}

/* Кнопка */
.t-gr-save {
  flex-shrink: 0;
}

/* ── gh-1: только бары без инпутов ── */
@container metric (max-height: 119px) {
  .t-metric-body { padding: 0 10px 8px; }
  .t-gr-input    { display: none; }
  .t-gr-save     { display: none; }
  .t-gr-name     { font-size: 10px; }
  .t-gr-track    { height: 7px; }
  .t-gr-row      { gap: 8px; }
}

/* ── gh-2 ── */
@container metric (min-height: 120px) and (max-height: 239px) {
  .t-gr-row  { gap: 5px; }
  .t-gr-name { font-size: 10px; width: 32px; }
  .t-gr-input { width: 40px; }
}

/* ── gh-3/4 ── */
@container metric (min-height: 360px) {
  .t-gr-row   { gap: 8px; min-height: 30px; }
  .t-gr-name  { font-size: 12px; width: 48px; }
  .t-gr-track { height: 7px; }
  .t-gr-input { width: 54px; font-size: 12px !important; }
}

/* ── gw-2/3 ── */
@container metric (min-width: 300px) {
  .t-gr-name  { width: 52px; font-size: 11px; }
  .t-gr-input { width: 52px; }
}