/* Updated Color Palette - More Vanilla */
:root {
    --base-bg: #FAF1C6;
    --light-cream: #faf1dc;
    --medium-gold: #e5c791;
    --dark-gold: #c4a16c;
    --light-gold: #f0dbb0;
    --brown-accent: #b5926b;
    --dark-brown: #5d3d2a;
    --darker-brown: #4a2e1f;
    --cream: #f5e6cc;
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --dark: #333333;
    --terracotta: #D6854D;
    --blue: #4A90E2;
    --green: #5E6D66;
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* убран height:100%; чтобы страница могла расти по контенту */
    overflow-x: hidden; /* оставляем защиту от горизонтального скролла */
    overflow-y: scroll; /* принудительно показывать вертикальный скролл */
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--base-bg);
    color: var(--dark-brown);
    line-height: 1.6;
    /* overflow-x убран намеренно: он делает body контейнером прокрутки
       (при overflow-x: hidden браузер считает overflow-y как auto), и тогда
       position: sticky у объявления перестаёт цепляться за окно. Защита от
       горизонтального скролла осталась на html выше. */
    min-height: 100vh; /* высота минимум экран, дальше растёт */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Spectral', serif;
    font-weight: 500;
}
/* В кабинетах заголовки разделов жирные: тонкий Spectral 500 сливался с
   полями форм в карточке группы и на похожих страницах (28.09.2026). */
.is-cabinet h1, .is-cabinet h2, .is-cabinet h3,
.is-cabinet h4, .is-cabinet h5, .is-cabinet h6 {
    font-weight: 700;
}

section {
  margin: 0;           /* убираем стандартные отступы */
  padding: 1rem 0;     /* делаем аккуратные внутренние отступы сверху/снизу */
}

/* Navigation */
.navbar {
  background-color: var(--base-bg);
  padding: 0;
  height: 90px;
  overflow: visible;
  box-shadow: none; /* изначально без тени */
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
  position: fixed; /* чтобы всегда висела сверху */
  width: 100%;
  z-index: 1000;
}

.navbar.scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* появляется при скролле */
}


.navbar-brand {
    font-family: 'Spectral', serif;
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--brown-accent) !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.brand-logo-text {
    font-family: 'Spectral', serif;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--dark-brown);
    line-height: 1.2;
}

.logo-image {
    height: 60px;
    width: auto;
    margin-top: -30px; /* подними логотип на пару пикселей */
    /*border-radius: 50%;*/
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); */
}

.brand-text {
    color: var(--dark-brown);
}

.tea-emoji {
    font-size: 1.5rem;
    animation: gentle-bounce 2s ease-in-out infinite;
}

@keyframes gentle-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.nav-link {
    color: var(--dark-brown) !important;
    font-weight: 700;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
    /* Без nowrap «Что мы предлагаем», «Как это работает» и «О нас»
       переносились на две строки при 992-1280px и меню выглядело растянутым. */
    white-space: nowrap;
}

/* На средних ширинах шести пунктам в одну строку тесно — ужимаем отступы
   и кегль, чтобы уместились без переносов и без горизонтального скролла. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar .nav-link {
        padding: 0.5rem 0.55rem !important;
        font-size: 0.92rem;
    }
    .navbar-brand { font-size: 1.5rem; }
    .brand-logo-text { font-size: 1.2rem; }
}

/* iPad в альбомной (1024) и соседние ширины: шесть пунктов меню, значки
   TG/VK и «Кабинет» с выходом не помещались даже ужатыми — правый край
   уезжал за экран. Здесь логотип остаётся без подписи, а «Кабинет» —
   одной иконкой (title и aria-label у ссылки сохраняются). */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .brand-logo-text { display: none; }
    .navbar .nav-link { padding: 0.5rem 0.4rem !important; }
}
/* 1200–1299: у родителя со значками TG/VK правая группа заходила за поле на 1 px. */
@media (min-width: 1200px) and (max-width: 1299.98px) {
    .navbar .nav-link { padding: 0.5rem 0.5rem !important; }
}
/* До 1600 px «Кабинет» и «Справка» — одни значки: с подписями, значками
   TG/VK и выходом правая группа у родителя уезжала за край на 1200–1440 px
   (у сотрудника со значками — на 1200). title и aria-label у ссылок есть. */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .navbar .admin-pill--solid span,
    .navbar .help-pill span { display: none; }
    .navbar .admin-pill--solid,
    .navbar .help-pill { padding: 0.4rem 0.7rem; }
}

.nav-link:hover {
    color: var(--brown-accent) !important;
    background-color: rgba(168, 106, 69, 0.1);
    font-weight: 700;
}

/* Admin pill buttons in navbar (Вход / Кабинет / Выход) */
.admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.95rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid var(--dark-brown);
    background: transparent;
    color: var(--dark-brown);
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}
.admin-pill i { font-size: 0.9rem; }
.admin-pill:hover {
    background: var(--dark-brown);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(93, 61, 42, 0.25);
}
.admin-pill--solid {
    background: var(--dark-brown);
    color: var(--white);
}
.admin-pill--solid:hover {
    background: var(--darker-brown);
    border-color: var(--darker-brown);
    color: var(--white);
}
.admin-pill--outline { /* default look, defined for clarity */ }
/* «?» справки родителя в шапке телефона — круг без подписи (base.html). */
.help-pill.d-lg-none { width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; font-size: 1rem; }
/* На 320 px логотип с отступом Bootstrap (16 px) не оставлял места для «?» — кнопка уходила второй строкой. */
@media (max-width: 359.98px) {
    .help-pill.d-lg-none { width: 2rem; height: 2rem; font-size: .85rem; }
    .navbar .navbar-brand { margin-right: 0; }
}
.admin-pill--ghost {
    padding: 0.4rem 0.7rem;
    border-color: transparent;
    color: var(--dark-brown);
    opacity: 0.7;
}
.admin-pill--ghost:hover {
    background: transparent;
    color: #c0392b;
    border-color: #c0392b;
    opacity: 1;
    box-shadow: none;
    transform: none;
}
@media (max-width: 991.98px) {
    .admin-pill { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
    .admin-pill--ghost { padding: 0.35rem 0.6rem; }
}

/* Navbar icon buttons — squared off to match nav style */
/* Navbar icon buttons — squared off to match nav style */
.navbar .nav-icon-btn.btn {
    border-radius: 6px !important;
    padding: 0.15rem 0.4rem !important;
    font-size: 0.95rem;
    line-height: 1;
    border-color: var(--dark-brown);
    color: var(--dark-brown);
}
.navbar .nav-icon-btn.btn:hover {
    background-color: var(--dark-brown);
    border-color: var(--dark-brown);
    color: var(--white);
    transform: none;
}
.navbar .nav-icon-btn.btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
}
.navbar .nav-icon-btn.btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: var(--white);
}

/* Mobile: nav icon buttons inside collapsed menu */
@media (max-width: 991.98px) {
    .navbar .nav-icon-btn.btn {
        font-size: 0.85rem;
        padding: 0.12rem 0.35rem !important;
    }

    /* Фон раскрытого меню */
    .navbar-collapse {
        background-color: var(--base-bg);
        padding: 0.5rem 1rem 1rem;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
}

/* Mobile: floating widget — smaller buttons */
@media (max-width: 576px) {
    #widget-popup a {
        width: 140px;
        font-size: 0.8rem;
        padding: 5px 0;
    }
    #floating-widget {
        bottom: 12px;
        right: 12px;
    }
}

/* Hero Section */
.hero-section {
    background-color: var(--base-bg);
    position: relative;
    overflow: hidden;
    padding-bottom: 0rem;
}

.hero-row {
    min-height: 100vh;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.1rem; /* равномерные отступы между элементами */
    padding-top: 10vh; /* <-- добавляем сверху */
}

/* На маленьких экранах уменьшаем отступ */
@media (max-width: 768px) {
    .hero-content {
        padding-top: 7vh;
    }
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--dark-brown);
    margin: 0;
    line-height: 1.3;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--darker-brown);
    opacity: 0.9;
    margin: 0;
}

.hero-subtitle1 {
    font-size: 2rem;
    color: var(--darker-brown);
    opacity: 0.9;
    margin: 0;

}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.hero-buttons .btn {
    min-width: 220px;
}

/* Desktop hero image (right column) */
.hero-image {
    position: relative;
    z-index: 2;
    max-width: 88%;
    height: auto;
    display: block;
}

/* Mobile hero image (inline between subtitle and title) */
.hero-image-mobile {
    display: none;
}

@media (max-width: 768px) {
    .hero-image-mobile {
        display: block;
        text-align: center;
        margin: 1rem 0;
    }
    .hero-image-mobile img {
        max-height: 240px;
        width: auto;
        border-radius: 16px;
    }
}

@media (max-width: 576px) {
    .hero-image-mobile img {
        max-height: 200px;
    }
}

.hero-image img {
    transition: transform 0.3s ease;
}


/* Buttons */
.btn-primary {
    /*background-color: var(--dark-gold);*/
    background-color: #e17342;
    border-color: var(--dark-gold);
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #a8441f; /*var(--brown-accent);*/
    border-color: var(--brown-accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(168, 106, 69, 0.4);
}

.btn-outline-primary {
    color: var(--dark-brown);
    border-color: var(--dark-brown);
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: var(--dark-brown);
    border-color: var(--dark-brown);
    color: var(--white);
    transform: translateY(-2px);
}


/* Sections */
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark-brown);
    margin-bottom: 1rem;
    text-align: center;
    line-height: 1.22; /* добавлено: гарантирует запас по высоте под иконку */
}

/* Обновлённый вариант иконки кружки в заголовке */
.section-title .tea-emoji-img {
  transform: none !important;
  display: inline-block;            /* корректное вычисление высоты строки */
  width: clamp(0.9em, 0.8em + 0.4vw, 1.15em); /* плавное масштабирование */
  height: auto;                      /* авто-высота без обрезки */
  vertical-align: middle;            /* выравнивание */
  margin-left: 0.35rem;              /* отступ от текста */
  margin-top: 0;                     /* убрали отрицательный сдвиг */
}
@media (max-width: 576px) {
  .section-title { line-height: 1.18; }
  .section-title .tea-emoji-img { width: clamp(0.85em, 1em, 1em); }
}

.about-section {
    background-color: var(--base-bg);
    /*padding: 6rem 0;*/
}

.about-content {
    /*padding: 2rem;*/
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.lead {
    font-size: 1.4rem;
    color: var(--dark-brown);
    margin-bottom: 2rem;
}

/* Уменьшенный вариант иконки только для специальных заголовков */
.section-title.icon-sm .tea-emoji-img {
  width: clamp(0.8em, 0.7em + 0.3vw, 1em) !important;
  height: auto;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .section-title.icon-sm .tea-emoji-img { width: clamp(0.7em, 0.65em + 0.25vw, 0.85em) !important; }
}

/* Benefits Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    overflow: visible;
    width: 100%;
}

.benefit-card {
    background-color: var(--white);
    padding: 2rem;
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 2px solid var(--terracotta);
    position: relative;
    overflow: hidden;
    cursor: pointer;

    /* чтобы иконка и текст шли в строку и не съезжали */
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-align: left; /* выравнивание текста */
}

.benefit-icon {
    font-size: 2.5rem;
    color: var(--terracotta);
    flex-shrink: 0;
    width: 40px; /* фиксированная ширина, чтобы текст не прыгал */
    text-align: center;
    margin-bottom: 0; /* убрали, т.к. теперь иконка сбоку */
}

.benefit-card h4 {
    color: var(--dark-brown);
    margin: 0 0 0.5rem 0;
}

.benefit-card p {
    color: var(--dark-brown);
    margin: 0;
}



/* Services Section */
.services-section {
    background-color: var(--base-bg);
    padding: 6rem 0;
}

