/* Admin lesson resource (links) editor — roadmap.sh-style, compact: two lines
   per link (kind badge + select + title, then URL). Pure CSS, tokens only. */
.resource-editor__list {
  display: flex;
  flex-direction: column;
  gap: var(--block-space-half);
  margin-block-end: 0.75rem;
}

.resource-row {
  align-items: start;
  background: var(--color-subtle-light);
  border: 1px solid var(--color-subtle);
  border-radius: 0.5rem;
  display: flex;
  gap: var(--block-space-half);
  padding: var(--block-space-half) 0.6rem;
}

.resource-row.is-dragging {
  opacity: 0.5;
}

.resource-row__handle,
.resource-row__remove {
  background: transparent;
  border: 0;
  color: var(--color-subtle-dark);
  flex-shrink: 0;
  line-height: 0;
  padding: 0.25rem;
}

.resource-row__handle {
  cursor: grab;
}

.resource-row__handle:active {
  cursor: grabbing;
}

.resource-row__remove {
  cursor: pointer;
}

.resource-row__remove:hover {
  color: var(--color-negative);
}

.resource-row__handle .icon,
.resource-row__remove .icon {
  height: 1.1rem;
  width: 1.1rem;
}

.resource-row__fields {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.resource-row__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--block-space-half);
}

/* The kind's hue compressed to a dot: the badge modifier class sets `color`,
   the dot paints itself with it. background-color must outrank the modifier's
   tinted fill — this file loads after badges.css, so source order does it. */
.resource-row__dot {
  background-color: currentColor;
  block-size: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
  inline-size: 0.55rem;
}

/* Fixed width so switching kind (e.g. "Видео" → "Инструмент") never resizes
   the select — otherwise the row's elements jump. */
.resource-row__kind {
  flex-shrink: 0;
  width: 9.5rem;
}

.resource-row__title {
  flex: 1;
  min-width: 12rem;
}

.resource-row__lang {
  align-items: center;
  color: var(--color-subtle-dark);
  display: flex;
  flex-shrink: 0;
  font-size: 0.8rem;
  gap: 0.3rem;
  margin: 0;
  white-space: nowrap;
}

.resource-row__required {
  align-items: center;
  color: var(--color-subtle-dark);
  display: flex;
  font-size: 0.8rem;
  gap: 0.3rem;
  margin: 0;
  white-space: nowrap;
}

/* Slightly tighter inputs than the page default, to keep rows low. */
.resource-row__title,
.resource-row__url,
.resource-row__note,
.resource-row__kind {
  --input-padding: 0.35rem 0.6rem;
}

.resource-row__foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--block-space-half) 0.75rem;
}

.resource-row__note {
  flex: 1;
  font-size: 0.85rem;
  min-width: 14rem;
}

.resource-editor__add .icon {
  height: 1rem;
  width: 1rem;
}