/* Вид системы: лёгкий, «как переписка и календарь», поверх klan.css.
 *
 * Файл отдельный и подключён ПОСЛЕ klan.css по одной причине: пока окна экранов
 * дописывают свои блоки в конец klan.css, править его значило бы сталкиваться
 * с ними в одном файле. Поэтому здесь нет разметки, только селекторы по уже
 * существующим классам и элементам, а блоки окон (.kal-*, .zay-*, .abn-*,
 * .dng-*, .loy-*, .seg-*, .nas-*) не переопределяются вовсе — они берут новый
 * вид через переменные :root ниже, названные так же, как в klan.css.
 * Слияние с klan.css — отдельным шагом, когда окна закончат.
 *
 * Шрифты — те же файлы, что объявлены в klan.css (@font-face там); новых
 * начертаний и внешних адресов здесь нет.
 */

/* --- переменные ----------------------------------------------------------- */

:root {
  /* Нейтральные — холодные серые. */
  --fon: #f4f4f5;
  --kartochka: #fff;
  --sinii: #18181b;          /* основной текст; имя осталось от прежней палитры */
  /* Тихий серый темнее ориентира #71717a на полтона: #71717a на фоне #f4f4f5
   * даёт 4.40:1, а подписи под заголовком стоят именно на фоне. */
  --seryi: #66666e;
  --razdelitel: #e4e4e7;
  /* Акцент — оранжевый КЛАНа, взятый на тон глубже фирменного #ec652b. Белый
   * текст на #ec652b даёт 3.25:1, а оранжевым залиты кнопки с белой надписью
   * 15px и пункт меню — это обычный, не крупный текст, ему нужно 4.5:1.
   * Фирменный тон остался там, где на нём нет текста: кольцо фокуса, отметки. */
  --akcent: #c94a12;
  --akcent-yarkiy: #ec652b;
  --akcent-8: #fcefe8;       /* выделение строки: акцент ~8% на белом */
  --akcent-10: #fbeae1;      /* вторичная кнопка: акцент ~10% */
  --akcent-tekst: #b23f0c;   /* акцентный текст на светлой заливке, 5.2:1 */
  --dengi: #127262;
  --radius: 10px;
  --radius-karta: 12px;
  --ten: 0 1px 2px rgba(0, 0, 0, .06);
  --navedenie: #f4f4f5;
  --pole: #f4f4f5;

  /* Статусы — приглушённые: фон светлый, текст тёмный того же тона. */
  --uspeh: #15803d;       --uspeh-fon: #eef8f1;
  --preduprezhdenie: #92400e; --preduprezhdenie-fon: #fdf6e7;
  --oshibka: #b42318;     --oshibka-fon: #fdf0ef;

  /* Числа — тем же Inter с табличными цифрами (правило ниже на body).
   * Моноширинный рядом с текстом выглядел «кодом», а в расписании и суммах
   * это не код: разряды выравнивает `tabular-nums`, и шрифт при этом один.
   * JetBrains Mono остаётся в --kod: номер запроса и подобное сверяют посимвольно. */
  --chisla: var(--tekst);
  --kod: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
    Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Календарь: сетка, часы, «сегодня» и пастельная палитра направлений с
   * тёмным текстом. Сам календарь ведёт окно 1 — здесь только переменные. */
  --kal-liniya-chasa: #e4e4e7;
  --kal-liniya-polchasa: #f0f0f2;
  --kal-segodnya-fon: #fff7f2;
  --kal-segodnya: var(--akcent-tekst);
  --kal-seychas: #d92d20;
  --kal-tekst-bloka: #27272a;
  --napravlenie-1: #dbe8fb;  --napravlenie-1-kraj: #3b6fb6;
  --napravlenie-2: #dcf1e4;  --napravlenie-2-kraj: #2f8a5b;
  --napravlenie-3: #fde9d4;  --napravlenie-3-kraj: #c2701f;
  --napravlenie-4: #ebe1f8;  --napravlenie-4-kraj: #7b4fb5;
  --napravlenie-5: #fbe0e7;  --napravlenie-5-kraj: #b8435f;
  --napravlenie-6: #d9f0f3;  --napravlenie-6-kraj: #2b8795;
  --napravlenie-7: #f5efcc;  --napravlenie-7-kraj: #968521;
  --napravlenie-8: #e6e9ee;  --napravlenie-8-kraj: #5d6c80;
  --napravlenie-9: #f8e3da;  --napravlenie-9-kraj: #a9573a;
  --napravlenie-10: #e2ecd6; --napravlenie-10-kraj: #5d823b;
  /* Ещё два — палитра типов событий и залов в двенадцать цветов (16.10). */
  --napravlenie-11: #fdf1c7; --napravlenie-11-kraj: #a87d00;
  --napravlenie-12: #e3e5fa; --napravlenie-12-kraj: #4b53b8;

  --perehod: 140ms ease;
  --shirina-paneli: 240px;
}

