/* Расписание занятий — общий стиль. Один файл на весь сайт, кешируется. */

:root{
  --paper:#eef1f5;
  --card:#fff;
  --ink:#1a2230;
  --ink-2:#5d6a7b;
  --line:#d5dce5;
  --accent:#2b44c7;
  --accent-rgb:43,68,199;
  --mark:#ffd24a;
  --now:#2b44c7;
  --now-rgb:43,68,199;
  --change:#99cc00;
  --radius:10px;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Roboto Mono",Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}

/* Тёмная тема: по настройке системы, если человек не выбрал светлую вручную. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){--paper:#12161d;--card:#191f29;--ink:#e7ecf3;--ink-2:#94a2b4;
    --line:#2b3441;--accent:#8b9bff;--accent-rgb:139,155,255;--change:#a8dd2e;
    --now:#ffd24a;--now-rgb:255,210,74;color-scheme:dark}
}
/* ...и по кнопке, независимо от настройки системы. */
:root[data-theme=dark]{--paper:#12161d;--card:#191f29;--ink:#e7ecf3;--ink-2:#94a2b4;
  --line:#2b3441;--accent:#8b9bff;--accent-rgb:139,155,255;--change:#a8dd2e;
    --now:#ffd24a;--now-rgb:255,210,74;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--sans)}
.wrap{max-width:58rem;margin:0 auto;padding:clamp(1rem,3vw,2.5rem) clamp(.9rem,3vw,2rem) 3rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* Шапка */
.top{display:flex;align-items:center;gap:clamp(.8rem,2.5vw,1.3rem);margin-bottom:1.3rem}
.top__text{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem .7rem}
.eyebrow{flex:1 1 100%;margin:0;font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink-2)}
.top h1{flex:1 1 100%;margin:.15rem 0 .35rem;font-size:clamp(1.7rem,1.1rem + 2.4vw,2.6rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.05}

/* Герб: ссылка на основной сайт, вокруг — расходящееся кольцо.
   Картинка задана фоном, а не тегом img: браузер скачивает только тот файл,
   правило которого сработало, поэтому вторая версия герба не грузится. */
.badge{position:relative;flex:none;display:block;border-radius:50%;
  width:clamp(52px,11vw,74px);height:clamp(52px,11vw,74px);
  background:url(/gerb-w.png) center/contain no-repeat;
  transition:transform .18s ease}
:root[data-theme=dark] .badge{background-image:url(/gerb-b.png)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .badge{background-image:url(/gerb-b.png)}
}
.badge::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  animation:pulse-gerb 3.6s ease-in-out infinite}
@keyframes pulse-gerb{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.30)}
  50%{box-shadow:0 0 0 18px rgba(var(--accent-rgb),0)}
}
.badge:hover{transform:scale(1.04)}

/* Переключатель темы */
.theme{flex:none;width:34px;height:34px;padding:0;cursor:pointer;
  display:grid;place-items:center;
  background:var(--card);color:var(--ink-2);
  border:1px solid var(--line);border-radius:50%;
  transition:color .15s ease,border-color .15s ease}
.theme:hover{color:var(--ink);border-color:var(--ink-2)}
.theme svg{width:17px;height:17px;display:none}
.theme[data-icon=moon] .theme__moon,
.theme[data-icon=sun] .theme__sun{display:block}
.stamp{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);background:var(--card);
  border:1px solid var(--line);border-radius:99px;padding:.2rem .7rem;white-space:nowrap}
/* Метки идут отдельной строкой и переносятся: без этого три штуки склеиваются
   в одну непрерывную строку и уезжают за правый край телефона. */
#stamps{flex:1 1 100%;min-width:0;display:flex;flex-wrap:wrap;gap:.35rem .5rem}

/* Кнопка возврата. Нужна прежде всего киоску, где нет кнопок браузера,
   поэтому цель крупная — 44px в высоту. */
.back{display:inline-flex;align-items:center;gap:.45rem;
  margin-bottom:.8rem;padding:.6rem 1rem .6rem .8rem;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:99px;
  font:600 .9rem var(--sans);cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease}
.back:hover{border-color:var(--ink-2);background:color-mix(in srgb,var(--accent) 5%,var(--card))}
.back:active{transform:translateY(1px)}
.back[hidden]{display:none}
.back svg{width:16px;height:16px;flex:none;color:var(--ink-2)}

/* Выбор: два выпадающих списка на <details>, без JS.
   Сама панель без фона и рамки: карточка вокруг карточек давала третий
   слой того же белого, и панель сливалась с таблицей расписания. */
