/* ==========================================================
   School Services — Розклад уроків (публічна частина)
   ==========================================================
   Токени навмисне з префіксом --ssch-, а не --ss-: модуль
   не має перебивати змінні акордеона чи меню, якщо вони
   опиняться на одній сторінці.
========================================================== */

.ss-sched{
    /* Кольори взяті з сайту ліцею: темно-синій хедера й футера,
       золотий акцент логотипа, фіолетовий контентних блоків. */
    --ssch-ink:#0A2647;
    --ssch-navy:#1B4B8F;
    --ssch-gold:#F2B705;
    --ssch-line:#E3E7ED;
    --ssch-muted:#6B7A88;
    --ssch-red:#C0392B;
    --ssch-red-bg:#FDF0EE;
    --ssch-green:#1E7A5A;
    --ssch-sh1:#1B4B8F;
    --ssch-sh1-bg:#E8F0FA;
    --ssch-sh2:#5B3FD9;
    --ssch-sh2-bg:#EFEBFC;
    --ssch-r:14px;
    --ssch-shadow:0 1px 3px rgba(6,32,47,.06),0 8px 24px rgba(6,32,47,.05);

    /* Блок має займати всю доступну ширину. Самого width:100%
       мало: звужується не він, а батьківський контейнер
       Elementor, і 100% від вузького батька лишається вузьким.
       Тому нижче є ще правило з :has() і, як надійна страховка,
       вимірювання в JS (expandWidth). */
    display:block;
    width:100%;
    max-width:1180px;
    margin:0 auto;
    color:var(--ssch-ink);
    font-size:16px;
    line-height:1.5;
}
.ss-sched *{box-sizing:border-box}

/* Розтягуємо обгортки Elementor, усередині яких лежить розклад.
   :has() підтримують усі сучасні браузери; для старих те саме
   робить JS. */
.elementor-widget-container:has(> .ss-sched),
.elementor-widget:has(.ss-sched),
.elementor-shortcode:has(.ss-sched),
.elementor-widget-container:has(> .ss-sched-admin),
.elementor-widget:has(.ss-sched-admin){
    width:100% !important;
    max-width:100% !important;
}

/* ---------- Керування ----------
   Об'єднано в одну панель: селектор і перемикачі належать
   до однієї дії, тому й виглядати мають як один блок. */
.ssch-top{display:flex;gap:8px;align-items:center;margin-bottom:0}

/* Бейджик із датами замість слів «наступний тиждень».
   З'являється у вихідний, коли показано найближчий навчальний
   тиждень, а не поточний: без підпису це читається як помилка
   в даті. Конкретні дати («24–28.08») зрозумілі одразу, без
   потреби здогадуватись, до чого стосується фраза поряд із
   кнопками День/Тиждень; title при наведенні додає причину. */
.ssch-nextwk{
    flex:0 0 auto;font-size:12px;font-weight:600;
    color:#7A5B14;background:#FDF6E3;border:1px solid #EBD9A8;
    padding:4px 10px;border-radius:8px;white-space:nowrap;cursor:help;
}
/* Висота й відступи задані через !important навмисне: тема
   сайту нав'язує select-ам власні padding і line-height, через
   що текст обрізається по висоті. Вертикальних padding немає
   зовсім — браузер центрує текст у select сам, і це працює
   надійніше за будь-який line-height. */