/* --- текст ---------------------------------------------------------------- */

body {
  background: var(--fon);
  color: var(--sinii);
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 23px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin: 0 0 6px; }
h2 { font-size: 16px; line-height: 1.3; }
.podpis { font-size: 14px; color: var(--seryi); }
.tiho, .poyasnenie { color: var(--seryi); }

a { color: var(--sinii); transition: color var(--perehod); }
main a:not([class]):hover, .stroka a:hover { color: var(--akcent-tekst); text-decoration: none; }

/* Длинные имена и слова не распирают ячейку и карточку: ломаются по месту
 * (`overflow-wrap`), но не по слогам. Перенос по правилам языка на телефоне
 * резал обычные слова в узких ячейках — «на-личные», «при-ход» — и читался как
 * опечатка (штаб, 17.10, 22:28: «ничего не переносится по слогам»). */
.karta, .stroka, .tablica td, .zay-karta, .soobshchenie, .beda, .prinyato {
  overflow-wrap: anywhere;
  hyphens: manual;
}

/* Обязательное поле помечается звёздочкой у подписи — само, по `required` у
 * поля, если подпись стоит прямо перед ним. Где подпись обнимает поле или
 * стоит не вплотную, звёздочку ставит шаблон: `<span class="obyazatelno">*</span>`.
 * На входе не помечаем: там обязательно всё, и звёздочки были бы шумом. */
label:has(+ :is(input, select, textarea):required):not(.vhod label)::after {
  content: " *";
  color: var(--akcent);
  font-weight: 600;
}
.obyazatelno { margin-left: 2px; color: var(--akcent); font-weight: 600; }

.beda .nomer, .nomer-zaprosa, .nomer-zaprosa .chislo { font-family: var(--kod); }

/* --- каркас: боковая панель ----------------------------------------------- */

/* Сетка вешается на body только там, где есть шапка: у страницы входа её нет,
 * и та же сетка поставила бы форму входа в узкую левую колонку. */
body:has(> .shapka) {
  display: grid;
  grid-template-columns: var(--shirina-paneli) minmax(0, 1fr);
  min-height: 100vh;
}