.picker{position:relative;z-index:10;display:grid;gap:.7rem;margin-top:.2rem}
@media (min-width:44rem){.picker{grid-template-columns:1fr auto 1fr;align-items:center}}

.drop{position:relative;min-width:0}
/* Поля выбора — единственное на странице, что нажимают: акцентный контур
   отделяет их от карточек расписания, которые только читают. */
.drop summary{list-style:none;cursor:pointer;display:grid;gap:.15rem;
  background:var(--card);border:1px solid var(--accent);border-radius:8px;
  padding:.65rem 2.4rem .65rem .85rem;position:relative;
  transition:border-color .15s ease,box-shadow .15s ease}
.drop summary::-webkit-details-marker{display:none}
.drop summary::after{content:"";position:absolute;right:1rem;top:calc(50% - .35rem);
  width:.5rem;height:.5rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .15s ease}
.drop[open] summary::after{transform:rotate(-135deg);top:calc(50% - .1rem)}
.drop summary:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.drop[open] summary{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.field__label{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-2)}
.drop__value{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop--empty{border:1px dashed var(--line);border-radius:8px;padding:.6rem .85rem;display:grid;gap:.15rem}
.drop--empty .drop__value{font-weight:400;color:var(--ink-2)}

.drop__panel{position:absolute;left:0;right:0;top:calc(100% + .35rem);z-index:30;
  max-height:min(60vh,26rem);overflow:auto;overscroll-behavior:contain;
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 12px 28px rgba(16,24,40,.14)}
@media (prefers-color-scheme:dark){.drop__panel{box-shadow:0 12px 28px rgba(0,0,0,.5)}}
.drop__list{list-style:none;margin:0;padding:.3rem}
.drop__section{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-2);padding:.55rem .7rem .25rem}
.drop__list a{display:block;padding:.45rem .7rem;border-radius:6px;
  color:inherit;text-decoration:none;font-size:.94rem}
.drop__list a:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.drop__list a[aria-current]{background:var(--accent);color:#fff;font-weight:600}

.divider{margin:0;text-align:center;font-family:var(--mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2)}
/* Когда поля встают друг под друга, «или» и так очевидно из их порядка,
   а строку по вертикали занимает — на узком экране убираем. */
@media (max-width:43.99rem){.divider{display:none}}

/* Дни */
.schedule{margin-top:1.9rem}
.day{margin-bottom:1.7rem}
/* Шапка таблицы: тот же фон, что у пар, и общий с ними верхний край */
.day__head{position:sticky;top:0;z-index:2;background:var(--card);margin:0;
  padding:.55rem .9rem;border-bottom:1px solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0;
  display:flex;align-items:baseline;gap:.6rem}
/* Маркер дня: та же точка, что у пар. Медленно «дышит» — не кольцом,
   как идущая пара, чтобы эти два знака не путались. */
.day__head::before{content:"";flex:none;align-self:center;
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:breathe-day 4.5s ease-in-out infinite}
@keyframes breathe-day{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.3);opacity:1}
}
.day__name{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.day__date{margin-left:auto;font-family:var(--mono);font-size:.76rem;color:var(--ink-2)}

/* Пара. Строка — один блок: фон и границы на ней самой, а колонки делит
   тонкая линия, а не полоса фона страницы между ними. */
.lesson{display:grid;grid-template-columns:5.4rem 1fr;background:var(--card);
  border-top:1px solid var(--line);transition:background .15s ease}
@media (min-width:44rem){.lesson{grid-template-columns:6.6rem 1fr}}
.lesson:first-of-type{border-top:0}
.lesson:last-of-type{border-bottom:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius)}
.lesson:hover{background:color-mix(in srgb,var(--accent) 5%,var(--card))}
.slot{margin:0;text-align:right;padding:.9rem .7rem .8rem;font-family:var(--mono);
  line-height:1.35;border-right:1px solid var(--line)}
.lesson:last-of-type .slot{border-bottom-left-radius:var(--radius)}
.slot__no{display:block;font-size:.7rem;color:var(--ink-2)}
.slot__time{display:block;font-size:.82rem;font-variant-numeric:tabular-nums}
.slot__time i{display:block;font-style:normal;color:var(--ink-2)}

.lesson__card{position:relative;padding:.8rem 1rem}
/* точка сидит на разделительной линии — отметка на шкале времени */
.lesson__card::before{content:"";position:absolute;left:-4px;top:1.05rem;
  width:7px;height:7px;border-radius:50%;background:var(--line)}
