/* @boog-ui-start */
/* @kit Афиша сезона (поверхность)
   @group Поверхности
   @about Расписание сезона месяцем: когда что идёт и куда можно попасть.
     Сетка месяца читается по сгусткам занятости, поэтому день несёт только
     имя мероприятия — всё остальное человек узнаёт, открыв его.
   @do Дни без мероприятий оставлять пустыми: любая заливка пустых дней
     убивает картину занятости, ради которой месяц и смотрят
   @do Показывать дни соседних месяцев приглушённо: без них рвётся сетка,
     а полноценными они спорят с текущим месяцем за внимание
   @dont Прятать прошедшее: сезон читают и назад — «что уже было» тот же
     вопрос, что «что будет»
   @dont Складывать в клетку дня подробности мероприятия: там нет для них
     места, а сгустки занятости перестают читаться
   @sample <div class="hub__cal">…</div>

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

.hub{display:flex;flex-direction:column;gap:var(--space-6);}

/* ── Шапка ─────────────────────────────────────────────────────── */
/* Переключатель вида стоит в шапке страницы, а не в панели календаря: он
   меняет всю область под собой, и внутри одного из двух видов ему не место —
   иначе в таблице пришлось бы держать обломок календарной панели. */
.hub__head{display:flex;align-items:flex-start;gap:var(--space-4);}
.hub__head > div{flex:1 1 0;min-width:12rem;}
/* Селектор обязан быть не слабее соседнего: переключатель — тоже div, и
   правило выше растягивало его во всю ширину шапки. */
.hub__head > .hub__view{flex:none;align-self:center;min-width:0;}
.hub__title{margin:0;font:900 var(--text-2xl)/1.05 var(--font-display);color:var(--color-text);}
.hub__lead{margin:var(--space-1) 0 0;font:var(--text-md)/1.4 var(--font-body);color:var(--color-muted);}

/* ── Календарь месяца ──────────────────────────────────────────── */
.hub__cal{border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-surface);overflow:hidden;}
.hub__calbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);}
.hub__month{min-width:9rem;text-align:center;
  font:800 var(--text-md)/1 var(--font-display);color:var(--color-text);}
.hub__legend{display:flex;align-items:center;gap:var(--space-4);margin-left:auto;flex-wrap:wrap;
  font:var(--text-xs)/1.2 var(--font-body);color:var(--color-muted);}
.hub__legend span{display:inline-flex;align-items:center;gap:var(--space-2);}
.hub__legend-lbl{font-weight:600;color:var(--color-text);}
/* Группа «метка и ее варианты» переносится целиком. Без нее на узком экране
   метка следующей группы вставала в конец чужой строки и читалась как подпись
   к чужому варианту («По приглашению  Запись:»). */
.hub__legend-grp{display:inline-flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.hub__key{width:var(--space-3);height:var(--space-3);border-radius:2px;flex:none;
  border:var(--border-thick) solid transparent;}
.hub__key--open{background:var(--color-accent-weak);border-color:var(--color-accent);}
.hub__key--done{background:var(--color-purple-weak);}
.hub__key--idle{background:var(--color-surface-2);}

/* minmax(0,…) обязателен: обычный 1fr расширяется под содержимое, длинное
   имя мероприятия раздувало колонку, и воскресенье уезжало за край карточки,
   где его срезал overflow. */
/* Высота строки фиксирована (grid-auto-rows), чтобы сетка не «прыгала» при смене
   фильтров: строка не подстраивается под самый заполненный день. Переполнение
   редкого очень плотного дня прокручивается внутри ячейки, а не растит строку. */
.hub__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  grid-auto-rows:calc(var(--space-16) * 1.75);}
.hub__dow{padding:var(--space-2);text-align:center;background:var(--color-surface-2);
  font:700 var(--text-xs)/1 var(--font-body);color:var(--color-muted);
  text-transform:uppercase;letter-spacing:.04em;}
.hub__day{padding:var(--space-2);overflow:hidden;
  border-top:1px solid var(--color-border);border-left:1px solid var(--color-border);
  display:flex;flex-direction:column;gap:var(--space-1);}
/* «ещё +N» — не поместившиеся плашки дня прячутся под кнопку, всплывают
   поповером (кит .popover), а строка календаря остаётся постоянной высоты. */
.hub__more{align-self:flex-start;border:0;background:transparent;cursor:pointer;
  padding:0 var(--space-1);border-radius:2px;font:600 var(--text-xs)/1.5 var(--font-body);
  color:var(--color-muted);}