.shapka {
  /* Неподвижная, во всю высоту окна. `sticky` в ячейке сетки держалась, пока
   * строка сетки не кончалась, и на длинной странице панель обрывалась. Левая
   * колонка сетки остаётся местом под неё; `main` поставлен во вторую явно. */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: var(--shirina-paneli);
  /* `auto`, а не число: у klan.css здесь 56px от верхней полосы, и без сброса
   * панель схлопывалась в неё, пряча меню. Высоту задают top и bottom. */
  height: auto;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-items: start;
  gap: 0;
  padding: 18px 12px 14px;
  background: var(--kartochka);
  border-bottom: none;
  border-right: 1px solid var(--razdelitel);
  overflow-y: auto;
}
.shapka .znak {
  padding: 4px 12px 18px;
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--sinii);
}
.shapka nav { display: flex; flex-direction: column; gap: 2px; }
.shapka nav a,
.shapka .kto,
.shapka form button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: #3f3f46;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--perehod), color var(--perehod);
}
.shapka nav a:hover,
a.kto:hover,
.shapka form button:hover { background: var(--navedenie); color: var(--sinii); text-decoration: none; }
.shapka nav a.zdes { background: var(--akcent); color: #fff; font-weight: 600; }
.shapka nav a.zdes:hover { background: var(--akcent); color: #fff; }

/* Иконка — маской из файла, красится цветом текста пункта: у активного белая,
 * у остальных серая. Привязка по адресу, потому что иной метки у пункта нет.
 * У пункта, которому иконку ещё не нарисовали, — нейтральная точка.
 *
 * У адреса иконки — отпечаток содержимого (`?v=`, sha256, 12 знаков, как у
 * `statika()`). Без него браузер держал старую иконку или прежний отказ после
 * каждой выкатки: штаб 17.10 видел «Журнал» без значка при верном коде. Поменял
 * иконку — поменяй отпечаток; расхождение ловит
 * `test_menyu_poryadok::test_otpechatok_ikonki_po_soderzhimomu` и печатает
 * верный. Новый адрес меняет и сам vid.css, а у него свой отпечаток в основе. */
.shapka nav a::before,
.shapka .kto::before,
.shapka form button::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url('/static/ikonki/punkt.svg?v=97bd731159fb') center / contain no-repeat;
  mask: url('/static/ikonki/punkt.svg?v=97bd731159fb') center / contain no-repeat;
  opacity: .85;
}
.shapka nav a.zdes::before { opacity: 1; }
.shapka nav a[href^="/segodnya"]::before { -webkit-mask-image: url('/static/ikonki/segodnya.svg?v=293aab366616'); mask-image: url('/static/ikonki/segodnya.svg?v=293aab366616'); }
.shapka nav a[href^="/raspisanie"]::before { -webkit-mask-image: url('/static/ikonki/raspisanie.svg?v=e39ea2a9414a'); mask-image: url('/static/ikonki/raspisanie.svg?v=e39ea2a9414a'); }
.shapka nav a[href^="/zayavki"]::before { -webkit-mask-image: url('/static/ikonki/zayavki.svg?v=f6a50be2800a'); mask-image: url('/static/ikonki/zayavki.svg?v=f6a50be2800a'); }
.shapka nav a[href^="/zadachi"]::before { -webkit-mask-image: url('/static/ikonki/zadachi.svg?v=56c863fbbb68'); mask-image: url('/static/ikonki/zadachi.svg?v=56c863fbbb68'); }
.shapka nav a[href^="/lyudi"]::before { -webkit-mask-image: url('/static/ikonki/lyudi.svg?v=b5c43be49bde'); mask-image: url('/static/ikonki/lyudi.svg?v=b5c43be49bde'); }
.shapka nav a[href^="/abonementy"]::before { -webkit-mask-image: url('/static/ikonki/abonementy.svg?v=c3e733a7d199'); mask-image: url('/static/ikonki/abonementy.svg?v=c3e733a7d199'); }
.shapka nav a[href^="/dengi"]::before,
.shapka nav a[href^="/oplaty"]::before { -webkit-mask-image: url('/static/ikonki/dengi.svg?v=ce00231492de'); mask-image: url('/static/ikonki/dengi.svg?v=ce00231492de'); }
.shapka nav a[href^="/loyalnost"]::before { -webkit-mask-image: url('/static/ikonki/loyalnost.svg?v=916e11e2e8ee'); mask-image: url('/static/ikonki/loyalnost.svg?v=916e11e2e8ee'); }
.shapka nav a[href^="/perepiska"]::before { -webkit-mask-image: url('/static/ikonki/perepiska.svg?v=5c9911256635'); mask-image: url('/static/ikonki/perepiska.svg?v=5c9911256635'); }
.shapka nav a[href^="/otchety"]::before { -webkit-mask-image: url('/static/ikonki/otchety.svg?v=541e9dfc1a1c'); mask-image: url('/static/ikonki/otchety.svg?v=541e9dfc1a1c'); }
.shapka nav a[href^="/nastroyk"]::before { -webkit-mask-image: url('/static/ikonki/nastroyki.svg?v=fdb1641a0f60'); mask-image: url('/static/ikonki/nastroyki.svg?v=fdb1641a0f60'); }
.shapka nav a[href^="/kassa"]::before { -webkit-mask-image: url('/static/ikonki/kassa.svg?v=49ea97ff1480'); mask-image: url('/static/ikonki/kassa.svg?v=49ea97ff1480'); }
.shapka nav a[href^="/rashody"]::before { -webkit-mask-image: url('/static/ikonki/rashody.svg?v=44d544d01639'); mask-image: url('/static/ikonki/rashody.svg?v=44d544d01639'); }
.shapka nav a[href^="/zhurnal"]::before { -webkit-mask-image: url('/static/ikonki/zhurnal.svg?v=5aeb98686000'); mask-image: url('/static/ikonki/zhurnal.svg?v=5aeb98686000'); }
.shapka nav a[href^="/kabinet"]::before { -webkit-mask-image: url('/static/ikonki/kabinet.svg?v=d200e8d9ca63'); mask-image: url('/static/ikonki/kabinet.svg?v=d200e8d9ca63'); }
.shapka nav a[href="/kabinet/pedagogi"]::before { -webkit-mask-image: url('/static/ikonki/pedagogi.svg?v=9d07482641e1'); mask-image: url('/static/ikonki/pedagogi.svg?v=9d07482641e1'); }
.shapka nav a[href="/kabinet/telegram"]::before { -webkit-mask-image: url('/static/ikonki/telegram.svg?v=c3b44ec50d2a'); mask-image: url('/static/ikonki/telegram.svg?v=c3b44ec50d2a'); }

/* Кнопка меню телефона и её флажок на широком экране не нужны. `display: none`
 * снимает их и с сетки панели: ряды сетки (знак, меню, логин, выход) не
 * сдвигаются. */
.menyu-flag, .menyu-knopka { display: none; }

/* Логин и «Выйти» — внизу панели, строками того же ряда, что меню. */
.shapka .kto { margin-top: 12px; border-top: 1px solid var(--razdelitel);
               border-radius: 0 0 var(--radius) var(--radius); padding-top: 14px;
               white-space: normal; overflow-wrap: anywhere; color: var(--seryi); font-size: 14px; }
.shapka .kto::before { -webkit-mask-image: url('/static/ikonki/lyudi.svg?v=b5c43be49bde'); mask-image: url('/static/ikonki/lyudi.svg?v=b5c43be49bde'); }
a.kto:hover { border-radius: var(--radius); }
.shapka form { margin: 0; }
.shapka form button {
  width: 100%;
  justify-content: flex-start;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--seryi);
  cursor: pointer;
}
.shapka form button::before { -webkit-mask-image: url('/static/ikonki/vyhod.svg?v=810c492ffcc2'); mask-image: url('/static/ikonki/vyhod.svg?v=810c492ffcc2'); }