.lesson:hover .lesson__card::before{background:var(--accent)}

.subject{margin:0 0 .3rem;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.meta{margin:.15rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem;
  font-family:var(--mono);font-size:.78rem;color:var(--ink-2)}
.who-name{color:var(--ink);font-weight:500}
.room{white-space:nowrap}
.muted{font-style:italic}
.tag{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;
  padding:.1rem .4rem;border-radius:4px;background:var(--accent);color:#fff}

/* Окно между парами: пунктирный разделитель вместо сплошного */
.lesson--free .slot{border-right-style:dashed}
.lesson--free:hover{background:var(--card)}
.subject--free{font-weight:500;color:var(--ink-2)}

/* Изменение: в выгрузке такая ячейка залита зелёным */
/* Контур рисуем outline, а не рамкой: соседние строки делят между собой
   одну границу, и рамкой замкнутый прямоугольник не получится. */
.lesson--changed{border-color:var(--change);
  outline:1px solid var(--change);outline-offset:-1px;
  animation:pulse-change 3.2s ease-in-out infinite}
.lesson--changed .slot{border-right-color:var(--change)}
/* у окна контур пунктирный — как и его разделитель */
.lesson--changed.lesson--free{outline-style:dashed}
.lesson--changed .lesson__card::before{background:var(--change)}
.tag--change{background:var(--change);color:#1d2b06}
@keyframes pulse-change{
  0%,100%{background:color-mix(in srgb,var(--change) 8%,var(--card));
    border-color:color-mix(in srgb,var(--change) 55%,var(--line));
    outline-color:color-mix(in srgb,var(--change) 55%,var(--line))}
  50%{background:color-mix(in srgb,var(--change) 26%,var(--card));
    border-color:var(--change);outline-color:var(--change)}
}

/* Заочное отделение: пара пришла из расписания сессии, а не из недельной
   выгрузки. Метка серая — синий и зелёный уже заняты выбором и изменением. */
.tag--distance{background:var(--ink-2);color:var(--card)}
.lesson--distance .lesson__card::before{background:var(--ink-2)}

/* Идёт сейчас: расходящееся кольцо у точки. Синее на светлой теме,
   жёлтое на тёмной — на своём фоне каждое заметнее. */
.lesson--now .lesson__card::before,
.lesson--now .lesson__card:hover::before{background:var(--now);
  animation:pulse-dot 3.6s ease-in-out infinite}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--now-rgb),.55)}
  50%{box-shadow:0 0 0 10px rgba(var(--now-rgb),0)}
}

/* Пусто */
.free{margin:0;padding:.9rem;text-align:center;font-size:.88rem;color:var(--ink-2);
  background:var(--card);border:1px dashed var(--line);border-radius:var(--radius)}
.day__head + .free{font-weight:600;border-top:0;border-top-left-radius:0;border-top-right-radius:0}
.free--week{padding:2.5rem 1rem}

/* Подвал */
.foot{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line);
  display:grid;gap:.4rem;font-size:.78rem;color:var(--ink-2)}
.note{margin:0;border-left:3px solid var(--mark);padding-left:.7rem}
.stamp-line{margin:0;font-family:var(--mono)}

@media (prefers-reduced-motion:reduce){
  /* «*» не покрывает псевдоэлементы, а точки нарисованы именно ими */
  *,*::before,*::after{transition:none!important;animation:none!important}
  /* анимация выключена — заливку задаём статично, иначе изменение потеряется */
  .lesson--changed{background:color-mix(in srgb,var(--change) 18%,var(--card))}
}

@media print{
  :root{--paper:#fff;--card:#fff;--ink:#000;--ink-2:#444;--line:#bbb}
  /* герб теперь фоновая картинка, а фоны браузеры по умолчанию не печатают —
     на бумаге от него остался бы пустой кружок, поэтому убираем */
  .picker,.foot,.badge,.theme,.back{display:none}
  .day{break-inside:avoid}
  .day__head{position:static}
}

/* Поиск внутри списка */
.drop__search{position:sticky;top:0;z-index:1;display:block;width:calc(100% - .6rem);
  margin:.3rem;padding:.5rem .7rem;font:400 .92rem var(--sans);color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:6px}
.drop__search::placeholder{color:var(--ink-2)}
.drop__list.is-filtered .drop__section{display:none}
.drop__list li[hidden]{display:none}

/* Состояния загрузки и ошибки */
.free__sub{display:block;margin-top:.4rem;font-family:var(--mono);font-size:.74rem;opacity:.75}