/* =========================
   Student hero / layout
========================= */
.student-hero__inner{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
}

.student-hero__left{ display:flex; gap:14px; align-items:center; }
.student-hero__avatar{ width:64px; height:64px; border-radius:16px; overflow:hidden; }
.student-hero__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.student-hero__avatar--stub{
  width:64px; height:64px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; background:rgba(255,255,255,0.06);
}

.student-hero__name{ font-weight:900; font-size:22px; line-height:1.1; }

.student-hero__right{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.student-hero__stats{ display:flex; gap:10px; flex-wrap:wrap; }
.stat{ padding:10px 12px; border-radius:14px; background:rgba(255,255,255,0.04); min-width:120px; }
.stat__value{ font-weight:900; font-size:18px; }
.stat__label{ font-size:12px; opacity:.75; margin-top:2px; }

.student-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:14px;
  margin-top:14px;
}

@media (max-width: 980px){
  .student-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Timeline cards / chips
========================= */
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.05); font-size:12px; }

.event-card{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  text-decoration:none;
  color:inherit;
  margin-top:10px;
}
.event-card__row{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.event-card__title{ font-weight:850; }
.event-card__meta{ font-size:12px; opacity:.75; }

.progressbar{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
}
.progressbar__fill{
  height:100%;
  background:rgba(160,120,255,0.9);
}








/* базовая карточка: добавим тонкий контур */
.event-card{
  border: 1px solid rgba(0,0,0,0.06);
}

/* статусные — контур + чуть-чуть тонированный фон */
.event-card--overdue{
  border-color: rgba(255,90,90,0.55);
  background: rgba(255,90,90,0.06);
}
.event-card--today{
  border-color: rgba(255,220,90,0.60);
  background: rgba(255,220,90,0.07);
}
.event-card--tomorrow{
  border-color: rgba(120,220,255,0.55);
  background: rgba(120,220,255,0.06);
}
.event-card--week{
  border-color: rgba(120,255,170,0.55);
  background: rgba(120,255,170,0.06);
}
.event-card--soon{
  border-color: rgba(200,200,200,0.60);
  background: rgba(255,255,255,0.04);
}
.event-card--plan{
  border-color: rgba(160,120,255,0.55);
  background: rgba(160,120,255,0.06);
}


/* =========================
   Calendar base
========================= */
.cal-root{
  position: relative;
  margin-top: 12px;

  /* главный параметр “воздуха” вокруг карточки дня */
  --cell-pad: 7px;

  /* радиусы */
  --area-radius: 18px;
  --card-radius: 18px;
}

/* ВАЖНО: gap = 0, чтобы фон был непрерывным между строками/колонками */
/* .cal-grid-7{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  position: relative;
} */

/* Week/month wrappers use same grid */
.week-cal{ margin-top: 12px; }
.month-cal{ margin-top: 12px; }
.month-cal__head{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;           /* только у заголовка можно оставить gap */
  margin-bottom: 8px;
}
.month-cal__dow{
  font-size:12px;
  opacity:.7;
  text-align:center;
}

/* =========================
   Background areas (lvl1/2/3)
========================= */
.cal-area{
  position: relative;
  z-index: 1;
  border-radius: var(--area-radius);
  pointer-events: none;
}
a.cal-area{ pointer-events: auto; text-decoration: none; }

.cal-area::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--area-color);
  opacity: .14;
  border-radius: inherit;
}

/* Вложенность (делаем “уже”) */
/* 1) Базово: пусть cal-area не лезет в межнедельные щели по Y */
/* Сплошняк между днями (по X), но не лезем вверх/вниз (по Y) */
.cal-area{
  /* НЕ top/bottom — они смещают */
  top: auto;
  bottom: auto;

  /* режем вертикальные “поля” (в т.ч. в последней строке) */
  margin: var(--cell-pad) 0 !important;

  /* заливаем щели между днями */
  left: 0;
  right: 0;
}

/* Вложенность: сужаем только по X + чуть режем по Y, чтобы уровни были “внутри” */
.cal-area--lvl1{
  left: 0; right: 0;
}

.cal-area--lvl2{
  left: 6px; right: 6px;
  margin: calc(var(--cell-pad) + 6px) 0 !important;
}

.cal-area--lvl3{
  left: 12px; right: 12px;
  margin: calc(var(--cell-pad) + 12px) 0 !important;
}



/* подпись */
.cal-area__label{
  position:absolute;
  left: 12px;
  top: 10px;
  z-index: 2;
  font-size: 12px;
  font-weight: 900;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 24px);
}