main {
  width: 100%;
  max-width: 1148px;              /* ~1100px содержимого + поля */
  margin: 0 auto;
  padding: 28px 24px 64px;
  min-width: 0;
}
/* Календарь — во всю ширину: сетке недели тесно в полосе чтения. */
main:has(.kal-telo) { max-width: none; }
body:has(> .shapka) > main { grid-column: 2; }

/* Плашка демо-стенда (`templates/_demo.html`): полоса во всю ширину над всем.
 * На широком экране с панелью — первая строка сетки через обе колонки высотой
 * 32px (20 + 6·2), и неподвижная панель опускается ровно на неё; строка
 * содержимого берёт остаток, иначе сетка растянула бы и строку плашки. */
.demo-plashka {
  padding: 6px 16px;
  background: #b42318;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
body:has(> .shapka):has(> .demo-plashka) { grid-template-rows: auto 1fr; }
body:has(> .shapka) > .demo-plashka {
  grid-column: 1 / -1;
  height: 32px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body:has(> .demo-plashka) > .shapka { top: 32px; }
@media (max-width: 899px) {
  /* Узкий экран: панель в потоке, плашка — обычная полоса над ней и переносится. */
  body:has(> .shapka) > .demo-plashka { height: auto; white-space: normal; }
}

/* Узкий экран: панель становится верхней полосой с прокруткой вбок. */
@media (max-width: 899px) {
  body:has(> .shapka) { display: block; }
  /* Полоса не липкая: липкая панель занятия (`.kal-panel`, top 16px) уезжала
   * бы под неё, а высоту полосы окно 1 знать не обязано. */
  .shapka {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-right: none;
    border-bottom: 1px solid var(--razdelitel);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .shapka::-webkit-scrollbar { display: none; }
  .shapka .znak { padding: 0 8px 0 4px; font-size: 14px; }
  .shapka nav { flex-direction: row; gap: 2px; flex: none; }
  .shapka nav a, .shapka .kto, .shapka form button {
    min-height: 40px; padding: 6px 10px; gap: 6px; font-size: 14px;
  }
  .shapka nav a::before, .shapka .kto::before, .shapka form button::before { width: 18px; height: 18px; }
  .shapka .kto { margin: 0 0 0 8px; border-top: none; padding-top: 6px; border-radius: var(--radius);
                flex: none; white-space: nowrap; }
  .shapka form button { width: auto; }
}

/* Телефон: в полосе — знак и кнопка «Меню»; пункты, логин и выход раскрываются
 * под ней сеткой в две колонки по флажку. Флажок не `display: none`, а убран
 * из вида: так он остаётся в порядке обхода с клавиатуры, и рамка фокуса
 * рисуется на кнопке. Цель нажатия — 44 px, по пальцу. */
@media (max-width: 620px) {
  .shapka { flex-wrap: wrap; overflow: visible; padding: 8px 16px; row-gap: 8px; }
  .shapka .znak { flex: 1; }
  .menyu-flag { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
  .menyu-knopka {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
    border: 1px solid var(--razdelitel); border-radius: var(--radius);
    font-size: 15px; color: var(--sinii); cursor: pointer; user-select: none;
  }
  .menyu-knopka::before {
    content: ""; width: 20px; height: 20px; background-color: currentColor;
    -webkit-mask: url('/static/ikonki/menyu.svg?v=812e875ce229') center / contain no-repeat;
    mask: url('/static/ikonki/menyu.svg?v=812e875ce229') center / contain no-repeat;
  }
  .menyu-flag:focus-visible + .menyu-knopka { outline: 2px solid var(--sinii); outline-offset: 2px; }
  .menyu-flag:checked + .menyu-knopka { background: var(--navedenie); }
  .shapka nav, .shapka .kto, .shapka form { display: none; }
  .menyu-flag:checked ~ nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex-basis: 100%;
  }
  .menyu-flag:checked ~ .kto, .menyu-flag:checked ~ form { display: flex; flex: 1 1 40%; margin: 0; }
  .menyu-flag:checked ~ form button { width: 100%; }
  .shapka nav a, .shapka .kto, .shapka form button { min-height: 44px; font-size: 15px; white-space: normal; }
}
@media (max-width: 620px) {
  main { padding: 18px 16px 48px; }
  h1 { font-size: 22px; }
}

/* --- карточки ------------------------------------------------------------- */

.karta {
  border: none;
  border-radius: var(--radius-karta);
  box-shadow: var(--ten);
  padding: 20px 24px;
}
@media (max-width: 620px) { .karta { padding: 16px; } }

/* --- кнопки --------------------------------------------------------------- */

/* Вторичная — по умолчанию: светлая заливка акцента и акцентный текст. */
button,
a.knopkoy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--akcent-10);
  color: var(--akcent-tekst);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--perehod), color var(--perehod), box-shadow var(--perehod);
}
button:hover, a.knopkoy:hover { background: #f9e2d6; border-color: transparent; text-decoration: none; }
button:active, a.knopkoy:active { background: #f4cfbb; }

button.glavnaya { background: var(--akcent); color: #fff; border: none; }
button.glavnaya:hover { background: #b54210; filter: none; }
button.glavnaya:active { background: #a03a0e; }

/* Тихая — только текст. */
button.tihaya {
  min-height: 32px;
  padding: 0 10px;
  background: transparent;
  color: var(--seryi);
  font-weight: 400;
  font-size: 14px;
}
button.tihaya:hover { background: var(--navedenie); color: var(--sinii); }

/* Вторичная явным классом — для кнопки, которую из основной переводят во
 * вторую (например «Пришёл» на «Сегодня»): вид тот же, что у кнопки без класса. */
button.vtorichnaya, a.knopkoy.vtorichnaya { background: var(--akcent-10); color: var(--akcent-tekst); }
button.vtorichnaya:hover, a.knopkoy.vtorichnaya:hover { background: #f9e2d6; }
button.vtorichnaya:active, a.knopkoy.vtorichnaya:active { background: #f4cfbb; }

/* Опасная — отмена, удаление, сгорание: красный текст на светлом. Класс
 * `opasnaya` на кнопке или ссылке-кнопке; пока окна не вывели его в разметку,
 * те же формы узнаются по адресу. Класс сильнее `glavnaya`: опасное действие
 * не бывает оранжевым. */
button.opasnaya, a.knopkoy.opasnaya, button.glavnaya.opasnaya,
form[action$="/otmenit"] button,
form[action$="/otmena"] button,
form[action^="/abonementy/sgoranie"] button {
  background: var(--oshibka-fon);
  color: var(--oshibka);
}
button.opasnaya:hover, button.opasnaya:active,
a.knopkoy.opasnaya:hover, a.knopkoy.opasnaya:active,
form[action$="/otmenit"] button:hover,
form[action$="/otmena"] button:hover,
form[action^="/abonementy/sgoranie"] button:hover,
form[action$="/otmenit"] button:active,
form[action$="/otmena"] button:active,
form[action^="/abonementy/sgoranie"] button:active { background: #fbe1df; color: #99190f; }

/* Неактивная сильнее и основной, и опасной: выключенная красная «Сжечь»
 * выглядела бы нажимаемой. */
button[disabled], button[disabled]:hover,
button.glavnaya[disabled], button.opasnaya[disabled], button.glavnaya.opasnaya[disabled] {
  background: var(--fon);
  color: #8e8e96;           /* неактивное — вне требования 4.5:1 (WCAG 1.4.3) */
  cursor: default;
}

/* Кольцо фокуса — клавиатурному пользователю, не мыши; и никогда не `none`. */
:focus-visible { outline: 2px solid var(--akcent-yarkiy); outline-offset: 2px; }
button:focus-visible, a.knopkoy:focus-visible, .shapka a:focus-visible {
  outline: 2px solid var(--akcent-yarkiy);
  outline-offset: 2px;
}

/* --- поля ----------------------------------------------------------------- */

input[type=text], input[type=password], input[type=search], input[type=date],
input[type=number], input[type=time], input[type=datetime-local],
input[type=email], input[type=tel], select, textarea,
.forma select {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--razdelitel);
  border-radius: var(--radius);
  background: var(--kartochka);
  color: var(--sinii);
  font: inherit;
  font-size: 15px;
  transition: background var(--perehod), box-shadow var(--perehod);
}
/* Серая заливка без рамки — только внутри белой карточки. На фоне страницы
 * (выбор периода в отчётах, дата в календаре) такое поле сливается с фоном
 * до невидимости, поэтому там оно белое с рамкой. */
.karta :is(input[type=text], input[type=password], input[type=search], input[type=date],
  input[type=number], input[type=time], input[type=datetime-local], input[type=email],
  input[type=tel], select, textarea),
main > form.forma :is(input[type=text], input[type=search], input[type=date],
  input[type=number], input[type=time], input[type=datetime-local], select, textarea) {
  border-color: transparent;
  background: var(--pole);
}
.karta :is(input, select, textarea):hover,
main > form.forma :is(input, select, textarea):hover { background: #ececef; }
/* Форма, стоящая прямо в `main` без карточки (новое занятие, правка занятия),
 * оформляется карточкой: иначе два десятка полей висят на сером фоне. */
main > form.forma {
  max-width: 560px;
  padding: 24px;
  background: var(--kartochka);
  border-radius: var(--radius-karta);
  box-shadow: var(--ten);
}
@media (max-width: 620px) { main > form.forma { padding: 16px; } }
textarea { min-height: 88px; line-height: 1.45; width: 100%; }
input::placeholder, textarea::placeholder { color: var(--seryi); }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus,
.karta :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus,
main > form.forma :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus {
  outline: none;
  background: var(--kartochka);
  border-color: var(--akcent-yarkiy);
  box-shadow: 0 0 0 2px rgba(236, 101, 43, .25);
}
input[type=checkbox], input[type=radio] { accent-color: var(--akcent); width: 16px; height: 16px; }
/* Выбор причины в строке списка остаётся узким, но той же формы. */
.ryadom select, .karta .ryadom select { min-height: 32px; padding: 4px 8px; font-size: 14px;
                border: none; background: var(--pole); }

.forma label, .vhod label, .period label { font-size: 13px; color: var(--seryi); }

/* Ошибка формы — мягкий красный фон. */
.beda {
  border: none;
  border-radius: var(--radius);
  background: var(--oshibka-fon);
  color: #5c1610;
  padding: 12px 14px;
}
.beda a { color: var(--oshibka); text-decoration: underline; }
.prinyato {
  border: none;
  border-radius: var(--radius);
  background: var(--uspeh-fon);
  color: #14532d;
}

/* --- вход ----------------------------------------------------------------- */

.vhod { max-width: 380px; margin: 12vh auto 48px; padding: 0 16px; }
.vhod .karta { padding: 32px 28px 28px; }
.vhod h1 { letter-spacing: .14em; font-size: 22px; }
.vhod .podpis { margin-bottom: 20px; }
.vhod label { margin: 16px 0 6px; }
.vhod button { width: 100%; margin-top: 24px; }

/* --- строки списков (как список диалогов) --------------------------------- */

/* Строка вытянута до краёв карточки, чтобы подсветка наведения шла от края до
 * края, а разделитель — только под текстом: линия от края режет список на
 * полосы, от текста — отделяет записи. Отступ карточки 24px, на узком 16px. */
/* `.zay-prosrochena` — полоса окна 2 со своим отступом; её не растягиваем. */
.karta > .stroka:not(.zay-prosrochena), .karta > div > .stroka:not(.zay-prosrochena),
#stroki > .stroka:not(.zay-prosrochena) {
  margin: 0 -24px;
  padding: 10px 24px;
}
/* В боковой панели календаря у карточки нет боковых полей — тянуть некуда. */
.kal-panel .karta > .stroka, .kal-panel .karta > div > .stroka { margin: 0; padding: 10px 0; }
.kal-panel .stroka + .stroka { background-size: 100% 1px; background-position: 0 0; }
/* Там же кнопки отметки уходят под имя во всю ширину — предел 45% их сминал. */
.kal-panel .stroka .sboku { max-width: none; }
.stroka {
  align-items: center;
  min-height: 56px;
  gap: 16px;
  border-bottom: none;
  border-radius: 0;
  transition: background-color var(--perehod);
}
.stroka + .stroka {
  background-image: linear-gradient(var(--razdelitel), var(--razdelitel));
  background-repeat: no-repeat;
  background-size: calc(100% - 48px) 1px;
  background-position: 24px 0;
}
.stroka:hover { background-color: var(--navedenie); }
/* Выделенной разметка строку не помечает; ближайшее — строка, в которой
 * сейчас фокус (нажата «Открыть» в переписке). */
.stroka:focus-within { background-color: var(--akcent-8); }
.stroka .glavnoe { min-width: 0; line-height: 1.4; }
/* Первая ссылка строки — имя или заголовок. */
.stroka .glavnoe > a:first-child { font-weight: 600; }
/* Фамилию по слогам не переносим: «Алексан-дровна» читается как опечатка.
 * Длинное имя ломается по месту (overflow-wrap выше), а не по правилам языка. */
.stroka .glavnoe > a:first-child, .tablica td > a:first-child, .tablica td > .avatar + a,
h1, h2, .pusto,
.podpis { hyphens: manual; }
.stroka .glavnoe .tiho, .stroka .glavnoe .poyasnenie { font-size: 14px; }
.stroka .sboku { font-size: 13px; line-height: 1.4; flex: none; max-width: 45%; }
@media (max-width: 620px) {
  .karta > .stroka:not(.zay-prosrochena), .karta > div > .stroka:not(.zay-prosrochena),
  #stroki > .stroka:not(.zay-prosrochena) { margin: 0 -16px; padding: 10px 16px; }
  .stroka + .stroka { background-size: calc(100% - 32px) 1px; background-position: 16px 0; }
  .stroka .sboku { max-width: none; }
}

/* Круг с инициалами — первым элементом строки: `<span class="avatar">ИП</span>`.
 * Цвет один, спокойный: разные цвета по человеку потребовали бы хеша в
 * разметке, а одинаковый круг и так ловит глаз как «здесь человек». Окно,
 * которое захочет различать, ставит `avatar-1…avatar-10` — это палитра
 * направлений, тёмный текст на пастели, контраст от 11.8:1. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--akcent-10);
  color: var(--akcent-tekst);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}
.avatar-1 { background: var(--napravlenie-1); color: var(--kal-tekst-bloka); }
.avatar-2 { background: var(--napravlenie-2); color: var(--kal-tekst-bloka); }
.avatar-3 { background: var(--napravlenie-3); color: var(--kal-tekst-bloka); }
.avatar-4 { background: var(--napravlenie-4); color: var(--kal-tekst-bloka); }
.avatar-5 { background: var(--napravlenie-5); color: var(--kal-tekst-bloka); }
.avatar-6 { background: var(--napravlenie-6); color: var(--kal-tekst-bloka); }
.avatar-7 { background: var(--napravlenie-7); color: var(--kal-tekst-bloka); }
.avatar-8 { background: var(--napravlenie-8); color: var(--kal-tekst-bloka); }
.avatar-9 { background: var(--napravlenie-9); color: var(--kal-tekst-bloka); }
.avatar-10 { background: var(--napravlenie-10); color: var(--kal-tekst-bloka); }
/* В строке с кругом разделитель начинается от текста, а не от круга — как в
 * списке диалогов: 24px поле + 40px круг + 16px зазор. */
.stroka:has(> .avatar) { min-height: 64px; }
.stroka + .stroka:has(> .avatar) {
  background-size: calc(100% - 104px) 1px;
  background-position: 80px 0;
}
/* В панели календаря у карточки нет полей — разделитель от края панели. */
.kal-panel .stroka + .stroka:has(> .avatar) { background-size: 100% 1px; background-position: 0 0; }
/* В таблице круг меньше: строка таблицы плотнее строки списка. */
.tablica .avatar { width: 32px; height: 32px; font-size: 12px; margin-right: 10px; vertical-align: middle; }
@media (max-width: 620px) {
  .stroka + .stroka:has(> .avatar) { background-size: calc(100% - 88px) 1px; background-position: 72px 0; }
  /* На телефоне круг, имя и правая колонка в одну строку не встают: имя
   * сминалось в столбик по слову. Правая колонка уходит под текст, с отступом
   * на круг (40px + зазор 16px), — как подзаголовок в списке диалогов. */
  .stroka:has(> .avatar) { flex-wrap: wrap; row-gap: 2px; }
  .stroka:has(> .avatar) > .glavnoe { flex: 1 1 0; }
  .stroka:has(> .avatar) > .sboku { flex: 1 0 100%; max-width: none; padding-left: 56px; text-align: left; }
  /* В строке без круга имени оставлена хотя бы половина: правая колонка,
   * которая не помещается рядом, переносится целиком, а не сжимает имя. */
  .stroka > .glavnoe { flex: 1 1 180px; }
}

/* Сообщения переписки — тот же разделитель под текстом. */
.soobshchenie { border-bottom-color: var(--razdelitel); }

/* --- метки ---------------------------------------------------------------- */

.metka {
  padding: 2px 9px;
  border: none;
  border-radius: 999px;
  background: var(--fon);
  color: #52525b;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  vertical-align: 1px;
}
.metka.svobodno { background: var(--uspeh-fon); color: var(--uspeh); }
.metka.net-mest { background: #fdf0e7; color: #9a3412; }
.stroka .glavnoe .metka { margin-left: 6px; }

.neprochitano { border-radius: 999px; min-width: 20px; line-height: 20px; }

/* --- таблицы -------------------------------------------------------------- */

/* Липкая шапка: в отчёте за месяц строк больше, чем экран, и без неё
 * столбцы теряют названия на второй прокрутке. Работает сегодня только там,
 * где у предков таблицы нет своей прокрутки: в отчётах на широком экране. В
 * `.zay-tablica` (прокрутка вбок всегда) и на узком экране, где карточке дана
 * прокрутка вбок, шапка остаётся на месте. Линия под шапкой — тенью: при
 * `border-collapse` рамка ячейки вместе с липкой шапкой не едет. */
.tablica th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--kartochka);
  padding: 10px 12px 8px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--seryi);
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--razdelitel);
}
.tablica td { padding: 11px 12px 11px 0; border-bottom-color: #efeff1; vertical-align: top; }
.tablica tbody tr { transition: background-color var(--perehod); }
.tablica tbody tr:hover { background: #fafafa; }
.tablica .k-chislu { font-variant-numeric: tabular-nums; }
.tablica tfoot td { border-top: 1px solid #d4d4d8; font-weight: 600; }
/* На узком экране — прокрутка внутри контейнера, а не всей страницы. */
@media (max-width: 899px) {
  .karta:has(> .tablica), .karta:has(> div > .tablica) { overflow-x: auto; }
}
/* `.tablica.kartochkami` на телефоне: строка — карточка, ячейка — строка с
 * подписью из `data-podpis`. Прокрутка вбок прятала «Входящих» и «Отказов» за
 * край — а ради них экран каналов и открывают. */
@media (max-width: 620px) {
  .tablica.kartochkami, .tablica.kartochkami tbody { display: block; width: 100%; }
  .tablica.kartochkami thead { display: none; }
  /* Кнопка «Ждать: аккаунт клуба через Telegram Business» и выбор подключения
   * в одну строку раздвигали карточку за край экрана. */
  .tablica.kartochkami button, .tablica.kartochkami select { max-width: 100%; white-space: normal; text-align: left; }
  .tablica.kartochkami tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--razdelitel); }
  .tablica.kartochkami tbody tr:last-child { border-bottom: none; }
  .tablica.kartochkami td { display: block; padding: 3px 0; border-bottom: none; text-align: left; }
  .tablica.kartochkami td.glavnaya-yacheyka { font-weight: 600; }
  .tablica.kartochkami td[data-podpis]::before { content: attr(data-podpis) ": "; color: var(--seryi); }
}

/* Крупные числа сводок. */
.odno-chislo .velichina { font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.odno-chislo { color: var(--seryi); }
.odno-chislo .velichina { color: var(--sinii); }
.odno-chislo .velichina.dengi { color: var(--dengi); }

/* --- пустые состояния и сообщения ----------------------------------------- */

/* Пусто — спокойная фраза по центру карточки, а не строка серого в углу. */
.karta > .pusto, #stroki > .pusto {
  padding: 28px 16px;
  text-align: center;
  color: var(--seryi);
}
.pusto a { color: var(--akcent-tekst); }

.obrezano {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--preduprezhdenie-fon);
  color: var(--preduprezhdenie);
}

/* Страница отказа и сбоя — одна карточка по центру. */
.odna-mysl {
  max-width: 480px;
  margin: 10vh auto;
  padding: 28px;
  background: var(--kartochka);
  border-radius: var(--radius-karta);
  box-shadow: var(--ten);
}

/* Ссылки-действия рядом с кнопками. */
.tihaya-ssylka { color: var(--seryi); }
.tihaya-ssylka:hover { color: var(--akcent-tekst); text-decoration: none; }
.deystviya { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px; }
.perelistat a { border: none; border-radius: var(--radius); background: var(--kartochka);
                box-shadow: var(--ten); }
.perelistat a:hover { background: var(--navedenie); }

/* Браузер без `:has` (Safari до 15.4, Firefox до 121): сетка на body не
 * включается, и неподвижная панель легла бы поверх левого края содержимого.
 * Там панель остаётся верхней полосой в потоке — как на узком экране. */
@supports not selector(:has(*)) {
  .shapka { position: static; width: auto; display: flex; flex-wrap: wrap; align-items: center;
            gap: 4px; padding: 8px 12px; border-right: none; border-bottom: 1px solid var(--razdelitel); }
  .shapka nav { flex-direction: row; flex-wrap: wrap; }
  .shapka .kto { margin: 0 0 0 8px; border-top: none; padding-top: 8px; }
}

/* --- печать --------------------------------------------------------------- */

/* Печатная форма согласия наследует основу. У klan.css на печати панель
 * спрятана, но `display: grid` отсюда идёт позже и возвращал её на бумагу —
 * неподвижной, поверх текста на каждом листе, да ещё с пустой колонкой слева.
 * Поэтому печать повторена здесь и сильнее. */
@media print {
  body:has(> .shapka) { display: block; background: #fff; }
  body:has(> .shapka) > .shapka, .shapka.shapka { display: none; }
  main { max-width: none; padding: 0; }
  .karta, main > form.forma { box-shadow: none; border: 1px solid #d4d4d8; break-inside: avoid; }
}

/* --- движение ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Текстовые ссылки под палец (штаб, 17.10, 22:28: «кнопки нажимаются пальцем»).
 * На сенсорном экране ссылка в таблице, в подписи и в форме получает зону
 * нажатия 44px: невидимое поле вокруг текста, а не крупный шрифт — строки
 * таблицы не раздуваются, попасть пальцем можно. Прошлый размер был ~17px. */
@media (pointer: coarse), (max-width: 620px) {
  .tablica td a, .podpis a, .stroka a, .otmena, .abn-otmena, .tihaya-ssylka,
  .deystviya a:not(.knopkoy) {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
  .tablica td a, .podpis a, .stroka a { line-height: 1.3; padding: 12px 0; min-height: 0; }
}

/* Широкая таблица на телефоне прокручивается внутри своей карточки, а не
 * распирает её за край экрана (T4: таблица состояния каналов на 375). Страница
 * вбок не ездит; карточкой каждую таблицу не переразмечаем — это шаблоны всех
 * экранов, а прокрутка в карточке решает то же одним правилом. */
@media (max-width: 620px) {
  .karta:has(table) { overflow-x: auto; }
}