.ss-sched select.ssch-sel{
    flex:0 1 auto;
    min-width:190px;
    max-width:300px;
    height:46px !important;
    padding:0 44px 0 16px !important;
    margin:0 !important;
    font-size:15px;
    font-weight:600;
    font-family:inherit;
    line-height:normal !important;
    color:var(--ssch-ink);
    background-color:#fff;
    border:1px solid var(--ssch-line);
    border-radius:12px;
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A88' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    cursor:pointer;
    transition:border-color .15s,box-shadow .15s;
}
.ssch-sel:hover{border-color:var(--ssch-navy);background-color:#fff}
.ssch-sel:focus{outline:2px solid var(--ssch-navy);outline-offset:-1px;background-color:#fff}
.ssch-wk{
    flex:0 0 auto;height:46px;padding:0 20px;background:#fff;
    border:1px solid var(--ssch-line);border-radius:12px;
    font-size:14px;font-weight:600;font-family:inherit;
    color:var(--ssch-muted);cursor:pointer;
    transition:background-color .15s,border-color .15s,color .15s;
}
.ssch-wk:hover{border-color:var(--ssch-navy);color:var(--ssch-navy)}
.ssch-wk[aria-pressed="true"]{
    background:var(--ssch-navy);border-color:var(--ssch-navy);color:#fff;
}

/* Дні. Горизонтальна прокрутка без видимого скролбара:
   на телефоні 5–6 кнопок в один рядок не влазять. */
.ssch-days{
    display:flex;gap:6px;overflow-x:auto;padding:12px 0 2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.ssch-days::-webkit-scrollbar{display:none}
.ssch-day{
    flex:0 0 auto;padding:9px 15px;background:#fff;
    border:1px solid var(--ssch-line);border-radius:11px;
    font-size:14px;font-weight:600;font-family:inherit;
    color:var(--ssch-muted);cursor:pointer;white-space:nowrap;
    transition:background-color .15s,border-color .15s,color .15s;
}
.ssch-day[aria-selected="true"]{
    background:var(--ssch-ink);border-color:var(--ssch-ink);color:#fff;
}
/* Вкладка «Зміни» стоїть поруч із днями завжди — червона,
   коли зміни є, і спокійна сіро-зелена, коли їх немає.
   Постійне місце важливіше за економію простору. */
.ssch-day--changes{margin-left:8px;position:relative}
.ssch-day--changes.has-changes{
    border-color:#F0C4BC;background:var(--ssch-red-bg);color:var(--ssch-red);
}
.ssch-day--changes.has-changes[aria-selected="true"]{
    background:var(--ssch-red);border-color:var(--ssch-red);color:#fff;
}
.ssch-day--changes.no-changes{
    border-color:#CFE4DA;background:#F0F8F4;color:#3E7D64;
}
.ssch-day--changes.no-changes[aria-selected="true"]{
    background:#1E7A5A;border-color:#1E7A5A;color:#fff;
}
.ssch-day--changes .cnt{
    display:inline-block;min-width:18px;height:18px;line-height:18px;
    padding:0 5px;margin-left:7px;border-radius:9px;
    background:var(--ssch-red);color:#fff;
    font-size:11px;font-weight:800;text-align:center;
}
.ssch-day--changes[aria-selected="true"] .cnt{
    background:rgba(255,255,255,.25);
}

/* Перемикання між кількома датами зі змінами */
.ssch-dates{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.ssch-dbtn{
    padding:7px 13px;background:#fff;border:1px solid var(--ssch-line);
    border-radius:10px;font:600 13px inherit;color:var(--ssch-muted);cursor:pointer;
}
.ssch-dbtn.on{
    background:var(--ssch-red);border-color:var(--ssch-red);color:#fff;
}

/* День, на який є зміни.
   Заміну ставлять не лише на сьогодні, і без позначки про
   завтрашню зміну дізнаються завтра — тобто запізно. */
.ssch-day.has-changes{
    border-color:#F0C4BC;color:var(--ssch-red);
}
.ssch-day.has-changes::before{
    content:"";display:inline-block;width:6px;height:6px;
    border-radius:50%;background:var(--ssch-red);
    margin-right:6px;vertical-align:middle;
}
.ssch-day.has-changes[aria-selected="true"]{
    background:var(--ssch-red);border-color:var(--ssch-red);color:#fff;
}
.ssch-day.has-changes[aria-selected="true"]::before{background:#fff}

.ssch-day.is-today::after{
    content:"";display:inline-block;width:5px;height:5px;
    border-radius:50%;background:var(--ssch-gold);
    margin-left:6px;vertical-align:middle;
}

/* ---------- Банер змін ---------- */
.ssch-alert{
    display:flex;gap:11px;align-items:flex-start;
    background:var(--ssch-red-bg);border:1px solid #F2C9C2;
    border-radius:var(--ssch-r);padding:13px 15px;margin:16px 0;
    font-size:14px;line-height:1.45;
}
/* margin-bottom банера й margin-top сітки схлопуються в один
   16px-й проміжок за звичайною логікою суміжних блоків — окремо
   нічого підганяти не треба, головне, щоб нижній відступ у
   банера взагалі був: раніше його не було зовсім, і картки днів
   впритул зливались із текстом попередження */
.ssch-alert b{color:var(--ssch-red)}

/* ---------- Картка змін у тижневій сітці ----------
   Постійний розклад видно завжди, а зміни стоять окремою
   карткою поруч — так обидві картини перед очима одночасно
   й не треба нічого перемикати, щоб порівняти. */
/* Стовпчик змін стоїть у сітці ЗАВЖДИ. Коли змін немає —
   зелений заголовок і порожні рядки; коли є — червоний
   і заповнені. Так місце для змін завжди на тому самому
   місці, і не треба щоразу шукати очима, чи вони взагалі є. */
.ssch-card.is-none h3{background:#1E7A5A}
.ssch-card.is-none h3 em{color:#BFE3D5}
.ssch-card.is-none{border-color:#C8E3D8}
.ssch-card.is-changes h3{background:var(--ssch-red)}
.ssch-card.is-changes h3 em{color:#FBDDD8}
.ssch-card.is-changes{border-color:#F0C4BC}
/* Змінений рядок тепер малює той самий weekRowsClass/
   weekRowsTeacher, що й денні картки — клас is-changed,
   а не свій окремий is-diff. Загального .ssch-row.is-changed
   (нижче в цьому файлі) досить: той самий червоний фон і
   номер, тепер однаковий для всієї сітки тижня. */

/* Смуга-попередження про найближчі зміни */
.ssch-warn{
    display:flex;gap:11px;align-items:center;flex-wrap:wrap;
    background:var(--ssch-red);color:#fff;
    border-radius:var(--ssch-r);padding:13px 17px;
    margin:16px 0;
    font-size:14.5px;font-weight:600;line-height:1.4;
}
.ssch-warn b{font-weight:800}
.ssch-warn .sp{flex:1}
.ssch-warn a{
    color:#fff;background:rgba(255,255,255,.18);border-radius:8px;
    padding:5px 12px;font-size:13px;font-weight:700;text-decoration:none;
}
.ssch-warn a:hover{background:rgba(255,255,255,.3)}

/* ---------- Список уроків ---------- */
.ssch-list{
    margin-top:16px;background:#fff;border:1px solid var(--ssch-line);
    border-radius:var(--ssch-r);overflow:hidden;box-shadow:var(--ssch-shadow);
}
.ssch-les{
    display:flex;gap:12px;padding:10px 15px;
    position:relative;align-items:flex-start;
}
.ssch-les + .ssch-les{border-top:1px solid var(--ssch-line)}

/* Номер уроку окремим кружком. Час усе одно головніший —
   у школі дві зміни, і "1-й урок" означає різні години. */
/* Вертикальні розділювачі між колонками — як у таблиці.
   Око легше тримає рядок, коли номер, час і предмет візуально
   розділені, а не просто розсунуті відступами. */
.ssch-les{position:relative}

/**
 * Щільніші рядки.
 *
 * Розклад учителя тепер показує день ЦІЛКОМ — від першого
 * уроку І зміни до останнього ІІ, разом із порожніми годинами.
 * Рядків стало вдвічі більше, і при попередній висоті день
 * переставав уміщатися на екран телефона: щоб побачити форму
 * дня, заради якої порожні години й малюються, доводилось
 * гортати.
 *
 * Зменшено тільки вертикальні відступи. Розміри тексту не
 * чіпаю: розклад читають з відстані витягнутої руки, часто
 * поспіхом у коридорі, і дрібніший шрифт зіпсував би більше,
 * ніж виграв би місця.
 */
.ssch-les{padding-top:8px;padding-bottom:8px}
.ssch-les.is-gap{padding-top:5px;padding-bottom:5px}
.ssch-les.is-gap .ssch-t2{display:none}
/**
 * Щільна таблиця.
 *
 * Тепер у колонці дня стоять УСІ уроки, а не тільки зайняті,
 * тож рядків у ній удвічі більше. Тиждень має вміщатися на
 * екран цілком — заради цього таблицю й відкривають.
 *
 * Стискаю тільки відступи й мінімальну висоту. Розмір тексту
 * лишається: розклад читають з відстані витягнутої руки, часто
 * поспіхом у коридорі, і дрібніший шрифт зіпсував би більше,
 * ніж виграв би місця. Порожні рядки тиснуться сильніше за
 * зайняті — у них нема чого читати, вони лише тримають форму
 * дня.
 */
.ssch-num{
    flex:0 0 26px;height:26px;border-radius:8px;margin-top:1px;
    background:#EDF1F5;color:var(--ssch-navy);
    font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;
    display:flex;align-items:center;justify-content:center;
}
.ssch-time{
    flex:0 0 60px;padding-top:1px;padding-right:12px;
    border-right:1px solid var(--ssch-line);
    align-self:stretch;
}
.ssch-body{padding-left:2px}
.ssch-t1{
    font:600 15px ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:-.3px;
}
.ssch-t2{
    font:400 12px ui-monospace,SFMono-Regular,Menlo,monospace;
    color:var(--ssch-muted);
}
.ssch-body{flex:1;min-width:0}
.ssch-subj{font-size:15.5px;font-weight:600;line-height:1.35}
.ssch-meta{font-size:13px;color:var(--ssch-muted);margin-top:2px}

/* Позначки тижня і групи всередині назви предмета.
   У постійному розкладі один слот часто містить два уроки —
   на чисельник і на знаменник. Без підпису це виглядає як
   помилка: «чому тут два другі уроки?». */
.ssch-wmark{
    display:inline-block;font-size:11px;font-weight:700;
    color:#5A7183;background:#EEF2F6;
    padding:2px 7px;border-radius:6px;margin-left:6px;vertical-align:1px;
}
.ssch-row .ssch-wmark{
    font-size:10px;padding:1px 5px;margin-left:5px;
}
.ssch-gmark{
    display:inline-block;font-size:11px;font-weight:700;
    color:var(--ssch-navy);background:#EAF2F9;
    padding:2px 7px;border-radius:6px;margin-left:6px;vertical-align:1px;
}
.ssch-alt{color:var(--ssch-muted);font-weight:500}

/* ---------- Стани змін ---------- */
.ssch-old{
    color:#A6AEB6;text-decoration:line-through;
    text-decoration-thickness:1.5px;
}
.ssch-tag{
    display:inline-block;font-size:11px;font-weight:700;
    padding:2px 8px;border-radius:6px;margin-bottom:4px;letter-spacing:.2px;
}
.ssch-tag--replace{background:#FDF0EE;color:var(--ssch-red)}
.ssch-tag--cancel{background:#F0F1F3;color:#7A848E}
.ssch-tag--remote{background:#EAF4F0;color:var(--ssch-green)}
.ssch-tag--move{background:#FDF6E3;color:#8A6A1F}
.ssch-tag--note{background:#EDF1F5;color:var(--ssch-navy)}

.ssch-les.is-changed{background:#FFFCFB}
.ssch-les.is-changed::before{
    content:"";position:absolute;left:0;top:0;bottom:0;
    width:3px;background:var(--ssch-red);
}
.ssch-les.is-cancelled .ssch-subj{color:#98A2AC}

/**
 * Кілька уроків на одну годину.
 *
 * Один слот часто містить чергування: чисельник і знаменник,
 * тижні місяця, підгрупи. Раніше кожен варіант був окремим
 * рядком — на екрані стояло чотири «6 уроки» підряд, усі
 * о 15:35, і виглядало це як помилка розкладу.
 *
 * Тепер номер і час стоять один раз, а варіанти йдуть під ними
 * списком. Тонка лінія між ними каже те, чого не скаже
 * відступ: це не продовження одного уроку, а окремі варіанти —
 * але тієї самої години.
 */
.ssch-var + .ssch-var{
    margin-top:7px;padding-top:7px;
    border-top:1px dashed var(--ssch-line);
}
.ssch-var.is-cancelled .ssch-subj{color:#98A2AC}

/* У злитому рядку номер і час прив'язані до ПЕРШОГО варіанта,
   тому тримаємо їх угорі, а не по центру висоти */
.ssch-les.is-multi{align-items:flex-start}

/* Порожній слот: урок, якого в цей день немає.
   Показуємо його, а не пропускаємо — так одразу видно,
   що день починається з другого уроку, а не що розклад
   недовантажився. */
.ssch-les.is-empty{background:#FCFDFE;padding-top:7px;padding-bottom:7px}
.ssch-les.is-empty .ssch-t2{display:none}
.ssch-les.is-empty .ssch-num{background:#F2F4F6;color:#B8C2CC}
.ssch-les.is-empty .ssch-t1{color:#AAB4BE;font-weight:500}
.ssch-les.is-empty .ssch-t2{color:#C4CCD4}
.ssch-les.is-empty .ssch-subj{
    color:#AAB4BE;font-weight:500;font-size:14.5px;
}

/* Вікно у вчителя — тихий рядок, щоб не сперечався з уроками */
.ssch-les.is-gap{background:#FAFBFC}
.ssch-les.is-gap .ssch-num{background:#F2F4F6;color:#AEB9C4}
.ssch-les.is-gap .ssch-t1{color:#9AA6B1;font-weight:500}
/* Прочерк замість слова «Вікно»: коли день показано цілком,
   порожніх годин більше за зайняті, і слово в кожному рядку
   перетягувало б на себе увагу */
.ssch-les.is-gap .ssch-subj{color:#C2CAD2;font-weight:600;font-style:normal}
.ssch-les.is-empty{background:#FCFDFE;padding-top:7px;padding-bottom:7px}
.ssch-les.is-empty .ssch-t2{display:none}
.ssch-les.is-empty .ssch-num{background:#F4F6F8;color:#C2CAD2}
.ssch-les.is-empty .ssch-t1{color:#AEB9C4;font-weight:500}
.ssch-les.is-empty .ssch-subj{color:#B9C2CB;font-weight:500;font-style:italic;font-size:14.5px}

/* Позначка зміни (I/II) у розкладі вчителя */
.ssch-shift{
    display:inline-block;font-size:11px;font-weight:700;
    padding:2px 7px;border-radius:6px;margin-left:6px;vertical-align:1px;
}
.ssch-shift--1{background:var(--ssch-sh1-bg);color:var(--ssch-sh1)}
.ssch-shift--2{background:var(--ssch-sh2-bg);color:var(--ssch-sh2)}
.ssch-les.shift-1::after,
.ssch-les.shift-2::after{
    content:"";position:absolute;right:0;top:0;bottom:0;width:3px;
}
.ssch-les.shift-1::after{background:var(--ssch-sh1)}
.ssch-les.shift-2::after{background:var(--ssch-sh2)}

/**
 * Дві колонки номерів у денному рядку вчителя.
 *
 * Ті самі, що й у тижневій таблиці, і навмисне тим самим
 * класом: одна річ має виглядати однаково в обох режимах.
 * Ліва — І зміна, права — ІІ; година, якої в зміні немає,
 * позначена крапкою.
 *
 * Без цього номер у денному списку доводилось читати разом із
 * бейджем зміни, а послідовність 0, 4, 2, 3, 7, 5 виглядала
 * як помилка в даних.
 */
.ssch-les .ssch-nn{
    flex:0 0 40px;align-self:center;padding-right:9px;margin-top:0;
}
.ssch-les .ssch-nn b{padding:2px 0;font-size:11.5px}

/* ---------- Поточний урок ----------
   Єдиний виразний елемент сторінки. Показує, скільки лишилось
   до дзвінка — те, заради чого учень і відкриває розклад
   о 10:47. */
.ssch-les.is-now{background:linear-gradient(90deg,#FFFDF6,#fff 60%)}
.ssch-les.is-now::before{
    content:"";position:absolute;left:0;top:0;bottom:0;
    width:3px;background:var(--ssch-gold);
}
.ssch-prog{
    margin-top:9px;height:3px;background:#F7E9B8;
    border-radius:2px;overflow:hidden;
}
.ssch-prog i{display:block;height:100%;background:var(--ssch-gold);border-radius:2px}
.ssch-left{font-size:12px;color:#8A6A05;font-weight:600;margin-top:5px}

/* ---------- Тижнева сітка ---------- */
/* Сітка заповнює доступну ширину: на широкому екрані три
   колонки, на планшеті дві, на телефоні одна. Фіксовані
   1fr 1fr залишали половину екрана порожньою. */
/**
 * Сітка тижня — рівно три картки в ряду.
 *
 * Раніше колонки підбирались автоматично під ширину екрана, і
 * на широкому моніторі виходило чотири вузькі картки плюс
 * два-три сироти в другому ряду. Довгі назви предметів у таких
 * колонках переносились по одному слову, а варіанти тижнів
 * розтягували рядок у стовпчик.
 *
 * Три колонки дають два рівні ряди (п'ять днів + картка змін)
 * і майже півтори попередні ширини на кожну — саме те місце,
 * якого бракувало назвам предметів і позначкам тижнів.
 */
.ssch-grid{
    display:grid;gap:12px;margin-top:16px;
    grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Планшет: три вузькі колонки вже гірші за дві широкі */
@media (max-width:1000px){
    .ssch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Телефон: одна колонка на всю ширину */
@media (max-width:640px){
    .ssch-grid{grid-template-columns:1fr}
}
.ssch-card{
    background:#fff;border:1px solid var(--ssch-line);
    border-radius:var(--ssch-r);overflow:hidden;box-shadow:var(--ssch-shadow);
}
.ssch-card{display:flex;flex-direction:column}
.ssch-card h3{
    margin:0;padding:10px 12px;background:var(--ssch-ink);color:#fff;
    font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
    display:flex;justify-content:space-between;
}
.ssch-card h3 em{
    font-style:normal;font-weight:500;color:#8FA6B5;
    font-size:11px;text-transform:none;letter-spacing:0;
}
.ssch-card.is-today h3{background:var(--ssch-gold)}
.ssch-card.is-today h3 em{color:#FFF6E0}
.ssch-row{
    display:flex;gap:8px;padding:3px 11px;
    font-size:13px;line-height:1.4;min-height:26px;align-items:center;
}
/* Порожні рядки тиснуться сильніше за зайняті: читати в них
   нема чого, вони лише тримають форму дня */
.ssch-row.is-free{padding-top:1px;padding-bottom:1px;min-height:20px}
.ssch-row + .ssch-row{border-top:1px solid #F0F3F6}
.ssch-row{position:relative;align-items:stretch}
.ssch-row .n{
    flex:0 0 20px;color:#9AA6B1;text-align:center;align-self:stretch;
    display:flex;align-items:center;justify-content:center;
    font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;
    border-right:1px solid #EDF1F5;
}
/* Час у тижневій сітці — той самий орієнтир, що й у денній.
   Без нього незрозуміло, о котрій починається день, а в школі
   дві зміни з різним початком. */
.ssch-row .tm{
    flex:0 0 42px;padding-right:8px;align-self:stretch;
    display:flex;align-items:center;
    color:#9AA6B1;letter-spacing:-.2px;
    font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;
    border-right:1px solid #EDF1F5;
}
.ssch-row .s{flex:1;min-width:0;padding-left:2px}

/* Варіанти одного слота: чисельник, знаменник, тижні місяця.
   Стоять у стовпчик усередині клітинки, а не окремими рядками
   з тим самим номером — інакше читається як чотири різні уроки
   на одній годині. */
.ssch-row .v{padding:1px 0}
.ssch-row .v + .v{
    margin-top:2px;padding-top:4px;border-top:1px dashed #E7ECF1;
}
.ssch-row .s,
.ssch-row .cl{display:flex;flex-direction:column;justify-content:center}

/* Клас у сітці вчителя відділений лінією: без неї стовпчик
   зливався з назвами предметів */
.ssch-row .cl{
    flex:0 0 78px;text-align:right;white-space:nowrap;
    font-size:12.5px;font-weight:600;color:var(--ssch-navy);
    padding-left:8px;border-left:1px solid #EDF1F5;align-items:flex-end;
}

/* Позначка класу в кольорі своєї зміни — тими самими двома
   кольорами, що й номери уроків ліворуч. Вчитель веде обидві
   зміни, і саме зміна пояснює, чому «2 урок» тут о 11:50. */
.ssch-cls{
    display:inline-block;padding:2px 8px;border-radius:6px;
    font-size:12px;font-weight:700;line-height:1.45;
}
.ssch-cls--1{background:var(--ssch-sh1-bg);color:var(--ssch-sh1)}
.ssch-cls--2{background:var(--ssch-sh2-bg);color:var(--ssch-sh2)}
/* Порожній слот: показуємо його теж, щоб учень бачив
   структуру дня цілком і не гадав, чи є 3-й урок. */
.ssch-row.is-free{background:#FCFDFE}
.ssch-row.is-free .s,
.ssch-row.is-free .cl{color:#B9C2CB;font-weight:500;font-style:italic}
.ssch-row.is-free .n{color:#CFD6DD}
.ssch-row.is-changed{background:var(--ssch-red-bg)}
.ssch-row.is-changed .n{color:var(--ssch-red)}

/* Здвоєна нумерація у вчителя: обидві зміни вирівняні за часом,
   бо о 10:55 в І зміні йде 4-й урок, а в ІІ — 1-й. */
.ssch-nn{
    flex:0 0 34px;display:flex;gap:3px;align-self:stretch;
    align-items:center;padding-right:8px;
    border-right:1px solid #EDF1F5;
}
.ssch-nn b{
    flex:1;text-align:center;border-radius:4px;padding:1px 0;
    font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;
}
.ssch-nn .a{background:var(--ssch-sh1-bg);color:var(--ssch-sh1)}
.ssch-nn .b{background:var(--ssch-sh2-bg);color:var(--ssch-sh2)}
.ssch-nn .off{background:#F4F6F8;color:#C2CAD2}
/* Шапка сітки вчителя. Колонки повторюють .ssch-row один в
   один — інакше підписи «Час» і «Клас» стоять не над своїми
   стовпцями, і таблиця читається неправильно. */
.ssch-chd{
    display:flex;gap:8px;padding:5px 11px;background:#F7F9FB;
    border-bottom:1px solid var(--ssch-line);
    font-size:10.5px;font-weight:700;color:#9AA6B1;
    letter-spacing:.3px;text-transform:uppercase;
}
.ssch-chd .ssch-nn{
    flex:0 0 34px;border-right:1px solid #EDF1F5;padding-right:8px;
}
.ssch-chd .ssch-nn span{flex:1;text-align:center}
.ssch-chd .tm{
    flex:0 0 42px;padding-right:8px;
    border-right:1px solid #EDF1F5;
}
.ssch-chd .s{flex:1;padding-left:2px}
.ssch-chd .cl{
    flex:0 0 78px;text-align:right;
    padding-left:8px;border-left:1px solid #EDF1F5;
}

/* ---------- Службові стани ---------- */
.ssch-empty{padding:34px 20px;text-align:center;color:var(--ssch-muted);font-size:14px}
/* Підпис «Чисельник · 2-й тиждень» над списком уроків.
   Тиха довідкова стрічка: помітна, коли її шукають, і не
   відтягує увагу від самого розкладу. */
.ssch-week{
    margin-top:14px;padding:7px 12px;
    background:var(--ssch-sh1-bg);border-radius:999px;
    display:inline-block;
    font-size:12.5px;font-weight:600;letter-spacing:.01em;
    color:var(--ssch-navy);
}
.ssch-foot{margin-top:14px;font-size:12px;color:#9AA6B1;text-align:center}
.ss-sched-loading,
.ss-sched-admin .ss-sched-loading{
    padding:40px 20px;text-align:center;color:#6B7A88;font-size:14px;
}
.ss-sched-denied,
.ss-sched-login{
    padding:24px;text-align:center;background:#fff;
    border:1px solid #E3E7ED;border-radius:14px;color:#4A5A67;font-size:14.5px;
}
.ssch-error{
    padding:16px;background:#FDF0EE;border:1px solid #F2C9C2;
    border-radius:14px;color:#C0392B;font-size:14px;
}
/* Кнопка «Спробувати ще раз» у самому блоці помилки.
   Розклад читають із телефона в коридорі, де зв'язок пропадає
   на секунду; пропозиція «оновіть сторінку» в такій ситуації
   означає почати все спочатку. */
.ssch-retry{
    margin-left:8px;padding:6px 13px;background:#fff;
    border:1px solid #E8B5AC;border-radius:9px;
    font:600 13px inherit;color:var(--ssch-red);cursor:pointer;
}
.ssch-retry:hover{background:#FBE4DF}


@media (max-width:400px){
    .ssch-time{flex-basis:46px}
    .ssch-subj{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
    .ss-sched *{transition-duration:.01ms !important}
}

/* ---------- Перемикач «з урахуванням змін / постійний» ----------
   З'являється лише тоді, коли на цей день є зміни. Без нього
   побачити початковий розклад неможливо: заміна повністю
   витісняє те, що було, і порівняти немає з чим. */
.ssch-compare{
    display:flex;gap:4px;margin-top:12px;background:#EEF2F6;
    padding:4px;border-radius:11px;
}
.ssch-compare button{
    flex:1;padding:8px 12px;border:0;background:none;
    font:600 13px inherit;color:var(--ssch-muted);
    border-radius:8px;cursor:pointer;white-space:nowrap;
}
.ssch-compare button[aria-selected="true"]{
    background:#fff;color:var(--ssch-ink);
    box-shadow:0 1px 2px rgba(6,32,47,.1);
}
.ssch-compare button[aria-selected="true"].live{color:var(--ssch-red)}

/**
 * «Постійний розклад» — бурштиновий, а не сірий.
 *
 * Це режим, у якому видно НЕ те, що буде завтра. Сплутати його
 * з актуальним розкладом — прийти на скасований урок, тому
 * вкладка має кидатись в очі, а не ховатись.
 */
.ssch-compare button.base{color:#8A6A1F}
.ssch-compare button[aria-selected="true"].base{
    background:var(--ssch-gold);color:#fff;
    box-shadow:0 1px 2px rgba(6,32,47,.14);
}
.ssch-compare .cnt{
    display:inline-block;min-width:17px;height:17px;line-height:17px;
    padding:0 5px;margin-left:6px;border-radius:9px;
    background:var(--ssch-red);color:#fff;
    font-size:10.5px;font-weight:800;text-align:center;vertical-align:1px;
}
.ssch-compare button[aria-selected="false"] .cnt{background:#A9B5C0}

/* Режим постійного розкладу: приглушений, щоб не сплутати
   з актуальним */
.ssch-list.is-base{border-color:var(--ssch-gold-line,#EBD9A8)}
.ssch-basenote{
    display:flex;gap:9px;align-items:center;padding:10px 15px;
    background:#FDF6E3;border-bottom:1px solid #EBD9A8;
    font-size:12.5px;color:#7A5B14;
}

/* ==========================================================
   ДРУК
   ==========================================================
   Розклад друкують: класний керівник вішає його на дошку,
   батьки кладуть на холодильник. Без цього блоку на папір
   ішли кнопки, вкладки й тіні, а сітка розповзалася на два
   аркуші.
========================================================== */
@media print{
    .ss-sched{max-width:none;font-size:12pt;color:#000}
    .ssch-panel,
    .ssch-days,
    .ssch-wk,
    .ssch-sel,
    .ssch-compare,
    .ssch-retry,
    .ssch-dates,
    .ssch-prog,
    .ssch-left,
    .ssch-foot{display:none !important}
    .ssch-les,
    .ssch-card,
    .ssch-grid{
        box-shadow:none !important;
        border-color:#999 !important;
        break-inside:avoid;page-break-inside:avoid;
    }
    .ssch-alert,
    .ssch-week{border:1px solid #999;background:none !important;color:#000}
}