/* ═══════════ Месяц: карта занятости ═════════════════════════
   Прочесть в месяце отдельные брони нельзя — на день приходится клетка
   в сотню пикселей, а объектов одиннадцать. Да и вопрос к месяцу другой:
   «а в сентябре можно?».

   Поэтому в клетке стоит гребёнка объектов: по засечке на каждый,
   залитой его занятостью в этот день. Порядок объектов тот же, что
   в неделе и дне, — значит по месту засечки видно не только «забито»,
   но и кто именно свободен. Это приборный язык продукта, сжатый
   до предела: брони висят как замеры, а не лежат списком.        */

.mgrid{background:var(--card)}
.m-page{display:flex;flex-direction:column;flex:1;min-height:0}

/* ── дни недели ── */
.m-dows{
  display:grid;grid-template-columns:repeat(7,1fr);flex-shrink:0;
  background:var(--paper);border-bottom:1px solid var(--rule);
}
.m-dow{
  padding:7px 0 6px;text-align:center;
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.m-dow.we{color:var(--ink-2)}

/* ── сетка месяца ── */
.m-grid{
  flex:1;min-height:0;display:grid;
  grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);
}
.m-day{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:6px;padding:7px 9px 9px;text-align:left;
  border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  transition:background .12s;
}
.m-day:nth-child(7n){border-right:none}
.m-day:nth-child(n+36){border-bottom:none}
.m-day.we{background:var(--off-paper)}
.no-we .m-day.we{background:transparent}
/* Чужой месяц виден, но не спорит: неделя всё равно перетекает через край. */
.m-day.out{opacity:.42}
@media (hover:hover) and (pointer:fine){
  .m-day:hover{background:var(--sunk)}
}
.m-day:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;z-index:2}

.m-num{
  font-size:var(--fs-date);font-weight:500;
  letter-spacing:-.02em;color:var(--ink);line-height:1.2;
  padding:0 5px;border-radius:var(--r-sm);align-self:flex-start;
}
.m-day.out .m-num{color:var(--ink-3)}
/* Сегодня названо плашкой на числе — тем же приёмом, что везде. */
.m-day.today .m-num{background:var(--now);color:var(--on-status);font-weight:600}
.m-day.today{background:rgba(184,69,63,.028)}

/* Имя даты стоит в клетке, а не только в подсказке: точка говорит
   «тут что-то есть», но не что именно, и за именем приходилось тянуться
   курсором. Набрано тихо — это свойство дня, а не событие в нём. */
.m-hol{
  margin:-2px 0 0 1px;font-size:10px;line-height:1.25;letter-spacing:-.01em;
  color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.m-hol.folk,.m-hol.memory{color:var(--ink-3)}
.m-day.out .m-hol{color:var(--ink-3)}

/* ── гребёнка объектов ── */
/* Засечка на объект: высота залитой части — его занятость в этот день.
   Пустая колонка снизу и есть то, что можно предложить. */
/* Засечки стоят на линии, а не висят: у прибора есть основание. */
.m-comb{
  display:flex;align-items:flex-end;gap:2px;height:26px;
  border-bottom:1px solid var(--rule);padding-bottom:2px;
}
.m-comb i{
  flex:1;min-width:2px;max-width:7px;height:100%;
  border-radius:1.5px;background:rgba(var(--ink-rgb),.07);
  position:relative;overflow:hidden;
}
.m-comb i::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--v) * 100%);
  background:var(--band);opacity:.42;border-radius:1.5px;
}
/* Занят целиком — засечка сплошная и на тон темнее: этот объект в этот
   день предложить нечего, и это видно без счёта. */
.m-comb i.full::after{opacity:.62}

@media (max-width:1120px){
  .m-day{padding:6px 6px 7px;gap:4px}
  .m-comb{height:20px;gap:1.5px}
}


/* В месяце метка стоит вплотную к числу — пометкой на нём, а не
   значком в углу клетки. */
.m-top{display:flex;align-items:center;gap:6px}