/* ============================================================
   static/css/bell.css — НОВЫЙ ФАЙЛ (Этап 6 · колокольчик ученика)
   Подключается в base.html, но срабатывает только там, где есть .bell
   (шапка ученика). Pico оформляет <details> как аккордеон со стрелкой —
   всё это здесь снимается селекторами тяжелее его правил (D-62).
   ============================================================ */

/* Окно должно лечь поверх листа страницы. :has() — чтобы правило
   касалось только шапки с колокольчиком, а не шапки учителя. */
header.site:has(.bell){ overflow:visible; z-index:40; }

.pico header.site .bell{
  position:relative; display:inline-block;
  margin:0 .1rem 0 auto; padding:0; border:0; background:none;
}
.pico header.site .bell > summary{
  position:relative; display:inline-grid; place-items:center;
  width:2.1rem; height:2.1rem; margin:0; padding:0;
  list-style:none; cursor:pointer; line-height:1;
  color:var(--pico-muted-color);
  border:1px solid transparent; border-radius:10px;
}
.pico header.site .bell > summary::-webkit-details-marker{ display:none; }
.pico header.site .bell > summary::after{ display:none; content:none; }
.pico header.site .bell > summary:hover,
.pico header.site .bell[open] > summary{ color:var(--aa-accent); border-color:var(--aa-hair); }
.bell__icon{ width:1.25rem; height:1.25rem; }

.bell__badge{
  position:absolute; top:-.3rem; right:-.35rem;
  min-width:1.1rem; height:1.1rem; padding:0 .28rem;
  border-radius:999px; background:var(--aa-accent); color:#fff;
  font-size:.66rem; font-weight:700; line-height:1.1rem; text-align:center;
}
.bell__badge--overdue{ background:var(--aa-wait); }

.bell__panel{
  position:absolute; right:0; top:calc(100% + .45rem); z-index:80;
  width:min(22rem, calc(100vw - 1rem));
  /* Сдвиг внутрь экрана считает bell.js (translateX): окно отсчитывается
     от внутреннего блока <details>, и CSS не может привязать его к краям
     шапки — проверено в Chromium, offsetParent остаётся DETAILS. */
  padding:.5rem; border-radius:14px;
  background:var(--pico-card-background-color, #fff);
  border:1px solid var(--aa-hair);
  box-shadow:0 18px 40px -18px rgba(16,24,40,.45);
  text-align:left;
}
.pico .bell__head{
  margin:.1rem .35rem .45rem; font-size:.7rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--pico-muted-color);
}
.pico header.site .bell__item{
  display:block; margin:0 0 .35rem; padding:.5rem .6rem;
  border-radius:10px; border-left:3px solid var(--aa-accent);
  background:rgba(var(--aa-accent-rgb), .07);
  color:var(--pico-color); text-decoration:none; font-size:.85rem;
}
.pico header.site .bell__item:last-child{ margin-bottom:0; }
.pico header.site .bell__item:hover{ background:rgba(var(--aa-accent-rgb), .14); color:var(--pico-color); }
.pico header.site .bell__item.is-overdue{ border-left-color:var(--aa-wait); background:var(--aa-wait-bg); }
.bell__title{ display:block; font-weight:600; line-height:1.3; }
.bell__meta, .bell__due{ display:block; font-size:.76rem; line-height:1.35; color:var(--pico-muted-color); }
.is-overdue .bell__due{ color:var(--aa-wait); font-weight:600; }
.pico .bell__empty{ margin:.3rem .35rem .4rem; font-size:.85rem; color:var(--pico-muted-color); }