/* @boog-ui-start */
/* @kit Карточка предмета кабинета (поверхность)
   @group Поверхности
   @about Рамка, в которой кабинет показывает один свой предмет — мероприятие,
     чертёж, сезон. Прямоугольник со скруглением, сверху светлая «шапка» с
     цветной ниточкой: метка типа, название с главным действием, описание.
     Ниже — тело: ряд фактов и содержимое предмета.
   @do Метка в шапке — всегда ТИП предмета. Состояние показывать в теле
     (лентой стадий или строкой правила), иначе экраны кабинетов расходятся
   @do Главное действие держать в строке названия — тогда видно, к чему оно
   @do Редкое и необратимое (отмена, удаление) — под кнопкой «ещё»
   @dont Заливать шапку тёмным: смысла она не несёт, а тёмная полоса во всю
     ширину утяжеляет экран и перетягивает внимание с содержимого
   @dont Дублировать в шапке то, что уже показано телом: состояние, сезон,
     если он входит в название
   @sample <section class="ccard"><div class="ccard__stripe"></div><div class="ccard__cover"><span class="chip chip--accent">Оценочная игра</span><div class="ccard__row"><h2>СДВИГ</h2><div class="ccard__act"><button class="btn btn--outline">Редактировать</button><button class="btn btn--primary">В конструктор</button></div></div><p class="ccard__desc">Деловая игра о пересборке ценности.</p></div><div class="ccard__body"><div class="ccard-tiles"><div class="ccard-tile"><span class="ccard-tile__c">Объём</span><span class="ccard-tile__n">2 дня</span><span class="ccard-tile__s">15 заданий</span></div></div></div></section>

   Опирается только на токены: кнопки и метки внутри — отдельные примитивы,
   поверхность их не переопределяет. */

/* ── Рамка ─────────────────────────────────────────────────────── */
.ccard{border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-surface);box-shadow:var(--elev-1);overflow:hidden;}

/* Цветная ниточка — вся доза цвета, которую получает рамка. Красить её можно
   по смыслу (тип игры), тогда цвет ещё и означает что-то. */
.ccard__stripe{height:var(--space-1);background:var(--color-accent);}
/* Ниточка по виду предмета - вся доза цвета на карточке: остальное держится
   нейтралью, иначе карточки в ленте начинают спорить друг с другом. Без этих
   модификаторов ниточка у всех видов выходила одинаково синей, и признак вида
   не читался вовсе. Потребители (лента мероприятий) размечали их с самого
   начала - объявления не было. */
.ccard__stripe--learn{background:var(--color-accent);}
.ccard__stripe--test{background:var(--color-purple);}
.ccard__stripe--muted{background:var(--color-track);}

/* ── Шапка ─────────────────────────────────────────────────────── */
.ccard__cover{display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--space-2);padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--color-border);}
/* Название и главное действие на одной линии: кнопка не висит в углу, и её
   положение не зависит от того, показано описание или нет. */
.ccard__row{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);width:100%;}
.ccard__row h2{margin:0;min-width:0;font:900 var(--text-xl)/1.15 var(--font-display);
  color:var(--color-text);}
.ccard__desc{margin:0;max-width:72ch;font:var(--text-sm)/1.45 var(--font-body);
  color:var(--color-muted);}
.ccard__desc[hidden]{display:none;}

/* Группа действий. Меню «ещё» кит только открывает — размещаем его сами,
   по правому краю группы: он совпадает с краем кнопки, и меню не выезжает. */
.ccard__act{display:flex;align-items:center;gap:var(--space-2);flex:none;position:relative;}
.ccard__act .popover{top:calc(100% + var(--space-1));right:0;left:auto;}

/* ── Тело ──────────────────────────────────────────────────────── */
.ccard__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);}

/* ── Ряд фактов ────────────────────────────────────────────────────
   Подпись мелким приглушённым, значение крупным заголовочным, пояснение
   снизу. Одинаковые факты на разных экранах кабинета выглядят одинаково —
   именно это делает экраны узнаваемо похожими. */
.ccard-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);}
.ccard-tile{display:flex;flex-direction:column;gap:var(--space-1);
  padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);}
.ccard-tile__c{display:inline-flex;align-items:center;gap:var(--space-1);
  font:var(--text-xs)/1 var(--font-body);color:var(--color-muted);}
/* Значок привязан к размеру подписи, рядом с которой стоит, а не к своему
   числу - как строчкой ниже у значения. Поменяется шкала текста, значок
   поедет вместе с ней; зашитое число осталось бы прежним и разъехалось с
   подписью. --text-md равен прежним 14, облик не меняется. */
.ccard-tile__c .icon{--size-icon:var(--text-md);}
.ccard-tile__n{font:800 var(--text-lg)/1.1 var(--font-display);color:var(--color-text);}
.ccard-tile__n .icon{--size-icon:var(--text-lg);color:var(--color-muted);
  vertical-align:-2px;margin-right:var(--space-1);}
.ccard-tile__s{font:var(--text-xs)/1.3 var(--font-body);color:var(--color-muted);}

@media (max-width:56rem){ .ccard-tiles{grid-template-columns:1fr 1fr;} }
/* @boog-ui-end */