.hub__more:hover{color:var(--color-accent);background:var(--state-hover);}
.hub__more-pop{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2);
  min-width:calc(var(--space-16) * 2.5);max-width:calc(var(--space-16) * 4);}
.hub__more-head{font:700 var(--text-xs)/1 var(--font-body);color:var(--color-muted);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--space-1);}
.hub__more-pop .hub__ev{white-space:normal;overflow:visible;text-overflow:clip;}
.hub__day:nth-child(7n + 1){border-left:0;}
.hub__num{font:600 var(--text-sm)/1 var(--font-body);color:var(--color-text);}
/* Дни соседних месяцев показаны, но приглушены: без них сетка рвётся, а
   полноценными они спорят с текущим месяцем за внимание. */
.hub__day--out .hub__num{color:var(--color-track);}
.hub__day--today .hub__num{display:inline-grid;place-items:center;
  width:var(--space-6);height:var(--space-6);border-radius:var(--radius-pill);
  background:var(--color-accent);color:var(--color-on-accent);font-weight:800;}

/* Плашка мероприятия в дне — только имя: в клетке месяца больше ничего не
   поместится, а всё остальное человек узнает из плитки ниже. */
.hub__ev{display:block;padding:0 var(--space-1);border-radius:2px;
  font:600 var(--text-xs)/1.5 var(--font-body);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  background:var(--color-accent-weak);color:var(--color-accent-active);
  border:var(--border-thick) solid transparent;}
.hub__ev--open{border-color:var(--color-accent);}
.hub__ev--done{background:var(--color-purple-weak);color:var(--color-purple);}
.hub__ev--idle{background:var(--color-surface-2);color:var(--color-muted);}

/* ── Календари человека ─────────────────────────────────────────
   Календарей может быть сколько угодно: общедоступный, по приглашению и по
   одному на каждую компанию, где человек состоит. Поэтому цвет — НЕ класс на
   каждый случай, а пара переменных на элементе: заливка и линия. Класс под
   каждую компанию пришлось бы заводить при каждом новом клиенте.

   Голубой закреплён за общедоступным: это цвет акцента системы, и «общее»
   должно выглядеть как сама платформа. Остальные календари берут свободные
   пары бренд-палитры. */
.cal-item{display:flex;align-items:center;gap:var(--space-2);width:100%;
  padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);
  font:var(--text-sm)/1.2 var(--font-body);}
.cal-item:hover{background:var(--state-hover);}
/* Флажок КРАСИТСЯ цветом своего календаря: тогда переключатель видимости и
   метка цвета — один элемент, а не два рядом. Отдельный квадратик рядом с
   флажком дублировал бы цвет и занимал место. Выключенный календарь не
   показывает мероприятий, поэтому в этот момент его цвет и не нужен. */
.cal-item input{accent-color:var(--cal-line);}
.cal-item.is-off{color:var(--color-muted);}
.cal-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── Знак календаря у мероприятия ───────────────────────────────
   Плашка в дне и знак в строке красятся тем же цветом, что метка календаря в
   панели: связь «эта игра из того календаря» держится только на цвете, и
   разойтись им нельзя. */
.mark{display:inline-grid;place-items:center;flex:none;
  width:var(--space-5);height:var(--space-5);border-radius:var(--radius-sm);
  background:var(--cal-fill);color:var(--cal-line);}
.mark .icon{--size-icon:var(--space-4);}

.hub__ev{display:flex;align-items:center;gap:var(--space-1);
  background:var(--cal-fill);color:var(--cal-line);border-color:transparent;}
.hub__ev .icon{--size-icon:var(--space-3);flex:none;}
/* Контур — «сюда ещё можно записаться». Он поверх цвета календаря, поэтому
   работает одинаково во всех календарях, а не только в общедоступном. */
.hub__ev--open{border-color:var(--cal-line);}
/* Плашка «белая + окантовка»: заливка белая, смысл несёт тонкая рамка и точка
   цвета --cal-line (в кабинете Организатора — цвет стадии). Текст спокойный
   тёмный, чтобы не зависеть от контраста цвета категории. */
.hub__ev--outline{background:var(--color-surface);color:var(--color-text);
  border-color:var(--cal-line);}
.hub__ev-dot{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);
  flex:none;background:var(--cal-line);}
/* @boog-ui-end */