/* ============================================================================
   ГАЙДЛАЙН — ОБВЯЗКА ВИТРИНЫ, И ТОЛЬКО ОНА.

   Здесь нет ни одного правила, которое трогало бы сам образец: кнопка,
   поле и список обязаны выглядеть в витрине ровно так же, как в работе.
   Правило поверх образца превратило бы витрину в ТРЕТИЙ набор элементов —
   ради избавления от второго её и заводили.

   Всё, что здесь есть, — раскладка подписей вокруг образцов.
   ========================================================================= */

.gd-tell { margin-bottom: var(--sp-200); }

/* Образцы стоят рядами и переносятся: их число в разделе не постоянно, а
   остров может оказаться и в одну долю ширины, и в четыре. */
.gd-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-250);
  align-items: flex-start;
}
.gd-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-050);
  min-width: 168px;
  max-width: 100%;
}
/* Имя класса — цифрами того же начертания, что и числа: его читают как
   запись, а не как слово, и слитная строка вроде «.btn.danger.subtle»
   в обычном начертании разбирается заметно медленнее. */
.gd-name { font-family: var(--num); font-size: var(--fs-s); color: var(--ink2); }
.gd-from { font-size: var(--fs-s); color: var(--ink3); }
.gd-live { padding-top: var(--sp-050); }

.gd-swatch { width: 148px; }
.gd-chip {
  height: 34px;
  margin-bottom: var(--sp-050);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-100);
}
.gd-token { min-width: 176px; }

.gd-icon { width: 84px; text-align: center; }
.gd-icon .gd-name { word-break: break-all; }

/* Место, на котором показывают курсор: сам курсор виден только при
   наведении, и без отведённой площадки наводить было бы не на что. */
.gd-cursor {
  display: grid;
  place-items: center;
  width: 148px; height: 60px;
  border: var(--bw) dashed var(--line);
  border-radius: var(--r-150);
  color: var(--ink3);
}

/* Кусок списка разделов — чтобы переливающийся пункт был виден в своём
   окружении, а не сам по себе. */
.gd-rail {
  /* КОЛОНКОЙ, КАК НАСТОЯЩИЙ РЕЛЬС. Пункт — `<button>`, и в блоке он
     съёживается по надписи; в колонке он тянется до краёв, то есть
     выглядит ровно так, как выглядит в списке разделов. */
  display: flex; flex-direction: column; gap: var(--sp-025);
  width: 216px;
  padding: var(--sp-100);
  border: var(--bw) dashed var(--line);
  border-radius: var(--r);
  background: var(--card);
}

/* Образец переноса: карточке нужна своя ширина и курсор «можно взять» —
   в жизни её даёт хозяин (столбец канбана), в витрине хозяина нет. */
.gd-drag { width: 232px; cursor: var(--cur-grab); }

/* Образец полосы: в жизни она лежит по низу шапки, а в витрине хозяина у
   неё нет — даём ей коробку, чтобы черта было где нарисовать. */
.gd-bar {
  width: 260px; padding: var(--sp-150) 0 var(--sp-200);
  color: var(--ink3); font-size: var(--fs-s);
}