/* Скругления: по умолчанию всё круглое, но если это “продолжение” — убираем */
/* если это продолжение — край должен быть прямым, без “лишнего” скругления */
.cal-area:not(.cap-left){
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.cal-area:not(.cap-right){
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.cal-area:not(.cap-top){
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.cal-area:not(.cap-bottom){
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


/* =========================
   Day cells (transparent)
========================= */
/* .cal-day{
  position: relative;
  z-index: 5;
  padding: var(--cell-pad);
} */

.cal-card{
  height: 100%;
  min-height: 110px;
  border-radius: var(--card-radius);

  /* полупрозрачная карточка, чтобы был виден фон */
  background: rgba(255,255,255,0.28);

  /* убираем “белую рамку”, оставляем очень мягкий контур */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  overflow: hidden;

  padding: 10px;
}

/* today */
/* .cal-day.is-today .cal-card{
  box-shadow: inset 0 0 0 2px rgba(160,120,255,0.55);
} */

/* out-of-month */
/* .cal-day.is-out .cal-card{
  opacity: .55;
} */

/* week head/body text */
.week-day__date{ font-weight:850; font-size:12px; opacity:.9; }
.week-day__body{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }

/* month num/pills */
.month-day__num{
  font-weight: 800;
  font-size: 12px;
  opacity: .75;
}
.month-day__pills{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}

/* pills */
.pill{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  background:rgba(255,255,255,0.20);
}
.pill--hw{ border-left:3px solid rgba(255,220,90,0.9); }

/* =========================
   Range selection (teacher drag)
========================= */
.js-cal-day{ cursor: pointer; }

.js-cal-day.is-in-range .cal-card{
  background: rgba(111,44,255,0.10);
  box-shadow: inset 0 0 0 2px rgba(111,44,255,0.22);
}
.js-cal-day.is-range-start .cal-card,
.js-cal-day.is-range-end .cal-card{
  box-shadow: inset 0 0 0 2px rgba(111,44,255,0.40);
  background: rgba(111,44,255,0.14);
}

/* =========================
   Legend (NOTE)
========================= */
.cal-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.cal-legend__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  font-weight: 800;
}
.cal-legend__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block; 
}

/* =========================
   Mobile
========================= */
@media (max-width: 720px){
  .cal-root{ overflow-x: auto; padding-bottom: 6px; }
  .cal-root .week-cal,
  .cal-root .month-cal{
    min-width: 720px;
  }
}







/* =========================
   Background masks (SVG overlays)
========================= */

.cal-grid-7{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  position: relative;
}

/* слой с svg поверх грида (но под карточками дней) */
.cal-overlays{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events: none;
}

.cal-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.cal-overlay text{
  font-size:12px;
  font-weight:900;
  opacity:.85;
  dominant-baseline:hanging;
}

/* сами карточки дней выше */
.cal-day{
  position: relative;
  z-index: 5;
  padding: var(--cell-pad);
}




/* легенда */
.cal-legend__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
}

.cal-legend__item.is-hl{
  background: rgba(0,0,0,.06);
}

.cal-legend__del{
  display:none;
  width:22px;
  height:22px;
  border-radius:999px;
  border:0;
  background: rgba(0,0,0,.08);
  cursor:pointer;
  line-height:1;
}

.cal-legend__item.is-picked .cal-legend__del{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* подсветка обычных div/a областей */
.cal-area.is-hl{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: -2px;
}

/* если у тебя SVG-маски: подсветка path */
.cal-overlay{ pointer-events:none; }
.cal-overlay path{ pointer-events:auto; cursor:pointer; }
.cal-overlay path.is-hl{
  stroke: rgba(0,0,0,.35);
  stroke-width: 2;
}

.cal-overlay path.is-hl{
  stroke: rgba(0,0,0,.45);
  stroke-width: 2;
  opacity: 0.22;
}


/* =========================
   Homework pill (calendar)
========================= */
.hw-pill{
  /* задаются из шаблона:
     --p: 50%;
     --pnum: 50;
  */
  --p: 0%;
  --pnum: 0;

  /* плавный переход: 0% = red (0deg), 50% = yellow (60deg), 100% = green (120deg) */
  --fill: hsl(calc(var(--pnum) * 1.2), 85%, 45%);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  text-decoration: none;
  color: inherit;

  background: rgba(255,255,255,0.20);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);

  overflow: hidden;
}

.hw-pill::before{
  content:"";
  position:absolute;
  inset:0;
  width: var(--p);
  background: var(--fill);
  opacity: 0.28;
  z-index: 0;
}

.hw-pill:hover::before{ opacity: 0.34; }
.hw-pill:hover{ box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); }

.hw-pill__text{
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 850;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.hw-pill__pct{
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 22px;
  min-width: 36px;
  padding: 0 8px;

  border-radius: 999px;

  background: rgba(255,255,255,0.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);

  font-size: 12px;
  font-weight: 900;
}