/* client/lab/calendar.css
   Вкладка «Календарь событий». Перенос стилей из build_calendar.py — там они
   жили внутри строкового шаблона генератора и умирали при каждой пересборке.
   Теперь источник правды здесь, а генератор отдаёт только данные (events.json).

   Всё заскоуплено в .lab-cal: страница делит документ с trends.css, а имена
   вроде .head/.body/.tag там тоже встречаются. */
.lab-cal {
  --cal-bg: #FAF7F2; --cal-ink: #191714; --cal-mut: #787161; --cal-soft: #9C9484;
  --cal-line: #E6DFD2; --cal-card: #fff; --cal-acc: #E04F1F; --cal-gold: #C8901A;
  --cal-r: 14px; --cal-sh: 0 1px 2px rgba(25,23,20,.05), 0 4px 14px rgba(25,23,20,.05);
  color: var(--cal-ink);
  font: 15px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, sans-serif;
}
.lab-cal * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ---- панель ---- */
.lab-cal .cal-panel {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(var(--cal-bg) 76%, rgba(250,247,242,0));
  padding: 12px 0 16px; margin-bottom: 8px;
}
.lab-cal .bar { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 7px; }
.lab-cal .bar .lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--cal-soft);
  width: 62px; flex: none; font-weight: 600; padding-top: 5px;
}
.lab-cal .f {
  border: 1px solid var(--cal-line); background: var(--cal-card); color: var(--cal-ink);
  padding: 5px 12px; border-radius: 999px; cursor: pointer; font-size: 13px;
  font-family: inherit; transition: .13s; line-height: 1.4;
}
.lab-cal .f:hover { border-color: #CFC4B0; }
.lab-cal .f.on { background: var(--cal-ink); border-color: var(--cal-ink); color: #fff; }
.lab-cal .f.bmf { color: var(--cal-gold); }
.lab-cal .f.bmf.on { background: var(--cal-gold); border-color: var(--cal-gold); color: #fff; }
.lab-cal .cal-q {
  border: 1px solid var(--cal-line); background: var(--cal-card); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; min-width: 180px; flex: 1; font-family: inherit; color: var(--cal-ink);
}
.lab-cal .cal-q:focus { outline: none; border-color: var(--cal-acc); }
.lab-cal .cnt { color: var(--cal-soft); font-size: 12.5px; white-space: nowrap; }
.lab-cal .act { margin-left: auto; display: flex; gap: 7px; }
.lab-cal .ghost {
  border: 1px solid var(--cal-line); background: transparent; color: var(--cal-mut);
  padding: 5px 11px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-family: inherit;
}
.lab-cal .ghost:hover { color: var(--cal-ink); border-color: #CFC4B0; }

/* ---- секции ---- */
.lab-cal h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--cal-soft);
  margin: 24px 0 9px; font-weight: 700; display: flex; align-items: center; gap: 9px;
}
.lab-cal h2:after { content: ""; flex: 1; height: 1px; background: var(--cal-line); }
.lab-cal h2 .num { font-weight: 500; letter-spacing: 0; text-transform: none; color: #B8AF9C; }

/* ---- карточка ---- */
.lab-cal .c {
  background: var(--cal-card); border: 1px solid var(--cal-line); border-radius: var(--cal-r);
  margin-bottom: 7px; box-shadow: var(--cal-sh); overflow: hidden; transition: .15s;
}
.lab-cal .c:hover { border-color: #D8CDB8; }
.lab-cal .c.open { border-color: #CFC4B0; box-shadow: 0 2px 4px rgba(25,23,20,.05), 0 10px 26px rgba(25,23,20,.07); }
.lab-cal .c.past { opacity: .5; }
.lab-cal .head {
  display: grid; grid-template-columns: 30px 74px 1fr auto; gap: 11px; align-items: center;
  padding: 11px 14px; cursor: pointer; user-select: none;
}
.lab-cal .star {
  border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1; padding: 3px;
  color: #DAD2C2; transition: .13s;
}
.lab-cal .star:hover { color: var(--cal-gold); transform: scale(1.15); }
.lab-cal .star.on { color: var(--cal-gold); }
.lab-cal .dt { font-size: 12.5px; color: var(--cal-mut); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.01em; }
.lab-cal .mid { min-width: 0; }
.lab-cal .tag {
  display: inline-block; padding: 1.5px 8px; border-radius: 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .01em; margin-right: 7px; vertical-align: 1px; white-space: nowrap;
}
.lab-cal .t-franchise { background: #EFE6FB; color: #6B4A9E; }
.lab-cal .t-games { background: #E2EFFB; color: #2C6394; }
.lab-cal .t-toys { background: #FBE7F1; color: #9C3D71; }
.lab-cal .t-music { background: #F3E7FA; color: #7A4198; }
.lab-cal .t-holidays { background: #FBE9E1; color: #B0491F; }
.lab-cal .t-giftdays { background: #FCEAEA; color: #A83B3B; }
.lab-cal .t-fandom { background: #E7F3E9; color: #3E7A4C; }
.lab-cal .t-artchallenge { background: #FAF0DC; color: #8A6412; }
.lab-cal .t-sport { background: #E4F2F1; color: #2E7370; }
.lab-cal .t-nature { background: #E8F1E2; color: #4E7434; }
.lab-cal .t-rhythms { background: #EDEBE6; color: #6E6659; }
.lab-cal .nm { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; display: inline; }
.lab-cal .loc {
  font-size: 10.5px; color: var(--cal-soft); border: 1px solid var(--cal-line); border-radius: 5px;
  padding: 0 5px; margin-left: 6px; white-space: nowrap; vertical-align: 2px;
}
.lab-cal .warn {
  font-size: 10.5px; color: #A8792B; background: #FBF2DE; border-radius: 5px; padding: 0 5px;
  margin-left: 6px; white-space: nowrap; vertical-align: 2px;
}
.lab-cal .right { display: flex; align-items: center; gap: 10px; }
.lab-cal .dots { display: flex; gap: 2.5px; }
.lab-cal .dots i { width: 6px; height: 6px; border-radius: 50%; background: #E6DFD2; display: block; }
.lab-cal .dots i.f1 { background: #F2BFA9; }
.lab-cal .dots i.f2 { background: #EC8A61; }
.lab-cal .dots i.f3 { background: var(--cal-acc); }
/* рынка не было в прогоне, которым собрана карточка — пустой кружок, не ноль */
.lab-cal .dots i.fx { background: transparent; box-shadow: inset 0 0 0 1px #E6DFD2; }
.lab-cal .pow { font-size: 12px; font-weight: 700; color: var(--cal-acc); width: 11px; text-align: right; }
.lab-cal .chev { color: #C6BDA9; font-size: 11px; transition: .18s; width: 11px; }
.lab-cal .c.open .chev { transform: rotate(90deg); }

/* ---- раскрытая часть ---- */
.lab-cal .body { display: none; padding: 0 14px 14px 129px; font-size: 13.5px; }
.lab-cal .c.open .body { display: block; }
.lab-cal .body .k {
  color: var(--cal-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; margin-bottom: 2px;
}
.lab-cal .body p { margin: 0 0 11px; }
.lab-cal .body .why { color: var(--cal-mut); line-height: 1.5; }
/* «как сказать креаторам» — готовая фраза куратора, идёт первой строкой */
.lab-cal .body .hook {
  border-left: 2px solid var(--cal-acc); padding-left: 10px; line-height: 1.5;
  color: var(--cal-ink); font-weight: 500;
}
.lab-cal .body .sn { color: #A8792B; line-height: 1.5; }
.lab-cal .meta {
  display: flex; gap: 16px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--cal-line);
  color: var(--cal-mut); font-size: 12.5px; align-items: center;
}
.lab-cal .meta b { color: var(--cal-ink); font-weight: 600; }
.lab-cal .mrow { display: flex; gap: 9px; flex-wrap: wrap; }
.lab-cal .mrow span { font-size: 11.5px; color: var(--cal-mut); }
.lab-cal .mrow span b { color: var(--cal-ink); }
.lab-cal .src { color: var(--cal-acc); text-decoration: none; }
.lab-cal .src:hover { text-decoration: underline; }
.lab-cal .empty { text-align: center; color: var(--cal-soft); padding: 56px 20px; font-size: 14px; }
.lab-cal .toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--cal-ink); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 13px; transition: .25s; z-index: 99; pointer-events: none; opacity: 0;
}
.lab-cal .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

@media (max-width: 620px) {
  .lab-cal .head { grid-template-columns: 26px 1fr auto; gap: 8px; padding: 10px 12px; }
  .lab-cal .dt { grid-column: 2; font-size: 11.5px; margin-bottom: 1px; }
  .lab-cal .mid { grid-column: 2; }
  .lab-cal .right { grid-column: 3; grid-row: 1/3; }
  /* восемь рынков вместо пяти: на телефоне кружки переносим в два ряда,
     иначе правая колонка съедает название события */
  .lab-cal .dots { flex-wrap: wrap; width: 38px; justify-content: flex-end; }
  .lab-cal .body { padding-left: 12px; }
  .lab-cal .bar .lbl { width: 100%; padding-top: 0; }
}

/* ---- подвкладки: Календарь / Сплетни ---- */
.lab-cal .cal-tabs {
  display: flex; gap: 6px; margin-bottom: 16px;
  border-bottom: 1px solid var(--cal-line); padding-bottom: 0;
}
.lab-cal .cal-tab {
  border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--cal-soft); padding: 8px 16px 11px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: .15s;
}
.lab-cal .cal-tab:hover { color: var(--cal-mut); }
.lab-cal .cal-tab.on { color: var(--cal-ink); border-bottom-color: var(--cal-acc); }
.lab-cal .cal-tab .n { font-weight: 500; color: #BDB4A2; margin-left: 6px; font-size: 13px; }
.lab-cal .cal-hidden { display: none !important; }

/* ---- сплетни ---- */
/* Врезка-предупреждение: сплетня — не календарная дата, и правила работы с ней
   другие. Стоит над фильтрами, чтобы её нельзя было не заметить. */
.lab-cal .cal-note {
  background: #FFF8F0; border: 1px solid #F0DCC8; border-radius: 10px;
  padding: 12px 15px; font-size: 13.5px; color: #7A5A38; margin-bottom: 16px; line-height: 1.5;
}
.lab-cal .cal-note b { color: #5E4025; }
.lab-cal .cal-gq {
  border: 1px solid var(--cal-line); background: var(--cal-card); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; min-width: 180px; flex: 1;
  font-family: inherit; color: var(--cal-ink);
}
.lab-cal .cal-gq:focus { outline: none; border-color: var(--cal-acc); }
.lab-cal .g-who { font-size: 12px; color: var(--cal-mut); font-weight: 600; margin-bottom: 1px; }
.lab-cal .g-what { color: var(--cal-mut); font-size: 13.5px; line-height: 1.55; margin: 0 0 11px; }
/* Жар: насколько тема горячая прямо сейчас. */
.lab-cal .heat {
  display: inline-block; padding: 1.5px 8px; border-radius: 6px; font-size: 11px;
  font-weight: 600; margin-right: 6px; white-space: nowrap;
}
.lab-cal .h-горячо { background: #FBE3DA; color: #B0401A; }
.lab-cal .h-тянется { background: #E9EFE4; color: #4E7434; }
.lab-cal .h-остыло { background: #EDEBE6; color: #807865; }
.lab-cal .h-впереди { background: #E4EDF7; color: #2C6394; }
/* Кружок безопасности для детского бренда. */
.lab-cal .sf { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 2px; }
.lab-cal .s-зелёный { background: #5A9B47; }
.lab-cal .s-жёлтый { background: #D9A62A; }
.lab-cal .s-красный { background: #C4402A; }

/* ---- реакции на сплетнях ---- */
/* Строка живёт между .head и .body — видна без раскрытия карточки, но клик по
   ней не должен всплывать в toggle раскрытия (обработчик не завязан на .head). */
.lab-cal .greacts { display: flex; gap: 7px; padding: 0 14px 11px 129px; }
.lab-cal .greact {
  border: 1px solid var(--cal-line); background: var(--cal-card); color: var(--cal-mut);
  padding: 4px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px;
  transition: .13s;
}
.lab-cal .greact:hover { border-color: #D8CDB8; color: var(--cal-ink); }
.lab-cal .greact.on { background: #FBE7DC; border-color: #F0C4A8; color: #B0401A; }
.lab-cal .greact--work.on { background: #E4EDF7; border-color: #C3D6EC; color: #2C6394; }
@media (max-width: 620px) {
  .lab-cal .greacts { padding-left: 12px; flex-wrap: wrap; }
}