.service-card {
    background-color: var(--white);
    padding: 3rem 2rem;
    border-radius: 20px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.service-card:hover {
    /*transform: translateY(-10px);*/
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.service-icon,
.service-icon--alt {
    width: 80px;
    height: 80px;
    background-color: var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: var(--white);
}

.service-icon--alt {
    background-color: var(--terracotta);
}

.service-card h4 {
    color: var(--dark-brown);
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--dark-brown);
    margin-bottom: 1.5rem;
}

.service-features {
    list-style: none;
    padding: 0;
    text-align: left;
}

.service-features li {
    padding: 0.5rem 0;
    color: var(--dark-brown);
    position: relative;
    padding-left: 1.5rem;
}

.service-features li::before {
    content: '🍵';
    position: absolute;
    left: 0;
    top: 0.5rem;
}

/* === Fix: overlap of bullet icons (🍵) with text in services list on tablets === */
.service-card .service-features li {
  line-height: 1.35;                /* больше вертикального пространства */
  padding-left: 1.9rem;              /* базовый отступ под иконку */
}
.service-card .service-features li::before {
  top: 0.35rem;                      /* выше было 0.5rem — центрируем лучше */
  font-size: 1.05rem;                /* немного меньше, чтобы не налезало */
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .service-card .service-features li { padding-left: 1.7rem; font-size: 0.9rem; }
  .service-card .service-features li::before { top: 0.4rem; font-size: 0.9rem; }
  /* Три карточки в ряд с 768px: ужимаем отступы и иконку, иначе текст не помещается */
  .service-card { padding: 2rem 1rem; }
  .service-card h4 { font-size: 1.05rem; }
  .service-card p { font-size: 0.9rem; }
  .service-icon,
  .service-icon--alt { width: 60px; height: 60px; margin-bottom: 1rem; }
  .service-icon i,
  .service-icon--alt i { font-size: 1.5rem; }
}
@media (max-width: 575.98px) {
  .service-card .service-features li { padding-left: 2rem; }
  .service-card .service-features li::before { top: 0.3rem; }
}

/* Общий фон с кружками/часами — используется на «Как это работает» и «О нас» */
.how-it-works-section,
#about-top {
    /* Сначала jpeg как фолбэк для браузеров без image-set, затем image-set с webp.
       home-bg.webp — 189 КБ против 493 КБ у jpeg. Файл давно лежал в репозитории,
       но нигде не подключался. */
    background-image: url("../img/home-bg.jpeg");
    background-image: image-set(url("../img/home-bg.webp") type("image/webp"),
                                url("../img/home-bg.jpeg") type("image/jpeg"));
    background-image: -webkit-image-set(url("../img/home-bg.webp") type("image/webp"),
                                        url("../img/home-bg.jpeg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.how-it-works-card {
    background-color: var(--white);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    border: 2px solid var(--light-cream);
}

.how-it-works-card:hover {
    /*transform: translateY(-5px);*/
    box-shadow: 0 10px 30px rgba(177, 106, 50, 0.3);
    border-color: var(--dark-gold);
    background-color: var(--light-cream);
}

.how-it-works-icon,
.how-it-works-icon--green {
    width: 70px;
    height: 70px;
    background-color: var(--terracotta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.8rem;
    color: var(--white);
}

.how-it-works-icon--green {
    background-color: var(--green);
}

.how-it-works-card h4 {
    color: var(--dark-brown);
    margin-bottom: 1rem;
}

.how-it-works-card p {
    color: var(--dark-brown);
    margin: 0;
}

/* Locations Section */
.locations-section {
    background-color: var(--base-bg);
    padding: 6rem 0;
}

.locations-section .section-title {
    color: var(--dark-brown);
}

.locations-section .lead {
    color: var(--dark-brown);
    opacity: 0.9;
}

.location-card {
    background-color: var(--white);
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    border: 2px solid var(--terracotta);
}

.location-card {
    margin: 0 auto;
    max-width: 700px; /* или любая подходящая ширина */
}



.location-card h4 {
    color: var(--dark-brown);
    margin-bottom: 1rem;
}

.location-card p {
    color: var(--darker-brown);
    margin-bottom: 0.5rem;
}

.location-card i {
    color: var(--terracotta);
    margin-right: 0.5rem;
}

.location-card a {
    color: var(--darker-brown);
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block;
}

.location-card a:hover {
    color: var(--brown-accent);
    padding-left: 5px;
}

.contact-link {
    color: #222;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
}
.phone-link, a.phone-link { min-height: 44px; padding: 0.5rem; display: inline-flex; align-items: center; }

.contact-link div {
    color: #222;
}

.contact-link .fa-telegram {
    color: #29a8e8;
}

.contact-link .fa-whatsapp {
    color: #25d366;
}

.contact-link .fa-phone {
    color: var(--terracotta);
}

.contact-link:hover {
    opacity: 0.8;
}

/* Contact Section */
.contact-section {
  /* bg1.webp — 79 КБ; bg1.jpeg — фолбэк, 130 КБ (было 255). Первая попытка
     пережать JPEG через PIL сдвинула цвета: потерялся ICC-профиль. Пережимать
     только с ним: save(..., quality=82, icc_profile=im.info['icc_profile']). */
  background-image: url("../img/bg1.jpeg");
  background-image: image-set(url("../img/bg1.webp") type("image/webp"),
                              url("../img/bg1.jpeg") type("image/jpeg"));
  background-image: -webkit-image-set(url("../img/bg1.webp") type("image/webp"),
                                      url("../img/bg1.jpeg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.contact-form-container {
    background-color: var(--white);
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.contact-form .form-label {
    color: var(--dark-brown);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contact-form .form-control {
    border: 2px solid var(--light-gold);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.contact-form .form-control:focus {
    border-color: var(--terracotta);
    box-shadow: 0 0 0 0.2rem rgba(210, 124, 67, 0.25);
}

.contact-info {
    border-top: 2px solid var(--light-gold);
    padding-top: 2rem;
}

/* Второе объявление .contact-link убрано: при одинаковой специфичности оно
   побеждало первое (строка ~695) и его display:inline-block убивал flex-контейнер,
   из-за чего flex-direction/align-items/justify-content там становились мёртвыми.
   Плюс color: var(--cream) на белой карточке давал контраст ~1.1:1 — не проявлялось
   только потому, что весь видимый текст лежит в дочернем div со своим цветом.
   Осталось только то, чего не было в первом блоке. */
.contact-link {
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-link:hover {
    transform: translateY(-3px);
}

.contact-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Footer */
.footer-section {
    background-color: var(--base-bg);
    color: var(--dark-brown);
    padding: 3rem 0 1.5rem;
}

/* Логотип и бренд */
.footer-brand-block {
    text-align: left;
}

.footer-logo {
    width: 60px;
    height: auto;
    display: block;
    margin-bottom: 1rem;
}

.footer-brand-text {
    font-family: 'Spectral', serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--dark-brown);
    margin-bottom: 0.5rem;
}

.footer-description {
    font-size: 0.9rem;
    color: var(--dark-brown);
    opacity: 0.7;
    margin: 0;
    line-height: 1.5;
}

/* Список ссылок на документы */
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 1rem;
}

.footer-links-list li {
    margin-bottom: 0.25rem;
    line-height: 1.5;
}

.footer-link {
    color: var(--dark-brown);
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.15rem 0;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-flex;
    align-items: center;
    opacity: 0.85;
}

.footer-link:hover {
    color: var(--brown-accent);
    opacity: 1;
    padding-left: 5px;
}

/* Контакты */
.footer-contacts {
    color: var(--dark-brown);
    margin-top: 1rem;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

.footer-contact-item i {
    color: var(--dark-brown);
    margin-right: 0.75rem;
    font-size: 1rem;
    min-width: 20px;
}

.footer-contact-item a {
    color: var(--dark-brown);
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block;
}

.footer-contact-item a:hover {
    color: var(--brown-accent);
    padding-left: 5px;
}

/* Социальные иконки */
.footer-social {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--white);
    border: 2px solid var(--dark-brown);
    border-radius: 50%;
    color: var(--dark-brown);
    font-size: 1.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Цветные иконки для соцсетей */
.footer-social-link .fa-telegram {
    color: #0088cc;
}

.footer-social-link:hover .fa-telegram {
    color: #006699;
}

.footer-social-link .fa-whatsapp {
    color: #25D366;
}

.footer-social-link:hover .fa-whatsapp {
    color: #1DA851;
}

.footer-social-link .fa-phone {
    color: var(--dark-brown);
}

.footer-social-link:hover .fa-phone {
    color: var(--brown-accent);
}

/* Копирайт внизу */
.footer-bottom {
    border-top: 1px solid rgba(93, 61, 42, 0.2);
    padding-top: 1rem;
    margin-top: 0;
}

.footer-text {
    color: var(--dark-brown);
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Адаптивность для мобильных */
@media (max-width: 991.98px) {
    .footer-section {
        padding: 2rem 0 1rem;
    }

    .footer-brand-block,
    .footer-links-list,
    .footer-contacts {
        text-align: center;
    }

    .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-contact-item {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-link { justify-content: center; text-align: center; }

    /* На тач-устройствах возвращаем 44px тап-таргет на ссылки подвала */
    .footer-link {
        min-height: 44px;
        padding: 0.5rem 0;
    }
}

@media (max-width: 767.98px) {
    .footer-heading {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .footer-links-list li {
        margin-bottom: 0.5rem;
    }

    .footer-contact-item {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
}


/* === Custom rectangular navbar toggler (burger) === */
.navbar-toggler {
  border: 1px solid var(--dark-brown);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  min-height: 44px;
  min-width: 44px;
  background: rgba(255,255,255,0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.navbar-toggler:focus, .navbar-toggler:hover {
  outline: none;
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}
.toggler-bars {
  width: 24px;
  height: 18px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.toggler-bars span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--dark-brown);
  border-radius: 2px;
  transition: transform .35s ease, opacity .25s ease, background-color .25s ease;
  transform-origin: center;
}
/* Анимация превращения в крест */
.navbar-toggler[aria-expanded="true"] .toggler-bars span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .toggler-bars span:nth-child(2) {
  opacity: 0;
}
.navbar-toggler[aria-expanded="true"] .toggler-bars span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .toggler-bars span { transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* Responsive Design */
@media (max-width: 768px) {

  section.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

    .hero-row {
        min-height: auto;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.8rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-buttons .btn {
        width: 100%;
        margin: 0.5rem 0;
    }

    .contact-form-container {
        padding: 2rem 1rem;
    }

    .navbar-brand {
        font-size: 1.5rem;
    }

    .hero-image {
        display: none;
    }
}

@media (max-width: 576px) {
    section.py-5 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .hero-content {
        padding: 5rem 0 1rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .about-section,
    .services-section,
    .locations-section,
    .contact-section {
        padding: 1rem 0;
    }

    .hero-image {
        display: none;
    }

    /* Название в две строки: в одну на телефоне оно умещалось только
       кеглем 16px, и тонкий Spectral рядом с кружкой выглядел мелко и
       бледно. Два слова друг под другом занимают высоту кружки и читаются
       крупно; второе слово чуть мельче — так строки равны по ширине. */
    .brand-logo-text {
        display: flex;
        flex-direction: column;
        font-size: 1.45rem;
        font-weight: 700;
        line-height: 1.02;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    /* Тёмная терракота: --terracotta на кремовом фоне даёт контраст 2,4:1,
       для текста мало; #A0522D — 4,8:1 и тот же оттенок. */
    .brand-logo-text > span + span {
        font-size: 0.86em;
        color: #A0522D;
    }

    .navbar-brand {
        gap: 0.35rem;
    }

    /* Кружка визуально тяжелее книзу — смещаем чуть выше центра */
    .navbar-brand img:first-child {
        margin-top: -8px;
    }

    /* Hero: кнопка выше */
    .hero-image-mobile img {
        max-height: 150px;
    }

    .spacer-30 {
        height: 0;
    }
}

/* ===== Tablet (md) optimization 768-991px ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Чуть меньше высоты хиро, чтобы не появлялся лишний вертикальный скролл */
  .hero-row { min-height: 82vh; }

  .hero-title { font-size: 2.6rem; }
  .hero-subtitle1 { font-size: 1.7rem; }
  .hero-subtitle { font-size: 1.25rem; }
  .hero-content { padding-top: 6vh; }

  /* Изображение героя не должно быть слишком большим */
  .hero-image { max-width: 95%; margin: 1.5rem auto 0; }

  /* Общие отступы секций — компактнее */
  section.py-5:not(.hero-section),
  .services-section,
  .locations-section,
  .contact-section { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  .section-title { font-size: 2.2rem; margin-bottom: 1.25rem; }

  /* Карточки — менее воздушные */
  .benefit-card, .service-card, .how-it-works-card, .location-card { padding: 1.5rem; }
  .benefit-card { gap: 0.75rem; }
  .benefit-icon { font-size: 2.1rem; width: 36px; }

  .service-card h4, .how-it-works-card h4 { font-size: 1.15rem; }
  .service-features li { padding: 0.4rem 0; }

  /* Картинки в about блоках — растягиваются по высоте текста */
  #about-top img, #about-bottom img { max-height: none; object-fit: cover; }

  /* Карточка формы — поменьше внутренних отступов */
  .card-custom { padding: 0.75rem 1rem; }

  /* Локация центрируется уже, просто адаптируем ширину */
  .location-card img { max-height: 320px; object-fit: cover; }

  /* Чуть плотнее футер */
  .footer-section { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
}

/* === Fluid typography & spacing utilities (added) === */
.hero-title { font-size: clamp(2.1rem, 4vw + 1rem, 3rem); }
.hero-subtitle1 { font-size: clamp(1.3rem, 2.2vw + 0.8rem, 2rem); }
.hero-subtitle { font-size: clamp(1.05rem, 1.4vw + 0.6rem, 1.5rem); }
.section-title { font-size: clamp(1.9rem, 2.3vw + 1rem, 2.5rem); }

.spacer-20 { height:20px; width:100%; }
.spacer-30 { height:30px; width:100%; }

/* Equal height service cards */
.services-section .row > [class*='col-'] { display:flex; }
.service-card { display:flex; flex-direction:column; }
.service-card ul { margin-top:auto; }

/* Object-fit helper */
.img-cover { object-fit:cover; width:100%; height:100%; }

/* Reveal animation */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.reveal-visible { opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .fade-in-up { animation:none !important; }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Smooth scrolling offset for fixed navbar */
:target {
    scroll-margin-top: calc(var(--navbar-h) + 1rem);
}

/* Когда сверху висит липкое объявление, оно тоже закрывает якорь —
   иначе заголовок секции уезжает под баннер при переходе по меню. */
body.has-announce :target {
    scroll-margin-top: calc(var(--navbar-h) + var(--announce-h, 72px) + 1rem);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--light-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--dark-brown);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brown-accent);
}

/* Additional styles  */

.tea-emoji-img {
    width: 1.5em;
    height: 1.5em;
    vertical-align: text-bottom; /* или text-bottom, зависит о�� того, куда хочешь */
    margin-left: 0.3rem;
    transform: translateY(-2px); /* точная корректировка вверх */
    /*animation: gentle-bounce 2s ease-in-out infinite;*/
}

.map-responsive {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%;
  height: 0;
}
.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.about-content {
  padding-bottom: 0 !important;
  margin-bottom: 0;
  height: 100%;
}


.about-section .row > .col-lg-6 {
  display: flex;
  align-items: stretch;
}

.info-box {
  font-size: 1rem;
  color: var(--dark);
  background-color: var(--base-bg);
}
.about-section .about-content {
  min-height: 100%;
}

@media (min-width: 992px) {
  .about-section .col-lg-6 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.benefits-grid {
  align-items: flex-start; /* чтобы карточки не растягивались */
}
#floating-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#widget-circle {
    cursor: pointer;
    font-size: 2.2rem;
    transition: transform 0.2s ease;
    /* Теперь это <button> (нужен для доступа с клавиатуры) — снимаем
       браузерные дефолты, чтобы визуально ничего не поехало. */
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
    -webkit-appearance: none;
    appearance: none;
}

#widget-circle:focus-visible {
    outline: 3px solid var(--dark-brown);
    outline-offset: 4px;
    border-radius: 50%;
}

#widget-circle:hover {
    transform: scale(1.2);
}

#widget-popup {
    display: none; /* скрыто по умолчанию */
    margin-top: 10px;
    flex-direction: column;
    align-items: flex-end;
}

#widget-popup a {
    width: 160px;
    text-align: center;
    padding: 6px 0;
}

#about-top {
  margin-bottom: 1.5rem !important;
}

/* News Cards */
.news-card {
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

a.news-card--link,
a.news-card--link:hover,
a.news-card--link:focus,
a.news-card--link *,
a.news-card--link:hover * {
    color: inherit !important;
    text-decoration: none !important;
}

/* Пагинация на странице /news */
.news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}
.news-pagination a, .news-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 0.75rem;
    border-radius: 50px;
    border: 1.5px solid var(--dark-gold);
    color: var(--dark-brown);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}
.news-pagination a:hover {
    background: var(--cream);
    color: var(--dark-brown);
}
.news-pagination .active {
    background: var(--dark-brown);
    color: var(--white);
    border-color: var(--dark-brown);
}
.news-pagination .disabled {
    opacity: 0.4;
    pointer-events: none;
}
.news-pagination .gap {
    border: none;
    color: var(--brown-accent);
}

.news-card-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

/* Снимок показываем целиком (contain): фото в новостях и вертикальные,
   и широкие, cover срезал им верх и низ. Пустые поля закрывает размытая
   копия того же снимка (второй <img>, браузер берёт его из кэша). */
.news-card-img img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.news-card-img .news-card-img-bg {
    position: absolute;
    inset: 0;
    object-fit: cover;
    filter: blur(18px) brightness(0.9);
    transform: scale(1.15);
}

.news-card-video-mark {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.news-card-placeholder {
    background: linear-gradient(135deg, var(--medium-gold) 0%, var(--brown-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.news-card-placeholder .fa-play {
    color: rgba(255, 255, 255, 0.92);
    font-size: 2.4rem;
}

.news-card-body {
    padding: 1.2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.news-card-date {
    font-size: 0.75rem;
    /* Было #aaa — контраст ~2.3:1 на белом при норме WCAG AA 4.5:1 для мелкого
       текста. #6b5a4d даёт ~7:1 и остаётся в коричневой гамме проекта. */
    color: #6b5a4d;
}

.news-card-source {
    font-size: 0.7rem;
    color: var(--brown-accent);
}

.news-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: var(--dark-brown);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.news-card-text {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.card-custom {
  width: 100%;
  max-width: 600px;   /* ограничение по ширине */
  height: auto;       /* авто-высота */
  min-height: 480px;  /* минимальная высота для десктопа */
  padding: 1rem;      /* внутренние отступы */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* текст и кно��ки не обрезаются */
}

/* Мобильные экраны */
@media (max-width: 576px) {
  .card-custom {
    min-height: 650px; /* увеличиваем высоту, чтобы iframe и кнопки помещались */
  }

  .card-custom iframe {
    height: 400px;  /* iframe меньше, но помещается */
  }
}

/* Additional styles for specific components */

/* ===== Spacing adjustments (added) ===== */
/* Глобально уменьшаем большие вертикальные отступы между секциями */
section.py-5:not(.hero-section),
.services-section,
.locations-section,
.contact-section,
#about-top.py-5,
#about-bottom.py-5,
#how-it-works.py-5 {
  padding-top: 2.5rem !important; /* было 6rem или 3rem (Bootstrap py-5) */
  padding-bottom: 2.5rem !important;
}

/* Дополнительные утилитарные классы для гибкости */
.section-gap-sm { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.section-gap-md { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.section-gap-lg { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

/* На очень узких экранах делаем еще компактнее (у нас уже есть уменьшение, оставим чуть ниже) */
@media (max-width: 576px) {
  section.py-5:not(.hero-section),
  .services-section,
  .locations-section,
  .contact-section,
  #about-top.py-5,
  #about-bottom.py-5,
  #how-it-works.py-5 {
    padding-top: 0.75rem !important; /* уменьшено (раньше было 1.25rem) */
    padding-bottom: 0.75rem !important;
  }
}

/* === About section image equal height tweak === */
.about-image-wrapper { display:flex; }
.about-image-wrapper img { width:100%; height:100%; object-fit:cover; object-position:center; }
.about-students-img { max-height: 600px; }
@media (max-width: 768px) { .about-students-img { max-height: 350px; } }
@media (min-width: 768px) and (max-width: 991.98px) {
  .about-image-wrapper { min-height:100%; overflow:hidden; border-radius:12px; }
  .about-image-wrapper img { width:100%; height:100%; object-fit:cover; object-position:center top; }
}

/* Документы */
.doc-box { background:#fff; padding:2.5rem 2rem; border-radius:16px; box-shadow:0 4px 18px rgba(0,0,0,0.08); }
.doc-box h1,.doc-box h2,.doc-box h3 { color: var(--dark-brown); }
.doc-box ul,.doc-box ol { margin-left:1.2rem; }

/* Legal documents styling */
.legal-doc { font-size:0.95rem; line-height:1.55; }
.legal-doc h3 { margin-top:2rem; font-size:1.25rem; }
.legal-doc .toc { background:#fff; border:1px solid rgba(0,0,0,0.08); padding:1rem 1.25rem; border-radius:12px; }
.legal-doc .toc a { text-decoration:none; color:var(--dark-brown); }
.legal-doc .toc a:hover { text-decoration:underline; }
.columns-2 { column-count:2; column-gap:2.2rem; }
@media (max-width: 768px) { .columns-2 { column-count:1; } }
.signature-line { border-bottom:1px solid #555; min-height:1.4rem; width:100%; }
.placeholder { display:inline-block; min-width:220px; border-bottom:1px dotted #666; }
.legal-doc ul { margin-bottom:0.9rem; }
.legal-doc ul li { margin-bottom:0.35rem; }

/* Form validation shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Footer bullet alignment */
.footer-links-list li span {
  display: inline-block;
  width: 0.9em;
  text-align: center;
}

/* Точка «•» перед ссылкой в центрированном подвале (до lg) оставалась одна
   на строке: ссылка — inline-flex с высотой 44px, и длинная целиком
   переносилась под неё. По центру список читается и без точек. Стоит ПОСЛЕ
   правила выше: специфичность та же, и раньше оно перебивало скрытие. */
@media (max-width: 991.98px) {
  .footer-links-list li span { display: none; }
  .footer-links-list li { justify-content: center; }
}

/* Точка и ссылка — в одну строку: ссылка сама была inline-flex и при
   переносе уходила целиком под точку (на 1024 это видно даже с точками).
   Внутри списка ссылка — обычный строчный текст, переносится рядом. */
.footer-links-list li { display: flex; align-items: baseline; }
.footer-links-list li span { flex: 0 0 0.9em; }
.footer-links-list .footer-link { display: inline; }

/* Center alignment for lg+ screens */
@media (min-width: 992px) {
  .text-lg-center { text-align: center; }
}

.hero-social {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}

.hero-social-label {
    font-size: 0.85rem;
    color: var(--brown-accent);
    font-weight: 500;
}

.hero-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    color: var(--dark-brown);
    text-decoration: none;
    border: 1.5px solid var(--dark-gold);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.6rem 0;
    color: var(--dark-brown);
    font-weight: 500;
}
.back-link:hover { color: var(--brown-accent); }

.hero-social-link:hover {
    background-color: var(--dark-brown);
    color: var(--white);
    border-color: var(--dark-brown);
}

/* === Объявление о наборе на главной ===
   Липнет под шапкой и не уезжает при прокрутке. sticky, а не fixed:
   элемент остаётся в потоке и сам резервирует под себя место, поэтому
   не приходится вручную подпирать страницу отступом сверху.
   Раз блок висит постоянно — он обязан быть компактным. */
:root {
    --navbar-h: 90px;
}

.announce-section {
    position: sticky;
    top: var(--navbar-h);
    z-index: 999;              /* под навбаром (1000), над контентом */
    padding: 0.6rem 0;
    background: var(--base-bg); /* фон обязателен: под ним проезжает контент */
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.35);
}

.announce-card {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    background: var(--white);
    border-left: 6px solid var(--terracotta);
    border-radius: 14px;
    padding: 0.7rem 1.1rem;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.announce-image {
    flex: 0 0 auto;
    line-height: 0;
}

.announce-image a { display: block; line-height: 0; }

/* Высота жёстко ограничена: полоса висит под меню постоянно, и вертикальная
   афиша во всю высоту закрыла бы экран. Ширина — по пропорции. */
.announce-image img {
    height: 64px;
    width: auto;
    max-width: 220px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* Афиша без текста — она и есть всё объявление: занимает карточку целиком.
   Отдельная кнопка в этом режиме скрыта: кликабельна сама картинка, а на
   готовом баннере призыв к действию обычно уже нарисован.
   object-fit: contain, а не cover — обрезать афишу нельзя, на ней текст.
   Чтобы полоса заполнялась без полей по бокам, картинка должна быть
   примерно 7:1, например 1400x200. Это написано в подсказке в кабинете. */
.announce-card--image-only {
    display: block;
    padding: 0;
    overflow: hidden;
    /* Своей акцентной полосы не рисуем: на готовом баннере она обычно уже
       есть, иначе получаются две подряд с белым зазором между ними. */
    border-left: 0;
}

.announce-card--image-only .announce-image,
.announce-card--image-only .announce-image a { display: block; width: 100%; }

.announce-card--image-only .announce-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;      /* снимаем 220px из базового правила миниатюры */
    /* Ни max-height, ни object-fit: иначе картинка вписывается по высоте и по
       бокам остаются белые поля. Высота следует из ширины по пропорции —
       карточка заполняется от края до края. Отсюда требование к пропорции
       баннера: она напрямую задаёт высоту липкой полосы. */
    border-radius: 0;
}

.announce-card--image-only .announce-action { display: none; }

/* --- Смена нескольких афиш ---
   Кадры лежат друг на друге: первый в потоке задаёт высоту блока,
   остальные позиционируются поверх. Так полоса не прыгает при смене,
   даже если баннеры чуть разной пропорции. */
.announce-image--slider { position: relative; }

.announce-image--slider .announce-slide {
    opacity: 0;
    transition: opacity .6s ease;
}

/* До готовности JS первый кадр остаётся в потоке и задаёт высоту.
   После — высоту выставляет скрипт по самому «высокому» баннеру, и все
   кадры становятся абсолютными: так разные пропорции не режутся. */
.announce-image--slider .announce-slide:not(:first-child) {
    position: absolute;
    inset: 0;
}

.announce-image--slider.is-ready .announce-slide {
    position: absolute;
    inset: 0;
}

/* Ссылку-обёртку тоже растягиваем: без этого height:100% у картинки считается
   от <a> с высотой auto, процент превращается в «по натуральной высоте», и
   афиша другой пропорции вылезала за полосу и обрезалась. */
.announce-image--slider.is-ready .announce-slide > a {
    display: block;
    height: 100%;
}

.announce-image--slider.is-ready .announce-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* вписываем целиком: обрезать чужую афишу нельзя */
}

.announce-image--slider .announce-slide.is-active { opacity: 1; }

/* Без JS показываем первый кадр, иначе блок был бы пустым */
.announce-image--slider .announce-slide:first-child { opacity: 1; }
.announce-image--slider.is-ready .announce-slide:first-child { opacity: 0; }
.announce-image--slider.is-ready .announce-slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .announce-image--slider .announce-slide { transition: none; }
}

.announce-action { flex: 0 0 auto; }

.announce-btn {
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1.2rem;
}

/* Планшет и ниже: шапка та же 90px, но места по горизонтали меньше */
@media (max-width: 991.98px) {
    .announce-body { gap: 0.1rem 0.5rem; }
    .announce-title { font-size: 1rem; }
    .announce-text { font-size: 0.88rem; }
}

@media (max-width: 767.98px) {
    /* На телефоне кнопка не влезает рядом — уводим её вниз.
       Текст ограничиваем двумя строками: липкий блок не должен
       закрывать пол-экрана, если в кабинете напишут абзац. */
    .announce-section { padding: 0.5rem 0; }
    .announce-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 0.5rem;
        padding: 0.7rem 0.9rem;
    }
    .announce-image img { height: 48px; max-width: 120px; }
    /* Режим афиши и на телефоне без отступов и ограничения высоты —
       иначе по бокам снова появляются белые поля. */
    .announce-card--image-only { padding: 0; }
    .announce-card--image-only .announce-image img { max-height: none; }
    .announce-body { justify-content: center; }
    .announce-title { white-space: normal; font-size: 0.98rem; }
    /* Одна строка, не две: вместе с шапкой в 90px липкий блок иначе съедает
       почти треть экрана телефона. Полный текст всё равно в новостях. */
    .announce-text {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .announce-action .announce-btn { width: 100%; justify-content: center; padding: 0.35rem 1rem; }
}

/* Вкладки кабинета преподавателя и полоса навигации трекера (templates/tracker/_nav.html) —
   общий стиль, чтобы вторая читалась продолжением первой, а не отдельным элементом. */
.teacher-tabs { gap: 0.65rem; flex-wrap: wrap; }
.teacher-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.5rem;
    border-radius: 50px;
    color: var(--dark-brown);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid var(--dark-gold);
    background: transparent;
    transition: all 0.2s ease;
}
.teacher-tab:hover {
    background: var(--cream);
    color: var(--dark-brown);
}
.teacher-tab.active {
    background: var(--dark-brown);
    color: var(--white);
    border-color: var(--dark-brown);
}
/* «Кабинет» над вкладками родителя (tracker/_parent_nav.html). Отрицательный
   верхний отступ забирает пустоту под шапкой, чтобы вкладки не уехали вниз. */
.cabinet-title {
    font-family: 'Spectral', serif; font-weight: 700; color: var(--dark-brown);
    font-size: 1.6rem; text-align: center; line-height: 1.2;
    margin: -1.5rem 0 1rem;
}
@media (max-width: 767.98px) { .cabinet-title { font-size: 1.35rem; margin: 0 0 .75rem; } }

/* Отступ страниц под фиксированной шапкой (90 px). Был прописан в разметке
   каждой страницы (120 px + py-4 контейнера) — на телефоне между шапкой и
   вкладками оставалось ~55 px пустоты. */
/* section.py-5.page-top: вес (0,2,1) — как у публичного правила
   section.py-5:not(.hero-section) с его мобильными .75rem, и стоит позже, —
   иначе вкладки уезжали под шапку. */
section.py-5.page-top { padding-top: 120px !important; }
@media (max-width: 767.98px) {
    section.py-5.page-top { padding-top: 100px !important; }
    section.py-5.page-top > .container.py-4 { padding-top: 0.25rem !important; }
    /* Вкладки кабинета на телефоне компактнее: с полями десктопа
       «Домашние задания» занимала строку одна, и «Расписание» тоже. */
    .teacher-tab { padding: 0.45rem 0.85rem; font-size: 0.9rem; }
    .teacher-tabs { gap: 0.4rem; }
}

/* Календарь расписания (templates/tracker/_calendar.html) — общий вид для
   страницы персонала и кабинета родителя. Своей библиотеки календаря нет
   намеренно: сетку рисует Bootstrap-таблица, а состояние клетки — классы
   cal-planned / cal-running / cal-finished. */
.cal-table { table-layout: fixed; min-width: 700px; }
/* min-width обязателен: без него table-layout:fixed позволяет .table-responsive
   сжимать колонки вместо прокрутки, и на узком экране текст клетки вылезает
   за рамку .cal-item. */
.cal-table th, .cal-table td { vertical-align: top; padding: 0.35rem; }
.cal-table thead th { text-align: center; font-size: 0.85rem; }
.cal-hour { width: 4.5rem; white-space: nowrap; font-size: 0.85rem; color: var(--dark-brown); }
/* Колонка времени — по центру по вертикали (у остальных ячеек vertical-align:
   top). Специфичность .cal-table .cal-hour перебивает .cal-table th. */
.cal-table .cal-hour { vertical-align: middle; text-align: center; }
.cal-month td { height: 6.5rem; }
/* Крупные, лёгкие даты — как в референсе. */
.cal-daynum { font-size: 1.4rem; color: var(--dark-brown); font-weight: 400; line-height: 1.1; }
/* Дата под днём недели в недельном виде. */
.cal-table thead th .cal-date { display: block; font-size: 1.15rem; font-weight: 400; color: var(--dark-brown); }
/* Тонкая горизонтальная черта, отделяющая дни рождения от даты. */
.cal-bday-sep { margin: 0.35rem 0; border: 0; border-top: 1px solid var(--bs-border-color, #cfc7b5); opacity: 1; }
/* В недельном виде шапка бывает высокой из-за дней рождения. Убираем
   горизонтальную границу шапка/тело, иначе у дней без ДР она «повисает»
   под датой отдельной чертой. Вертикальные разделители дней остаются. */
.cal-table:not(.cal-month) thead th { border-bottom: 0; }
.cal-table:not(.cal-month) tbody tr:first-child > * { border-top: 0; }
/* Разделители календаря затемнены, чтобы сетка была видна и на сером фоне
   дней вне месяца (иначе граница сливалась с фоном). */
.cal-table { --bs-border-color: #bfbdb5; }
/* Дни вне выбранного месяца — заметный серый фон (перебиваем фон ячейки
   bootstrap-таблицы). */
.cal-table td.cal-outside { background-color: #e4e4e4 !important; }
.cal-outside .cal-daynum { opacity: 0.5; }
/* Праздники и переносы (tracker/holidays.py): нерабочий день — розовым фоном,
   подпись — мелко под числом. Сокращённый день — только подпись. */
.cal-table td.cal-dayoff,
.cal-tl-head .cal-wd.cal-dayoff,
.cal-holiday-day.cal-dayoff { background-color: #fde4ec; }
.cal-holiday {
    font-size: 0.72rem;
    line-height: 1.2;
    color: #b0466c;
    margin: -0.1rem 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-holiday-short, .cal-holiday-workday { color: #8f8a83; }
.cal-tl-head .cal-holiday { font-weight: 400; margin-top: 0.15rem; }
.cal-holiday-day { border-radius: 8px; padding: 0.35rem 0.75rem; margin-bottom: 0.5rem; }
/* Колонка праздничного дня в «Неделе» и «Дне» — тот же розовый, но бледнее
   шапки: занятия на нём должны читаться. */
.cal-tl-col.cal-dayoff { background-color: #fdf3f6; }
/* Кабинет родителя (cal_hide_outside): дни соседних месяцев — пустые клетки. */
.cal-table td.cal-blank { background-color: transparent !important; }
/* Шапка дней недели (месяц и неделя): жирная; суббота синяя, вс красное. */
.cal-table thead th.cal-wd { font-weight: 700; }
.cal-table thead th.cal-wd-sat { color: #0d6efd; }
.cal-table thead th.cal-wd-sun { color: #dc3545; }
/* Сегодня — как в Google/Apple Calendar: число в залитом кружке фирменного
   цвета и голубой столбец (неделя) или клетка (месяц). Прежний
   фон .cal-today не был виден: bootstrap красит ячейки через --bs-table-bg
   более сильным селектором, поэтому задаём именно эту переменную. */
.cal-table td.cal-today, .cal-table th.cal-today { --bs-table-bg: #dcecfb; background-color: #dcecfb; }
.cal-today .cal-daynum,
.cal-table thead th.cal-today .cal-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1em;
    height: 2.1em;
    padding: 0 0.2em;
    border-radius: 999px;
    background: var(--terracotta);
    color: #fff;
    font-weight: 600;
}
.cal-table thead th.cal-today .cal-date { margin-top: 0.15rem; font-size: 1rem; }
.cal-month .cal-today .cal-daynum { font-size: 1.1rem; }
.cal-table thead th.cal-wd.cal-today { color: var(--terracotta); }
.cal-period { font-size: 1.05rem; color: var(--dark-brown); }
@media (max-width: 575.98px) {
    .cal-toolbar { flex-wrap: nowrap !important; gap: 0.35rem !important; }
    .cal-toolbar > div { gap: 0.3rem !important; }
    .cal-toolbar .cal-period { font-size: 0.85rem; white-space: nowrap; }
    .cal-toolbar .btn-sm, .cal-toolbar .btn-group-sm > .btn { padding: 0.2rem 0.4rem; font-size: 0.78rem; }
    .cal-toolbar > div { flex: 0 1 auto !important; }
}
/* 320–359 px: даже ужатая панель выходила за экран на ~17 px. */
@media (max-width: 359.98px) {
    .cal-toolbar { gap: 0.2rem !important; }
    .cal-toolbar > div { gap: 0.2rem !important; }
    .cal-toolbar .cal-period { font-size: 0.8rem; }
    .cal-toolbar .btn-sm, .cal-toolbar .btn-group-sm > .btn { padding: 0.2rem 0.28rem; font-size: 0.72rem; }
}

/* Клетка: ссылка (занятие уже есть), кнопка (по плану, можно начать) или
   просто блок (кабинет родителя — проваливаться некуда). Все три обязаны
   выглядеть одинаково, поэтому стиль задан одним классом. */
.cal-item {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 0.25rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--dark-gold);
    border-radius: 8px;
    background: var(--white);
    color: var(--dark-brown);
    text-decoration: none;
    font-size: 0.8rem;
    line-height: 1.3;
}
a.cal-item:hover, button.cal-item:hover { background: var(--cream); color: var(--darker-brown); }
/* Клетка занятия окрашена в цвет группы (inline background). Текст белый,
   статус — полупрозрачным белым; наведение чуть затемняет тем же цветом. */
.cal-item.cal-colored { color: #fff; }
.cal-item.cal-colored .cal-state { color: rgba(255,255,255,0.85); }
.cal-item.cal-colored .cal-dot { box-shadow: 0 0 0 1px rgba(255,255,255,0.6); }
a.cal-item.cal-colored:hover, button.cal-item.cal-colored:hover { color: #fff; filter: brightness(0.92); }
.cal-time { font-weight: 600; }
/* Кабинет родителя: у проведённого занятия есть комментарий учителя.
   Значок подсказывает, что на клетку можно навести или нажать. */
.cal-has-note { cursor: pointer; }
.cal-note-mark { float: right; margin: 0.15rem 0 0 0.25rem; font-size: 0.75rem; color: #8a8a8a; }
.cal-note-pop {
    position: fixed;
    z-index: 1080;
    max-width: min(320px, calc(100vw - 16px));
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: var(--darker-brown);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.35;
    white-space: pre-line;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
.cal-title { display: inline-block; }
/* Имя ребёнка в клетке календаря родителя — отдельной строкой под группой. */
.cal-child { display: block; font-weight: 600; }
.cal-state { color: #6c757d; }
.cal-planned { opacity: 0.65; border-style: dashed; }
.cal-running { border-color: var(--terracotta); border-width: 2px; }
/* Проведённые занятия — одинаково блеклые для всех: серый шрифт, блёклый
   фон. Перебиваем inline-цвет группы (!important) и белый текст .cal-colored. */
.cal-item.cal-finished {
    background-color: #ededed !important;
    border-color: #d6d6d6 !important;
    color: #8a8a8a !important;
}
.cal-item.cal-finished .cal-time,
.cal-item.cal-finished .cal-title,
.cal-item.cal-finished .cal-child,
.cal-item.cal-finished .cal-state { color: #8a8a8a !important; }
.cal-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    vertical-align: middle;
}
.cal-dot-green  { background: #2e7d32; }
.cal-dot-yellow { background: #f0ad4e; }
.cal-dot-red    { background: #c0392b; }
/* Отменённое занятие: блёклая ячейка, зачёркнутый текст и красный крест X. */
.cal-item.cal-cancelled {
    position: relative;
    background-color: #f1f1f1;
    border: 1px solid #d6d6d6;
    color: #9a9a9a;
    text-decoration: line-through;
    background-image:
        linear-gradient(to top right, transparent calc(50% - 1px), rgba(192,57,43,0.55) calc(50% - 1px), rgba(192,57,43,0.55) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(192,57,43,0.55) calc(50% - 1px), rgba(192,57,43,0.55) calc(50% + 1px), transparent calc(50% + 1px));
}
.cal-item.cal-cancelled .cal-state { color: #c0392b; text-decoration: none; }
/* Убранное занятие (lesson.removed_at): только у персонала — пунктирная
   бледная клетка без креста, это не отмена. */
.cal-item.cal-removed {
    background: transparent;
    border: 1px dashed #d6d6d6;
    color: #b5b0aa;
}
/* Ссылка отменить/восстановить под клеткой. */
.cal-cancel-form { margin-bottom: 0.25rem; text-align: center; }
.cal-cancel-btn {
    border: 0;
    background: none;
    padding: 0;
    font-size: 0.72rem;
    color: #b1560b;
    cursor: pointer;
    text-decoration: underline;
}
.cal-cancel-btn:hover { color: #c0392b; }
/* «перенести» и «отменить» в одну строку под клеткой, по центру клетки. */
.cal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.6rem; align-items: baseline; }
.cal-actions .cal-cancel-form { margin-bottom: 0.25rem; }
a.cal-cancel-btn { display: inline-block; margin-bottom: 0.25rem; }
/* Пометка переноса на клетке: «перенос с 30.09» / «новое время». */
.cal-moved { display: block; font-size: 0.72rem; font-style: italic; opacity: 0.9; }
.cal-more { font-size: 0.75rem; color: var(--dark-brown); }

/* Шкала времени «Недели» и «Дня» (_calendar.html, timeline_body): слева
   часы, колонки дней с линиями каждого часа и получаса, занятия — блоки с
   координатами из schedule._timeline. */
.cal-tl { --cal-line: #bfbdb5; --cal-half: #e6e2d8; border: 1px solid var(--cal-line); background: #fff; }
.cal-tl-week { min-width: 700px; }
.cal-tl-day, .cal-tl-day-bdays { max-width: 36rem; margin: 0 auto; }
.cal-tl-head, .cal-tl-body { display: grid; grid-template-columns: 3.5rem repeat(7, minmax(0, 1fr)); }
.cal-tl-day .cal-tl-body { grid-template-columns: 3.5rem minmax(0, 1fr); }
.cal-tl-head > div { text-align: center; font-size: 0.85rem; font-weight: 700; padding: 0.35rem 0.2rem;
    border-left: 1px solid var(--cal-line); }
.cal-tl-head > div:first-child { border-left: 0; }
.cal-tl-head .cal-date { display: block; font-size: 1.15rem; font-weight: 700; color: var(--dark-brown); }
.cal-tl-head .cal-wd-sat { color: #0d6efd; }
.cal-tl-head .cal-wd-sun { color: #dc3545; }
.cal-tl-head .cal-today { color: var(--terracotta); background: #dcecfb; }
.cal-tl-head .cal-today .cal-date {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.1em; height: 2.1em; padding: 0 0.2em; margin-top: 0.15rem;
    border-radius: 999px; background: var(--terracotta); color: #fff; font-size: 1rem; font-weight: 700;
}
.cal-tl-body { position: relative; box-sizing: content-box; }
.cal-tl-head + .cal-tl-body { border-top: 1px solid var(--cal-line); }
.cal-tl-hours { position: relative; }
.cal-tl-hour { position: absolute; right: 0.4rem; transform: translateY(2px);
    font-size: 0.78rem; font-weight: 700; color: var(--dark-brown); white-space: nowrap; }
.cal-tl-col {
    position: relative; border-left: 1px solid var(--cal-line); background-color: #fff;
    background-image:
        repeating-linear-gradient(to bottom, var(--cal-line) 0, var(--cal-line) 1px, transparent 1px, transparent var(--cal-hour)),
        repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--cal-hour) / 2),
            var(--cal-half) calc(var(--cal-hour) / 2), var(--cal-half) calc(var(--cal-hour) / 2 + 1px),
            transparent calc(var(--cal-hour) / 2 + 1px), transparent var(--cal-hour));
}
.cal-tl-col.cal-today { background-color: #dcecfb; }
/* Блок: клетка растянута на всю высоту, под ней «перенести · отменить».
   Не влезает — обрезается, а при наведении раскрывается поверх соседей. */
.cal-tl-block { position: absolute; display: flex; flex-direction: column; padding: 1px 2px;
    overflow: hidden; box-sizing: border-box; }
.cal-tl-block > .cal-cell-hw, .cal-tl-block form.d-block,
.cal-tl-block > .cal-cell-hw > form.d-block { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* Форма «начать» помечена .d-block, а у Bootstrap он с !important —
   без своего !important кнопка не растягивалась на высоту занятия. */
.cal-tl-block form.d-block { display: flex !important; }
/* Содержимое кнопки браузер центрирует по вертикали — прижимаем к верху,
   как у ссылки. */
/* Прошедшее и не проведённое занятие (occ.overdue): ярко-красная рамка и
   белая полоска внутри неё — рамка цвета #d4574a сливалась с оранжевыми
   группами. Внутрь, а не наружу: .cal-tl-block режет всё, что за краем.
   Без полупрозрачности плана — хвост должен бросаться в глаза. */
.cal-item.cal-overdue {
    border: 2px solid #e00000 !important;
    box-shadow: inset 0 0 0 2px #fff;
    opacity: 1;
}
.cal-tl-block button.cal-item { display: flex; flex-wrap: wrap; align-content: flex-start;
    align-items: baseline; column-gap: 0.25em; }
.cal-tl-block .cal-item { flex: 1 1 auto; margin-bottom: 1px; min-height: 0; }
.cal-tl-block .cal-actions, .cal-tl-block .cal-cancel-form { flex: 0 0 auto; font-size: 0.72rem; }
.cal-tl-block .cal-actions .cal-cancel-form, .cal-tl-block a.cal-cancel-btn,
.cal-tl-block .cal-cancel-form { margin-bottom: 0; }
.cal-tl-block:hover, .cal-tl-block:focus-within {
    height: auto !important; overflow: visible; z-index: 5;
    background: var(--white); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

@media (max-width: 767.98px) {
    .cal-month td { height: auto; }
    .cal-item { font-size: 0.72rem; }
}

/* Сворачиваемые карточки добавления (родитель, группа, ребёнок):
   значок −/+ слева в шапке. Bootstrap вешает класс .collapsed на
   переключатель, когда тело свёрнуто. */
.collapse-card-toggle { cursor: pointer; user-select: none; }
.collapse-card-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid currentColor;
  border-radius: 0.3rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.75;
}
.collapse-card-sign::before { content: "\2212"; }          /* − когда раскрыто */
.collapse-card-toggle.collapsed .collapse-card-sign::before { content: "+"; }

/* Строка родителя в режиме чтения: readonly-поля выглядят как обычный текст,
   а не как поля ввода. Карандаш снимает readonly — поле снова обычное. */
.parent-field[readonly],
.child-field[readonly],
.user-field[readonly] {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  padding-left: 0.25rem;
}

/* Значки-кнопки в аккуратных прямоугольничках одного размера (как карандаш —
   btn-sm outline-secondary). В проекте .btn-primary/.btn-outline-primary
   скруглены в «таблетку» и раздуты паддингом (0.75rem 2rem) — для иконок это
   выглядит крупными овалами, поэтому возвращаем прямой уголок и размер btn-sm. */
.icon-btn.btn {
  border-radius: 6px !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1;
}

/* Список чекбоксов (привязка детей/родителей в карточках) — прокрутка, если
   элементов много. */
.check-list { max-height: 20rem; overflow-y: auto; }

/* Кнопка в одну строку с полями формы: высота как у form-control (в проекте
   .btn-primary/.btn-outline-primary раздуты вертикальным паддингом и оттого
   не совпадают по центру с полями). Горизонтальный паддинг («таблетку») не
   трогаем. */
.btn-inline { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }

/* Подсветка дня рождения ребёнка в календаре: одна строчка на ребёнка. */
.cal-bday {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b5347d;
  background: #ffe3f1;
  border: 1px solid #f3b6d5;
  border-radius: 6px;
  padding: 0.1rem 0.35rem;
  margin-bottom: 0.15rem;
  white-space: normal;
  word-break: break-word;
}

/* ===== Переписка с родителями =================================================
   Две панели: слева разговоры, справа открытый. Палитра наша, кремово-охристая,
   а не зелёная, как в образце: чат живёт внутри кабинета и не должен выглядеть
   чужой вставкой. */
.chat-layout {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 16px;
    /* Колонки одной высоты: при align-items: start каждая брала высоту своего
       содержимого, и рядом с длинным списком групп панель переписки висела
       коротким огрызком. Высоту строки задаёт та колонка, что выше, обе
       упираются в общий предел, а прокрутка остаётся внутри панелей. */
    align-items: stretch;
    /* Высота ОПРЕДЕЛЁННАЯ, а не «не больше чем». С max-height строку сетки
       по-прежнему задавало содержимое: длинная переписка растягивала панель,
       и подрезка срезала её низ — вместе со строкой ввода. При заданной
       высоте обе колонки живут внутри неё, а прокручиваются только лента
       сообщений и список. Здесь же и равенство высот двух панелей. */
    height: 70vh;
    min-height: 320px;
    overflow: hidden;
}

/* На узком экране панели встают друг под друга: две колонки по 150 px
   нечитаемы, а горизонтальная прокрутка на телефоне недопустима. */
@media (max-width: 767.98px) {
    /* На телефоне панели идут друг за другом, поэтому общая высота строки не
       нужна — каждая ограничивается своей. */
    .chat-layout { grid-template-columns: 1fr; height: auto; }
    .chat-list { max-height: 40vh; }
    .chat-pane { max-height: 70vh; }
    /* Колонки сетки не уже содержимого по умолчанию: длинная ссылка в
       последнем сообщении распирала их, и панели обрезались справа. */
    .chat-layout > * { min-width: 0; }
    /* Личные сообщения: либо список, либо открытый разговор. :has, а не
       класс: скрипт при переходах меняет только содержимое .chat-layout. */
    .chat-layout-dm:has(> .chat-pane:not(.chat-pane-empty)) > .chat-list { display: none; }
    .chat-layout-dm > .chat-pane-empty { display: none; }
    .chat-layout-dm > .chat-list { max-height: none; }
    .chat-layout-dm > .chat-pane { height: 72vh; min-height: 420px; max-height: none; }
    .chat-head .chat-head-back { display: inline-flex; }   /* вес выше базового display:none ниже */
    .chat-layout-dm .chat-head-close { display: none; }
}
.chat-head-back { display: none; align-items: center; justify-content: center;
    width: 32px; height: 32px; color: var(--dark-brown); text-decoration: none; font-size: 1.1rem; }

.chat-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--white);
    border: 1px solid var(--light-gold);
    border-radius: 14px;
}

/* Прокручивается внутренний блок, а не вся панель: выпадающий список «+»
   лежит в шапке, и при overflow на самой панели он обрезался её краем. */
.chat-list-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 0 0 14px 14px;
}

.chat-list-head {
    padding: 12px 16px;
    font-weight: 600;
    color: var(--dark-brown);
    border-bottom: 1px solid var(--light-gold);
    background: var(--white);
    /* Скругление повторяет рамку панели: квадратная шапка перекрывала её
       верхние углы, и рамка выглядела разорванной. Обрезкой содержимого это
       не решить — она срезала бы выпадающий список «+». Липкость не нужна:
       прокручивается внутренний блок, а шапка и так остаётся на месте. */
    border-radius: 13px 13px 0 0;
}

.chat-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--light-cream);
}

.chat-item:hover { background: var(--light-cream); }
.chat-item-active { background: var(--cream); }
.chat-item-body { min-width: 0; flex: 1; }
.chat-item-top { display: flex; justify-content: space-between; gap: 8px; }
.chat-item-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-item-time { color: var(--brown-accent); font-size: .8rem; white-space: nowrap; }

/* Предпросмотр последнего сообщения — одной строкой: перенос превратил бы
   список в простыню. */
.chat-item-last {
    color: var(--brown-accent);
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-item-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--terracotta);
    flex: 0 0 auto;
}

.chat-pane {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--light-gold);
    border-radius: 14px;
    overflow: hidden;
    /* min-height у панели убран: вместе с общим ограничением сетки он
       заставлял её вылезать за карточку. Нижний предел теперь у сетки. */
    min-height: 0;
    height: 100%;
}

.chat-pane-empty { align-items: center; justify-content: center; min-height: 200px; padding: 24px; }
.chat-pane-solo { min-height: 320px; }

.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--cream);
    border-bottom: 1px solid var(--light-gold);
}

.chat-head-name { font-weight: 600; }
.chat-head-sub { font-size: .8rem; color: var(--brown-accent); }
.chat-head-close { color: var(--brown-accent); font-size: 1.4rem; line-height: 1; text-decoration: none; }

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    overflow-y: auto;
    /* Высоту диктует панель, а не сама лента: max-height тут не давал бы
       переписке занять всю колонку. min-height: 0 нужен, иначе флекс не
       разрешает блоку сжиматься и прокрутка не включается. */
    flex: 1;
    min-height: 0;
}

.chat-day { text-align: center; }
.chat-day span {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--light-cream);
    color: var(--brown-accent);
    font-size: .8rem;
}

.chat-row { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.chat-row-mine { flex-direction: row-reverse; }

.chat-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--medium-gold);
    color: var(--darker-brown);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
}

.chat-bubble {
    max-width: min(80%, 560px);
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--light-cream);
    border: 1px solid var(--light-gold);
}

/* Свои сообщения — заметнее и справа: так видно, где чья реплика, даже если
   имена длинные и похожие. */
.chat-bubble-mine {
    background: var(--cream);
    border-color: var(--medium-gold);
}

.chat-author { font-size: .8rem; font-weight: 600; color: var(--terracotta); }

/* У своих сообщений имя не пишем: человек и так знает, что писал он, а
   подпись отнимает строку в каждом втором пузыре. */
.chat-bubble-mine .chat-author { display: none; }

/* Переносы строк сохраняем: в сообщении бывают списки, а HTML их схлопнул бы
   в одну строку. Длинное слово или ссылка не должны рвать пузырь. */
.chat-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-file { display: block; font-size: .85rem; }

/* Объявление у родителя: длинная ссылка без пробелов растягивала флекс-колонку
   и всю страницу на телефоне (+600 px вбок). min-width: 0 разрешает колонке
   стать уже содержимого, overflow-wrap переносит само слово. */
.broadcast-card > .flex-grow-1 {
    min-width: 0;
    overflow-wrap: anywhere;
}
.chat-meta {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
    font-size: .75rem;
    color: var(--brown-accent);
}

.chat-read-seen { color: var(--blue); }

.chat-composer {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 10px 12px;
    border-top: 1px solid var(--light-gold);
    background: var(--white);
}

.chat-attach {
    cursor: pointer;
    color: var(--brown-accent);
    padding: 8px;
    line-height: 1;
}

.chat-input-wrap { flex: 1; min-width: 0; }

.chat-input {
    resize: none;
    max-height: 180px;
    border-radius: 12px;
}

.chat-send {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    padding: 0;
}

/* Значок непрочитанных во вкладке: без отступа он прилипал к слову и читался
   как часть подписи («Сообщения3»). Отступ задаём классом, а не утилитой
   ms-2, чтобы заодно поправить вертикальное положение — цифра должна стоять
   по центру строки, а не нависать над ней. */
/* Значок «внимание» (tracker/_warn_icon.html) на вкладке «Расписание»:
   есть непроведённые занятия. */
.tab-warn { margin-left: .4rem; display: inline-flex; vertical-align: -0.15em; }
.warn-icon { flex: 0 0 auto; }

/* Список непроведённых занятий над календарём (tracker/today.html). */
.overdue-box {
    background: #fff8e1;
    border: 1px solid #f0d58a;
    border-radius: 12px;
    padding: 0.75rem 1rem;
}
.overdue-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.overdue-head .warn-icon { font-size: 1.3rem; }
.overdue-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.35rem 0;
    border-top: 1px solid #f3e4b5;
}
.overdue-when { font-weight: 600; min-width: 8.5rem; }
.overdue-group { flex: 1 1 8rem; }
.overdue-note { color: #b02a1e; font-size: 0.85em; margin-left: 0.35rem; }
.overdue-actions { display: flex; gap: 0.5rem; }
/* Обе кнопки одного размера: у .btn-primary на сайте свои большие поля. */
.overdue-actions .overdue-btn {
    padding: 0.3rem 0.9rem;
    font-size: 0.875rem;
    line-height: 1.4;
    border-radius: 8px;
    min-width: 6.5rem;
}

.tab-badge {
    margin-left: .5rem;
    vertical-align: middle;
    font-size: .7rem;
    padding: .25em .5em;
}

/* Строка группы состоит из галочки и ссылки: галочка выбирает получателей
   объявления, ссылка открывает ленту. Поэтому .chat-item здесь — контейнер,
   а кликабельная часть вынесена в .chat-item-link. */
.chat-item-link {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.chat-check { flex: 0 0 auto; margin: 0; cursor: pointer; }

.chat-list-hint {
    font-size: .75rem;
    font-weight: 400;
    color: var(--brown-accent);
}

/* «+» над списком разговоров — обычный <details>, без скриптов: список
   родителей нужен редко, а лишний JS на странице переписки ни к чему. */
.chat-new { position: relative; }

.chat-new summary {
    list-style: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--medium-gold);
    color: var(--darker-brown);
    font-size: 1.1rem;
    line-height: 1;
}

.chat-new summary::-webkit-details-marker { display: none; }

.chat-new-list {
    position: absolute;
    right: 0;
    top: 34px;
    z-index: 5;
    min-width: 230px;
    /* Ширину ограничиваем шириной панели: без этого список растягивался под
       самое длинное ФИО и вылезал за левый край. */
    max-width: 260px;
    max-height: 280px;
    overflow: auto;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--light-gold);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(93, 61, 42, .15);
}

.chat-new-list a {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-new-list a:hover { background: var(--light-cream); }

/* Тостер о результате действия в переписке. Нужен, потому что страница
   больше не перезагружается: обычное flash-сообщение показать негде, а
   молчание после «Отправить» выглядит как будто ничего не произошло. */
.chat-toast {
    position: fixed;
    /* По центру снизу, а не в углу: в правом нижнем углу живёт плавающая
       кнопка-чашка, и она перекрывала сообщение. */
    left: 50%;
    bottom: 16px;
    z-index: 1080;
    max-width: min(90vw, 420px);
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--darker-brown);
    color: var(--white);
    box-shadow: 0 10px 24px rgba(74, 46, 31, .25);
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.chat-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Видео во вложении: плеер по ширине пузыря, но не во весь экран. Под ним
   остаётся ссылка на скачивание — на случай, если браузер не проигрывает
   кодек (.mov с iPhone открывается не везде). */
.chat-video video {
    width: 100%;
    max-height: 320px;
    border-radius: 10px;
    background: #000;
    display: block;
}

/* Аудио во вложении: плеер по ширине пузыря, под ним — ссылка на скачивание. */
.chat-audio audio {
    width: 100%;
    max-width: 420px;
    display: block;
}

/* Поле времени из выпадашек (templates/_time_input.html). Ширина общая
   с подписью над колонкой, чтобы «Начало»/«Конец» стояли над своими полями. */
.time-pick {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: 9rem;
}

.time-pick--12 {
    width: 13rem;
}

.time-pick .form-select {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 1.6rem;
    background-position: right 0.4rem center;
}

.time-pick-sep {
    font-weight: 600;
}

.time-pick-head {
    width: 9rem;
}

.time-pick-head.time-pick--12 {
    width: 13rem;
}

/* Посещаемость группы (templates/tracker/_attendance_grid.html).
   Первый столбец липкий: при прокрутке длинного месяца вбок имя остаётся
   на месте. Цвета — «был / не был», не цвета поведения. */
.att-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.att-scroll {
    overflow-x: auto;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    padding: 0.5rem 0.75rem;
}

.att-grid {
    border-collapse: separate;
    border-spacing: 4px;
    min-width: 100%;
    font-size: 0.9rem;
}

.att-grid th,
.att-grid td {
    vertical-align: middle;
}

.att-grid .att-name {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--white);
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
    padding: 0.35rem 1rem 0.35rem 0.25rem;
    min-width: 12rem;
}

.att-grid thead .att-name {
    font-weight: 600;
    color: var(--dark-brown);
}

/* Закреплённая колонка липнет к краю содержимого, а слева ещё поле
   .att-scroll (0.75rem) и border-spacing (4px): в этой щели при прокрутке
   влево проезжали цветные клетки и даты. Белая «тень» влево её закрывает. */
.att-grid .att-name {
    z-index: 2;
    box-shadow: -1.1rem 0 0 var(--white);
}

/* Выбывший из группы (_attendance_grid.html, tr.att-left): серая плашка
   под ФИО и серые клетки дат после выбытия (att-none, обычно прозрачные).
   Плашка — псевдоэлемент: сама ячейка остаётся белым прямоугольником, иначе
   в скруглённых углах виднелись бы клетки, уехавшие под неё при прокрутке. */
.att-grid tr.att-left > .att-none,
.att-grid .att-gone { background: var(--att-left-bg); }
.att-grid tr.att-left > .att-name::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 8px;
    background: var(--att-left-bg);
}

/* Сетку прокрутили вбок (script.js ставит .is-scrolled): клетки, уезжающие
   под колонку имён, не обрезаются краем, а плавно гаснут. Без прокрутки
   затухания нет — оно легло бы на первую клетку. */
.att-scroll.is-scrolled .att-grid .att-name::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 1.5rem;
    background: linear-gradient(to right, var(--white), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.att-grid { --att-left-bg: #ebe7e1; }

.att-grid a {
    color: var(--dark-brown);
    text-decoration: none;
}

.att-grid a:hover {
    text-decoration: underline;
}

.att-months th {
    text-align: center;
    font-weight: 600;
    color: var(--dark-brown);
    padding-bottom: 0.25rem;
}

.att-date {
    text-align: center;
    font-weight: 500;
    color: var(--dark-brown);
    min-width: 2.75rem;
    line-height: 1.1;
    padding: 0.3rem 0;
    border-radius: 8px;
}

.att-date .att-day {
    display: block;
    font-size: 1rem;
}

.att-date .att-wd {
    display: block;
    font-size: 0.7rem;
    color: var(--brown-accent);
    font-weight: 400;
}

.att-date.is-today {
    background: var(--terracotta);
    color: var(--white);
}

.att-date.is-today .att-wd {
    color: rgba(255, 255, 255, 0.85);
}

.att-date.is-cancelled .att-day {
    text-decoration: line-through;
    color: #a89c90;
}

.att-cell {
    height: 2.1rem;
    min-width: 2.75rem;
    border-radius: 6px;
    background: #f3eee6;
}

/* Был — цвет поведения, как точки на экране занятия (tracker.css).
   Не был — серая клетка с «Н», как в бумажном журнале. */
.att-green     { background: #3f9b5f; }
.att-yellow    { background: #e9b949; }
.att-red       { background: #d4574a; }
/* «ДЗ не сделано» на занятии — красная точка в правом верхнем углу клетки
   (белая обводка — чтобы читалась и на красной клетке). */
.att-cell.att-hw-missed { position: relative; }
.att-cell.att-hw-missed::after { content: ''; position: absolute; top: 3px; right: 3px;
    width: 9px; height: 9px; border-radius: 50%; background: #c0392b;
    box-shadow: 0 0 0 2px #fff; }
@media print { .att-cell.att-hw-missed::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Журнал занятий на странице группы: белая карточка, как сетка
   посещаемости; вся строка — ссылка (stretched-link, tr — опора). */
.lesson-journal-wrap { max-width: 760px; background: #fff; border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: .25rem .75rem; }
.lesson-journal { margin-bottom: 0; }
.lesson-journal th { font-size: .8rem; font-weight: 600; color: #6c757d; border-bottom-width: 1px; }
.lesson-journal tbody tr { position: relative; }
.lesson-journal tbody tr:hover { background: #fbf6ea; }
.lesson-journal tbody tr:last-child td { border-bottom: 0; }
.lesson-journal a { text-decoration: none; color: var(--dark-brown, #5a3e2b); font-weight: 600; }
.lesson-journal .lj-wd { display: inline-block; width: 1.6rem; color: #8a7a6a; font-weight: 400; }
.lesson-journal .lj-off td { color: #9a9a9a; }
.lesson-journal .lj-off a { color: #9a9a9a; font-weight: 400; text-decoration: line-through; }
.lj-bar { display: flex; width: 7rem; height: .7rem; border-radius: 4px; overflow: hidden; gap: 1px; }
.lj-bar i { display: block; min-width: 4px; }
.lj-running { background: #e9b949; color: #4a3b1f; font-weight: 500; }
/* Подсказки полоски и флажка: над слоем stretched-link, иначе не видны. */
.lesson-journal .lj-bar, .lesson-journal .fa-flag, .lesson-journal .fa-check { position: relative; z-index: 2; }
.att-absent    {
    background: #cfc8bf;
    color: #5f564d;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    font-style: normal;
}
.att-cancelled { background: repeating-linear-gradient(135deg, #e4ded5 0 5px, #f1ece5 5px 10px); }
.att-missed    { background: #fff; box-shadow: inset 0 0 0 2px #d9cbb4; border: 0; }
.att-future    { background: #fff; box-shadow: inset 0 0 0 1px #e8e0d2; }
.att-none      { background: transparent; }
.att-empty     { background: #fff; box-shadow: inset 0 0 0 1px #bdb3a6; }

.att-total,
.att-num {
    text-align: center;
    white-space: nowrap;
    padding: 0 0.4rem;
    color: var(--dark-brown);
}

.att-total { font-weight: 600; padding-left: 0.75rem; }
.att-num { color: #7a6a5c; min-width: 1.75rem; }
.att-action { padding-left: 0.5rem; white-space: nowrap; }

.att-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin-top: 0.6rem;
}

/* Пункт легенды — по центру строки через flex, а не vertical-align: пустой
   квадратик ложится по нижнему краю, а «Н» — по строке буквы внутри, и при
   одинаковом сдвиге «Н» съезжал вниз. */
.att-legend > span { display: inline-flex; align-items: center; }
.att-legend .att-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    width: 1rem;
    min-width: 0;
    height: 1rem;
    margin-right: 0.2rem;
    border-radius: 4px;
}

@media print {
    .att-grid { font-size: 0.8rem; }
    .att-grid,
    .att-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .att-scroll { box-shadow: none; padding: 0; overflow: visible; }
}

@media (max-width: 576px) {
    .att-grid .att-name {
        min-width: 7.5rem;
        max-width: 9rem;
        white-space: normal;
        line-height: 1.2;
        padding-right: 0.5rem;
    }
}

/* Домашние задания в карточке группы (templates/tracker/_homework_*.html).
   Свёрнутая строка — как в списке у BigBen, но с датой занятия; раскрытая —
   задание, отчёт, файлы и слова одним блоком. */
.hw-form {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    padding: 0.9rem 1rem;
}

.hw-list {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.hw-item + .hw-item {
    border-top: 1px solid #efe7da;
}

.hw-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
}

.hw-date {
    font-weight: 600;
    color: var(--dark-brown);
    white-space: nowrap;
    min-width: 5.5rem;
}

.hw-preview {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark);
}

.hw-badges {
    display: inline-flex;
    gap: 0.75rem;
    color: #8a7f73;
    font-size: 0.85rem;
    white-space: nowrap;
}

.hw-open {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #3f9b5f;
    text-decoration: none;
    white-space: nowrap;
}

.hw-open:not(.collapsed) {
    color: var(--dark-brown);
}

.hw-icon {
    border: 0;
    background: transparent;
    color: #8a7f73;
    padding: 0.15rem 0.3rem;
    line-height: 1;
}

.hw-icon:hover { color: var(--dark-brown); }
.hw-icon-danger:hover { color: #c0392b; }

.hw-body {
    padding: 0.25rem 1rem 1rem calc(1rem + 5.5rem + 0.75rem);
}

.hw-part + .hw-part { margin-top: 0.75rem; }

.hw-label {
    color: #8a7f73;
    font-weight: 600;
}

.hw-text {
    display: inline;
    white-space: pre-line;
    overflow-wrap: anywhere; /* длинная ссылка не вылезает за карточку на телефоне */
}

.hw-files { margin-top: 0.25rem; }

.hw-words-head {
    background: #f5efe4;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.35rem;
}

.hw-words {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.35rem 1rem;
    margin: 0;
    padding: 0 0.6rem;
}

.hw-words dt { font-weight: 600; color: var(--dark-brown); }
.hw-words dd { margin: 0; color: #8a7f73; font-size: 0.9rem; }

.hw-meta {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: #a89c90;
}

@media (max-width: 576px) {
    .hw-row { flex-wrap: wrap; gap: 0.35rem 0.75rem; }
    .hw-preview { flex-basis: 100%; order: 3; white-space: normal; }
    .hw-body { padding-left: 1rem; }
}

/* Надпись у раскрытия ДЗ следует за состоянием: Bootstrap снимает
   .collapsed, когда блок раскрыт. */
.hw-open .hw-open-hide { display: none; }
.hw-open:not(.collapsed) .hw-open-show { display: none; }
.hw-open:not(.collapsed) .hw-open-hide { display: inline; }

/* Метка нового ДЗ в кабинете родителя. */
.hw-new {
    background: var(--terracotta);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}

/* Подсказка «кабинет на экран телефона». */
.install-hint { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
    background: #fff; border: 1px solid var(--light-gold); border-radius: 10px;
    padding: .55rem .75rem; font-size: .9rem; }
.install-hint[hidden] { display: none; }
.install-hint-icon { font-size: 1.4rem; color: var(--dark-brown); flex: none; }
.install-hint-text { flex: 1 1 auto; }
.install-hint .btn-close { flex: none; }

/* Оплата: плашка-напоминание под меню кабинета родителя, вкладка с QR,
   отметка «Я оплатил(а)»; у персонала — отметка в списке. */
.pay-reminder { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
    margin: -.75rem 0 1.25rem; padding: .65rem .9rem; border-radius: 10px;
    background: #fff3d6; border: 1px solid #f0c96a; }
.pay-reminder > .fa-bell { color: #b1560b; font-size: 1.1rem; }
.pay-reminder-text { flex: 1 1 16rem; }
.pay-reminder-actions { display: flex; gap: .5rem; align-items: center; }
.pay-card { display: flex; flex-wrap: wrap; gap: 1.25rem; background: #fff; border-radius: 12px;
    padding: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.pay-qr { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.pay-qr img { width: 260px; height: 260px; image-rendering: pixelated; }
.pay-info { flex: 1 1 18rem; min-width: 0; }
.pay-steps { padding-left: 1.2rem; margin-bottom: .75rem; }
.pay-check { background: #f3f8f2; border: 1px solid #d6e8d3; border-radius: 8px;
    padding: .5rem .7rem; font-size: .9rem; margin-bottom: .75rem; }
.pay-check .fa-shield-halved { color: #2f7a48; margin-right: .25rem; }
.pay-req { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .75rem;
    font-size: .9rem; margin: 0; }
.pay-req dt { color: #6f6458; font-weight: 500; }
.pay-req dd { margin: 0; overflow-wrap: anywhere; }
.pay-copy-btn { border: 0; background: none; color: #6f6458; padding: 0 .3rem; cursor: pointer; }
.pay-copy-btn:hover { color: var(--dark-brown); }
.pay-note { margin: .75rem 0 0; font-size: .9rem; color: #6f6458; }
.pay-mark { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.25rem; }
.pay-mark-ok { color: #2f7a48; font-weight: 600; }

/* Числа за месяц в кабинете родителя: строка на ребёнка. */
.parent-stats { display: flex; flex-direction: column; gap: .4rem; }
.parent-stats-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
    background: #fff; border-radius: 10px; padding: .5rem .75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.parent-stats-title { font-weight: 600; color: var(--dark-brown); margin-right: .25rem; }
.parent-stats-title::first-letter { text-transform: uppercase; }
.parent-stat { font-size: .9rem; color: #6f6458; background: #f6f1e7;
    border-radius: 999px; padding: .15rem .65rem; white-space: nowrap; }
.parent-stat b { color: var(--dark-brown); }
.parent-stat-ok b { color: #2f7a48; }
.parent-stat-miss b { color: #b94a3e; }

/* Подсказка в форме ДЗ: к занятию уже есть задание — дописать в него? */
.hw-append-hint { margin: .25rem 0 .6rem; padding: .5rem .75rem; border-radius: 8px;
    background: #fff7e0; border: 1px solid var(--light-gold); font-size: .9rem; }
.hw-append-hint[hidden] { display: none; }
.hw-append-hint .fa-circle-info { color: #b1560b; margin-right: .25rem; }

/* «Сделано» по ДЗ: метка в строке у родителя, блок отметки в раскрытом
   задании, миниатюры фото тетради; у персонала — счётчик и список. */
.hw-done-chip {
    background: #3f9b5f;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}
.hw-done-count { color: #3f9b5f; }
.hw-missed-chip { background: #c0392b; color: #fff; font-size: .72rem; font-weight: 600;
    border-radius: 999px; padding: .1rem .5rem; white-space: nowrap; }
.hw-item-missed { box-shadow: inset 4px 0 0 #c0392b; }
.child-hw-missed > td:first-child { box-shadow: inset 4px 0 0 #c0392b; }
.child-hw .hw-done-photos img { width: 40px; height: 40px; }
.hw-missed-note { margin-top: .75rem; padding: .5rem .75rem; border-radius: 8px;
    background: #fdecea; border: 1px solid #f3c2bc; color: #8f2a20; font-weight: 600; }
.cal-hw-missed { display: inline-block; background: #c0392b; color: #fff; font-size: .68rem;
    font-weight: 600; border-radius: 999px; padding: 0 .4rem; margin-left: .15rem; white-space: nowrap; }
.parent-stat-hw { background: #fdecea; color: #8f2a20; text-decoration: none; }
.parent-stat-hw b { color: #c0392b; }
.hw-done { margin-top: .75rem; padding: .6rem .75rem; border-radius: 8px;
    background: #f3f8f2; border: 1px solid #d6e8d3; }
.hw-done-head { color: #2f7a48; font-weight: 600; margin-bottom: .4rem; }
.hw-done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.hw-done-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.hw-photo-pick { cursor: pointer; margin: 0; }
/* Кнопки фото — та же форма, что у «Сделано», но цвет сайта: зелёный
   оставлен только отметке. */
.btn-photo { background: var(--dark-brown); border-color: var(--dark-brown); color: #fff; }
.btn-photo:hover, .btn-photo:focus-visible { background: #4a2f20; border-color: #4a2f20; color: #fff; }
.btn-photo:disabled, .btn-photo.disabled { background: #a8907f; border-color: #a8907f; color: #fff; opacity: 1; }
.hw-photo-names { max-width: 16rem; overflow-wrap: anywhere; }
.hw-done-photos { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .5rem; }
.hw-done-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px;
    border: 1px solid #d9d2c7; display: block; }
.hw-photo { position: relative; display: inline-block; }
.hw-photo-del { position: absolute; top: -6px; right: -6px; margin: 0; }
.hw-photo-del button { width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0;
    background: #b94a3e; color: #fff; font-size: 15px; line-height: 22px; cursor: pointer; }
.hw-done-list { list-style: none; padding: 0; margin: .25rem 0; }
.hw-done-list li { margin-bottom: .35rem; }
.hw-done-list .hw-done-photos { vertical-align: middle; margin: 0 0 0 .5rem; }
.hw-done-list .hw-done-photos img { width: 48px; height: 48px; }
.hw-check-missed { margin-top: .35rem; font-size: .875rem; color: #a3332a; font-weight: 600; }

/* Кабинет родителя: раздел ДЗ на каждого ученика, по умолчанию свёрнут. */
.hw-child + .hw-child { margin-top: 0.75rem; }
.hw-child-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    color: var(--dark-brown);
    text-decoration: none;
}
.hw-child-head:hover { color: var(--dark-brown); }
.hw-child-name { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.hw-child-chevron { font-size: 0.8rem; transition: transform 0.15s; }
.hw-child-head:not(.collapsed) .hw-child-chevron { transform: rotate(90deg); }
.hw-child .hw-list { margin-top: 0.4rem; }

/* Правка ДЗ прямо в списке — под строкой, в рамке, чтобы форма не
   сливалась с соседними заданиями. */
.hw-edit-form {
    margin: 0 1rem 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid #efe7da;
    border-radius: 10px;
    background: #fffdf8;
}

/* Поле слота с подписью над ним — на телефоне и малом планшете, где общей
   шапки колонок нет (templates/tracker/group.html). */
.slot-field {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
}

.slot-label {
    font-size: 0.8rem;
    color: #8a7f73;
}

@media (min-width: 768px) {
    .slot-field { display: contents; }
}

/* Плашка режима «Войти как» — внизу поверх всего, чтобы её нельзя было не
   заметить. Отступ снизу у body, чтобы плашка не закрывала подвал. */
.view-as-bar {
    position: relative;
    margin-top: 90px;            /* под закреплённой шапкой */
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0.6rem 1rem;
    background: var(--darker-brown);
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}
body.has-event-strip .view-as-bar { margin-top: calc(90px + var(--event-strip-h)); }
/* Страница кабинета под плашкой: её верхний отступ уже рассчитан на шапку. */
.view-as-bar + .flash-box + section.page-top, .view-as-bar + section.page-top { padding-top: 1.5rem !important; }
/* Виджет связи с клубом админу в режиме просмотра ни к чему, а на телефоне
   он наезжал на плашку. */
body:has(.view-as-bar) #floating-widget { display: none; }
/* В кабинете на телефоне плавающая чашка закрывала кнопку отправки в чате
   и куски страниц, а вошедшему она ни к чему — у него свои сообщения. */
@media (max-width: 767.98px) {
    body:has(.teacher-tabs) #floating-widget { display: none; }
}

/* Родители: шесть кнопок справа — одного размера, по самой широкой из
   верхнего ряда (глаз). Без этого ширина кнопки зависела от ширины значка,
   и ряды не совпадали: от 27 до 34 px. */
.parent-actions .icon-btn.btn {
  width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Подписи над полями строки родителя: текст поля сдвинут внутренним
   отступом и рамкой (4px + 1px), подпись сдвигаем так же. Ширины — как у
   полей (10/8/11/9rem) и только на широком экране, где все четыре поля
   стоят в одну строку; на узком они переносятся, и шапка — одно слово. */
.parent-head > span { padding-left: 5px; flex: none; }
.parent-head > .ph-extra { display: none; }
@media (min-width: 1200px) {
  .parent-head > span:first-child { width: 9.5rem; }
  .parent-head > .ph-extra { display: inline-block; }
  .parent-head > .ph-extra:nth-child(2) { width: 8rem; }
  .parent-head > .ph-extra:nth-child(3) { width: 10rem; }
  .parent-head > .ph-extra:nth-child(4) { width: 9rem; }
  .parents-table .parent-edit-form { flex-wrap: nowrap !important; }
}
/* Строки родителей плотнее: отступы ячеек меньше, промежуток между рядами
   кнопок — 2px. */
.parents-table > tbody > tr > td { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.parents-table .parent-actions { gap: 2px !important; }
/* Имена учеников в строке родителя — тем же кеглем, что поля строки
   (form-control-sm), иначе колонка выглядела крупнее остального. */
.parents-table .parent-children-names { font-size: .875rem; }
/* Поиск и фильтры над таблицей (_table_filter.html): на телефоне поиск и
   группа во всю ширину, флажки строкой ниже; с 768 px — всё в одну строку. */
.table-filter .tf-search,
.table-filter .tf-group { flex: 1 1 100%; }
/* Мягко удалённая строка (показана флажком «показать удалённых»). */
tr.row-deleted > td { background: #f3efe8; color: #8f8a83; }
tr.row-deleted .form-control { color: #8f8a83; }
@media (min-width: 768px) {
  .table-filter .tf-search { flex: 1 1 18rem; max-width: 26rem; }
  .table-filter .tf-group { flex: 0 1 14rem; }
}

/* Плашка результата поверх страницы, когда прокрутка восстановлена
   (script.js, data-keep-scroll): иначе она осталась бы за верхом экрана. */
.flash-box.flash-float {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1040;
    padding-top: 95px !important;   /* под навбаром высотой 90px */
    pointer-events: none;
}
.flash-box.flash-float .alert {
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* «Не доставлено» в колонке «Отправка пароля»: почта получателя не приняла
   письмо (templates/_mail_bounce.html). Красным — это требует действия. */
.pw-bounce {
    color: var(--bs-danger, #b02a37);
    margin-top: 2px;
    white-space: normal;
    min-width: 9rem;
}

/* Форма заявки на главной (templates/index.html). */
.lead-form { max-width: 460px; }
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-result { font-weight: 600; color: #2e7d32; }
.lead-result.is-error { color: #c0392b; }
/* После отправки кнопка неактивна — в своём цвете, а не голубой Bootstrap. */
.lead-form .btn-primary:disabled { background-color: #e17342; border-color: var(--dark-gold); opacity: .55; }

/* Вкладка «Заявки» (tracker/leads.html): новые — красной рамкой статуса. */
.leads-table .lead-status { min-width: 8.5rem; }
.leads-table .lead-note { min-width: 12rem; }
.lead-status-new { border-color: #c0392b; font-weight: 600; }
.lead-status-enrolled { border-color: #2e7d32; }

/* Гость на отработке на экране занятия (tracker/lesson.html). */
.makeup-guest { display: block; width: fit-content; margin-top: .15rem; padding: 0 .45rem; border-radius: 999px;
    background: var(--light-gold); color: var(--dark-brown); font-size: .75rem; font-weight: 600; }

/* Карточка ученика: блок «Пропуски» (tracker/child.html). */
.absence-row { background: #fff; border: 1px solid var(--light-gold); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .5rem; }
.absence-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.absence-date { font-weight: 600; white-space: nowrap; }
.absence-group { white-space: nowrap; }
.absence-makeup-btn { margin-left: auto; }
.absence-excuse { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-left: auto; margin-bottom: 0; }
.absence-excuse .form-control { width: 10rem; }
/* С 768 px строка пропуска не переносится: «Назначить отработку» — в конце
   строки, комментарий сжимается по свободному месту. Уже — места на всё не
   хватает, строка переносится. */
@media (min-width: 768px) {
    .absence-head { flex-wrap: nowrap; }
    .absence-excuse { flex-wrap: nowrap; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
    .absence-excuse .form-control { width: auto; flex: 1 1 6rem; min-width: 5rem; max-width: 12rem; }
    .absence-excuse .form-check-label { white-space: nowrap; }
}
.absence-makeup { margin-top: .35rem; }
.absence-new { margin-top: .4rem; }

/* Отработка в календаре (tracker/_calendar.html). */
.cal-makeup { display: block; font-size: .72rem; font-weight: 600; color: var(--terracotta); }
.cal-item.cal-makeup-item { background: var(--light-cream); border: 1px dashed var(--terracotta); color: var(--dark-brown); }
/* Действия строки заявки — у правого края: колонка по содержимому. */
.leads-table .lead-actions { width: 1%; }

/* «Ученики» — как «Родители»: мелкий шрифт и плотные строки; имя-ссылка
   на карточку — цветом текста, а не синим. */
.children-table > tbody > tr > td { font-size: .875rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.children-table .child-card-link { color: inherit; text-decoration: none; }
.children-table .child-card-link:hover { text-decoration: underline; }
/* Поля фамилии и имени в правке — в строку. Не d-flex: его !important
   перебил бы атрибут hidden, и поля были бы видны без карандаша. */
.children-table .child-name-edit:not([hidden]) { display: flex; gap: .25rem; }
.children-table .child-field { min-width: 8rem; }

/* Кружок «ДЗ» в клетке расписания персонала (_calendar.html): зелёный —
   задание к занятию добавлено, серый — нет. */
.cal-cell-hw { position: relative; }
.cal-hw { position: absolute; top: .25rem; right: .3rem; z-index: 1; text-decoration: none; width: 1.45rem; height: 1.45rem;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: .58rem; font-weight: 700; line-height: 1; color: #fff;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
.cal-hw-yes { background: #2e7d32; }
.cal-hw-no { background: #9e9e9e; }
.cal-cell-hw > .cal-item, .cal-cell-hw > form > .cal-item { padding-right: 1.9rem; }
.cal-hw:hover { color: #fff; filter: brightness(.9); transform: scale(1.08); }

/* Карточка ученика (_attendance_grid.html, solo): клетка проведённого
   занятия — ссылка на занятие во всю клетку. Клетки уже, чем в группе:
   карточка ученика шириной 680px, и с обычными «Был» уходил за край. */
.att-grid.att-solo .att-cell,
.att-grid.att-solo .att-date { min-width: 2.1rem; }
.att-grid.att-solo .att-name { min-width: 0; padding-right: 0.5rem; }
.att-cell-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.att-cell-link:hover { outline: 2px solid var(--dark-brown, #6b4a2b); outline-offset: -2px; border-radius: 6px; }

/* Карточка группы: название группы — выпадашка в заголовке
   (tracker/group.html, .group-switch). Шрифт заголовка на белом поле со
   скруглением, как у остальных полей кабинета. */
.group-switch-select {
    /* Ширина — по выбранному названию, а не по самому длинному в списке
       (field-sizing; где не поддерживается — не шире 22rem). */
    field-sizing: content;
    width: auto;
    max-width: min(100%, 22rem);
    font-family: 'Spectral', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark-brown);
    background-color: var(--white);
    border: 1px solid #e3d9c8;
    border-radius: 10px;
    padding-top: 0;
    padding-bottom: 0;
}
.group-switch-select:hover,
.group-switch-select:focus { border-color: #d9cbb4; }
/* Сам список: обычный шрифт, белый фон. Прямые углы раскрытого списка
   рисует браузер; где поддерживается appearance: base-select (Chrome и
   Edge 135+), список оформляем сами — скругление и тень. Остальные
   браузеры эти правила пропускают и показывают обычный список. */
.group-switch-select option {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    background-color: var(--white);
    color: var(--dark-brown);
}
@supports (appearance: base-select) {
    .group-switch-select,
    .group-switch-select::picker(select) { appearance: base-select; }
    /* Стрелка — своя (::picker-icon); стрелка Bootstrap (фон form-select)
       в этом режиме налезала на название. */
    .group-switch-select { display: inline-flex; align-items: center; gap: 0.5rem;
        padding-right: 0.75rem; background-image: none; }
    .group-switch-select::picker-icon { font-size: 1rem; color: var(--brown-accent); }
    .group-switch-select::picker(select) {
        border: 1px solid #e3d9c8;
        border-radius: 10px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        background: var(--white);
        padding: 0.25rem;
        margin-top: 0.25rem;
    }
    .group-switch-select option { padding: 0.4rem 0.75rem; border-radius: 6px; }
    .group-switch-select option:hover,
    .group-switch-select option:focus-visible { background-color: #f3eee6; }
    .group-switch-select option:checked { font-weight: 600; }
    .group-switch-select option::checkmark { display: none; }
}

/* Название группы в клетке расписания — переход в карточку группы
   (data-group-href, script.js). Ссылка на странице занятия — тёмно-коричневая,
   не синяя: так же, как остальные ссылки кабинета на светлом фоне. */
/* Подчёркивание тонкое и полупрозрачное (1px — минимум, тоньше браузер не
   рисует), чётким становится при наведении. */
.cal-group-link { cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 3px; text-decoration-color: rgba(127, 127, 127, 0.45); }
@supports (text-decoration-color: color-mix(in srgb, red 50%, transparent)) {
    .cal-group-link { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
}
.cal-group-link:hover, .cal-group-link:focus-visible { text-decoration-color: currentColor; outline: none; }
a.group-card-link { color: var(--dark-brown); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.group-card-link:hover { color: var(--darker-brown); }

/* Клубные мероприятия (tracker/events.py). Клетка календаря — своя,
   не цвета группы: праздник видно сразу. */
.cal-item.cal-event {
    background-color: #fff4e5;
    border: 1px solid #f0b46a;
    color: var(--dark-brown);
}
a.cal-item.cal-event:hover { background-color: #ffe9cc; color: var(--darker-brown); }
.cal-item.cal-event .fa-star { color: #e9a23b; }
.cal-event-answer-yes { color: #2e7d32; font-weight: 600; }
/* «Не придём» — тоже ответ родителя, не «пусто»: красный, а не серый. */
.cal-event-answer-no { color: #c0392b; font-weight: 600; }
.cal-event-answer-none { color: #d9822b; }
.event-poster { max-width: 100%; max-height: 360px; border-radius: 12px; }
.event-description { white-space: pre-line; }
.event-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border: 1px solid #e3d9c8; border-radius: 999px;
    background: var(--white); font-size: 0.9rem; cursor: pointer;
}
.event-children { max-height: 16rem; overflow-y: auto; padding: 0.5rem; background: var(--white); border-radius: 8px; }
.event-rsvp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding: 0.5rem 0; border-bottom: 1px solid #efe7da; }
.event-roster tr.event-absent td { color: #8f8a83; }
/* Ответ — своим цветом и в серой строке отсутствующего. */
.event-answer-yes, .event-roster tr td.event-answer-yes { color: #2e7d32; font-weight: 600; }
.event-answer-no, .event-roster tr td.event-answer-no { color: #c0392b; font-weight: 600; }
.event-answer-none, .event-roster tr td.event-answer-none { color: #8f8a83; }
.btn-event-no { color: #c0392b; border-color: #c0392b; background: transparent; }
.btn-event-no:hover, .btn-event-no.active { color: #fff; background: #c0392b; border-color: #c0392b; }
.event-invite > .fa-star { color: #e9a23b; font-size: 1.1rem; }
/* «Отмена» рядом с основной кнопкой — просто текст, как в почтовых клиентах. */
.btn-text-cancel { background: none; border: 0; color: var(--dark-brown); text-decoration: none; padding: 0.375rem 0.75rem; }
.btn-text-cancel:hover { text-decoration: underline; color: var(--darker-brown); }
.event-card-text { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Полоска о ближайшем мероприятии над шапкой (base.html, .event-strip).
   Закреплена вместе с шапкой: шапка и страница сдвигаются на её высоту. */
:root { --event-strip-h: 36px; }
.event-strip {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
    height: var(--event-strip-h);
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0 2.5rem 0 1rem;
    background: var(--dark-brown); color: #fff; font-size: 0.9rem;
    white-space: nowrap;
}
.event-strip .fa-star { color: #f5c36b; }
.event-strip-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.event-strip-link { color: #f5c36b; text-decoration: underline; text-underline-offset: 3px; flex: none; }
.event-strip-link:hover { color: #fff; }
.event-strip-close {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: #fff; opacity: 0.7; font-size: 1.3rem; line-height: 1; padding: 0 0.4rem;
}
.event-strip-close:hover { opacity: 1; }
body.has-event-strip { padding-top: var(--event-strip-h); }
body.has-event-strip .navbar.fixed-top { top: var(--event-strip-h); }

/* Полоса вкладок учебной части (tracker/_nav.html): с 1200 px «Родители» и
   «Ученики» всегда начинают вторую строку. Уже — перенос как обычно. */
.nav-tabs-break { display: none; }
@media (min-width: 1200px) { .nav-tabs-break { display: block; flex-basis: 100%; height: 0; } }
/* На 1200–1399 px первая строка (до «Оплаты») не влезала на 14 px —
   отступы внутри вкладок этой полосы чуть меньше. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .teacher-tabs:has(.nav-tabs-break) .teacher-tab { padding-left: 20px; padding-right: 20px; }
}