/* ---------- Сплеш-экран ---------- */

.splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: var(--md-background);
    color: var(--md-on-background);
}
.splash-logo {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--md-primary);
}
.splash-tagline {
    max-width: 280px;
    font-size: 14px;
    text-align: center;
    color: var(--md-on-surface-variant);
}
.splash-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--md-outline-variant);
    border-top-color: var(--md-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .splash-spinner { border: 3px solid color-mix(in srgb, var(--md-primary) 30%, transparent); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.center-pad {
    padding: 48px 24px;
    display: flex;
    justify-content: center;
}

/* ---------- Заголовки секций (в Настройках и формах) ---------- */

.section-title {
    padding: 16px 16px 4px;
    color: var(--md-on-surface-variant);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- Выбор группы ---------- */

.group-list {
    padding-bottom: 24px;
}
.group-card {
    display: flex;
    align-items: center;
    min-height: 56px;
}
.group-name {
    font-size: 15px;
    font-weight: 400;
}
.group-card-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.group-sub {
    font-size: 12px;
    color: var(--md-primary);
}

/* ---------- Настройки ---------- */

.settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.settings-row-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-primary);
}
.settings-row-text {
    flex: 1;
    min-width: 0;
}
.settings-row-title {
    font-size: 15px;
    color: var(--md-on-surface);
}
/* Пункты меню с иконкой полужирные, как ExtraEntry в приложении. */
.settings-row-icon + .settings-row-text .settings-row-title { font-size: 16px; font-weight: 600; }
.settings-row-title.accent { color: var(--md-primary); }
.settings-group-name { font-size: 16px; font-weight: 600; color: var(--md-on-surface); margin-top: 2px; }
.settings-section-title {
    color: var(--md-primary);
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.settings-row-sub {
    font-size: 12px;
    color: var(--md-on-surface-variant);
    margin-top: 2px;
}
.settings-row-chev {
    color: var(--md-on-surface-variant);
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
}
/* ---------- «Меню»: карточка группы и пункты группами ---------- */

.menu-group-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(100% - 32px);
    margin: 4px 16px 0;
    padding: 14px 12px 14px 16px;
    border-radius: 20px;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    text-align: left;
    transition: scale 150ms ease;
}
.menu-group-card:active { scale: 0.98; }
.menu-group-card-text { flex: 1; min-width: 0; }
.menu-group-card-text b { display: block; font-size: 18px; font-weight: 600; }
.menu-group-card-text span { font-size: 13px; opacity: 0.85; }
.menu-group-card-act { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 500; }
.menu-group-card-act svg { width: 18px; height: 18px; }
.menu-section-title {
    padding: 20px 20px 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--md-on-surface-variant);
}
.menu-group {
    margin: 0 16px;
    border-radius: 20px;
    background: var(--md-surface);
    overflow: hidden;
}
.menu-group > * + * { box-shadow: inset 0 1px 0 var(--md-outline-variant); }
.menu-row, .menu-switch-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 8px 12px;
    color: var(--md-on-surface);
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.menu-switch-row { padding-left: 16px; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .menu-row:hover, .menu-switch-row:hover { background: color-mix(in srgb, var(--md-on-surface) 5%, transparent); }
}
.menu-row-ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
}
.menu-row-ic.tint {
    background: var(--md-primary-container);
    color: var(--md-primary);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .menu-row-ic.tint { background: color-mix(in srgb, var(--md-primary) 14%, transparent); }
}
.menu-row-ic svg { width: 22px; height: 22px; }
.menu-row-text { flex: 1; min-width: 0; }
.menu-row-text b { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; }
.menu-row-text b.accent { color: var(--md-primary); }
.menu-row-text span { display: block; margin-top: 1px; font-size: 13px; color: var(--md-on-surface-variant); text-wrap: pretty; }
.menu-row-chev { display: flex; color: var(--md-on-surface-variant); opacity: 0.7; }
.menu-row-chev svg { width: 20px; height: 20px; }
.notif-card { background: var(--md-surface); border-radius: 20px; }

.settings-version {
    padding: 18px 16px 16px;
    text-align: center;
    color: var(--md-on-surface-variant);
    font-size: 12px;
}
/* «Сейчас занятия, до 29 декабря» над семестрами графика. */
.calendar-period {
    padding: 4px 16px 8px;
    color: var(--md-primary);
    font-size: 16px;
    font-weight: 700;
}

.analytics-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.analytics-row .settings-row-text {
    flex: 1;
    min-width: 0;
}
.analytics-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--md-outline-variant);
    position: relative;
    cursor: pointer;
    transition: background 200ms;
    flex-shrink: 0;
    margin: 0;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .analytics-toggle { background: color-mix(in srgb, var(--md-on-surface) 18%, transparent); }
}
.analytics-toggle::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--md-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 200ms;
}
.analytics-toggle:checked {
    background: var(--md-primary);
}
.analytics-toggle:checked::after {
    transform: translateX(20px);
}

/* Уведомления от бота в «Меню»: карточки как NotifCard в мобилке. */
.notif-section > .settings-row-sub {
    padding: 0 16px;
}
.notif-minutes-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.notif-minutes {
    width: 72px;
    padding: 8px 10px;
    background: transparent;
    color: var(--md-on-surface);
    border: 1px solid var(--md-outline);
    border-radius: 4px;
    font-size: 15px;
}
.notif-minutes:focus { outline: none; border-color: var(--md-primary); }
.notif-status:empty { display: none; }
.notif-status { padding: 0 16px; color: var(--md-error); }

/* ---------- Полоса недели (Расписание) ---------- */

/* Неделя ПН–ВС, в которой стоит открытый день; под числом — точки по
   числу пар. Шапка и полоса — на фоне экрана, без своей подложки. */
.schedule-screen .topbar { background: var(--md-background); }
.date-tabs-row {
    padding: 4px 16px 12px;
    background: var(--md-background);
    position: sticky;
    top: 0;  /* topbar живёт в другом scroll-контексте (он вне .screen-body), поэтому полоса липнет к верху области прокрутки */
    z-index: 5;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
.date-tabs-track {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    max-width: 568px;
    margin: 0 auto;
}
.date-tabs-track.week-in-next { --week-from: 25%; animation: week-in 280ms cubic-bezier(.2, 0, 0, 1); }
.date-tabs-track.week-in-prev { --week-from: -25%; animation: week-in 280ms cubic-bezier(.2, 0, 0, 1); }
@keyframes week-in {
    from { opacity: 0; transform: translateX(var(--week-from)); }
}
.week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 7px;
    border: 0;
    border-radius: 14px;
    background: var(--md-surface);
    color: var(--md-on-surface-variant);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease, color 150ms ease, scale 150ms ease;
}
.week-day:active { scale: 0.96; }
.week-day.today { box-shadow: inset 0 0 0 1.5px var(--md-primary); }
.week-day.sunday { color: var(--md-error); }
.week-day.selected {
    background: var(--md-primary);
    color: var(--md-on-primary);
    box-shadow: none;
}
.week-day-name { font-size: 12px; font-weight: 500; }
.week-day-num {
    font-size: 17px;
    font-weight: 600;
    color: var(--md-on-surface);
    font-variant-numeric: tabular-nums;
}
.week-day.selected .week-day-num { color: var(--md-on-primary); }
.week-day-dots { display: flex; gap: 3px; height: 4px; margin-top: 2px; }
.week-day-dots i {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.6;
}

/* ---------- Страница дня / пейджер ---------- */

.day-pager {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;       /* разрешаем вертикальную прокрутку, перехватываем горизонталь */
    min-height: 60vh;
}
.day-pager-track {
    display: flex;
    width: 300%;
    transform: translateX(-33.3333%);
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
.day-page-slot {
    flex: 0 0 33.3333%;
    width: 33.3333%;
    min-height: 60vh;
}

/* «Нет занятий» — по центру экрана под полосой дней, как в приложении. */
.status-page {
    box-sizing: border-box;
    min-height: calc(100vh - 200px);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
}
.status-title {
    font-size: 22px;
    font-weight: 700;
}
.status-title.primary         { color: var(--md-primary); }
.status-title.error           { color: var(--md-error); }
.status-title.secondary-color { color: var(--md-secondary); }
.status-title.tertiary-color  { color: var(--md-tertiary); }
.status-title.muted           { color: var(--md-on-surface-variant); }
.status-date {
    font-size: 15px;
    color: var(--md-on-surface-variant);
}
.status-subtitle {
    margin-top: 8px;
    color: var(--md-on-surface-variant);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Список пар и карточки ---------- */

.lesson-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 24px;
    max-width: 600px;
    margin: 0 auto;
}

.lesson-card {
    background: var(--md-surface-variant);
    color: var(--md-on-surface);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background 200ms;
}
.lesson-card.lesson-current {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

/* Занятие на весь день из блока МАДИ «Полнодневные занятия». */
.allday-card {
    background: var(--md-tertiary-container);
    color: var(--md-on-tertiary-container);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.status-page .allday-card {
    align-self: stretch;
    max-width: 568px;
    margin: 16px auto 0;
    width: 100%;
    box-sizing: border-box;
}
.allday-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.allday-title {
    font-size: 15px;
}
.lesson-card.lesson-past {
    opacity: 0.5;
    background: var(--md-surface-variant);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .lesson-card.lesson-past { background: color-mix(in srgb, var(--md-surface-variant) 60%, transparent); }
}

.lesson-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.lesson-time {
    font-size: 14px;
    font-weight: 700;
    color: var(--md-primary);
}
.lesson-card.lesson-current .lesson-time {
    color: var(--md-on-primary-container);
}
.lesson-time-hint {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--md-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lesson-card.lesson-current .lesson-time-hint {
    color: var(--md-on-primary-container);
}
.lesson-room {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px;
    border-radius: 15px;
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.lesson-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--md-outline-variant);
    overflow: hidden;
    margin: 4px 0;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .lesson-progress { background: color-mix(in srgb, var(--md-on-surface) 15%, transparent); }
}
.lesson-card.lesson-current .lesson-progress {
    background: var(--md-outline-variant);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .lesson-card.lesson-current .lesson-progress { background: color-mix(in srgb, var(--md-on-primary-container) 20%, transparent); }
}
.lesson-progress-fill {
    height: 100%;
    background: var(--md-primary);
    transition: width 500ms linear;
}
.lesson-card.lesson-current .lesson-progress-fill {
    background: var(--md-on-primary-container);
}

.lesson-subject {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 4px;
}

.lesson-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}
.lesson-chip {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
/* Цветная плашка — её цвет на 15% фоном; варианты задают только --chip. */
.lesson-chip-secondary, .lesson-chip-primary, .lesson-chip-tertiary, .lesson-chip-error {
    background: var(--md-surface-variant);
    color: var(--chip);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .lesson-chip-secondary, .lesson-chip-primary, .lesson-chip-tertiary, .lesson-chip-error { background: color-mix(in srgb, var(--chip) 15%, transparent); }
}
.lesson-chip-secondary { --chip: var(--md-secondary); }
.lesson-chip-primary   { --chip: var(--md-primary); }
.lesson-chip-tertiary  { --chip: var(--md-tertiary); }
.lesson-chip-error     { --chip: var(--md-error); }
.lesson-chip-muted {
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .lesson-chip-muted { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent); }
}

.lesson-freq {
    font-size: 12px;
    color: var(--md-on-surface-variant);
}

.lesson-teacher {
    font-size: 12px;
    color: var(--md-on-surface-variant);
    margin-top: 4px;
}

.lesson-gap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: var(--md-on-surface-variant);
    font-size: 11px;
}
.lesson-gap::before,
.lesson-gap::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--md-outline-variant);
}

/* ---------- Баннеры на главном экране ---------- */

.banner {
    margin: 8px 12px;
    padding: 12px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    cursor: pointer;
}
.banner.banner-info {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}
.banner-text { flex: 1; }
.banner-action { font-weight: 700; }

.banner.year-banner {
    flex-direction: column;
    align-items: stretch;
    cursor: default;
    gap: 6px;
}
.banner-title {
    font-size: 13px;
    font-weight: 700;
}
.banner-message {
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.95;
}
.banner-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
}
.banner-btn {
    padding: 6px 14px !important;
    color: var(--md-on-primary-container) !important;
}
.banner-btn-primary { font-weight: 700; }

/* ---------- Дополнения для страницы дня экзамена ---------- */

.exam-day-title {
    padding: 8px 4px 4px;
}
.exam-time {
    color: var(--md-error) !important;
}
.exam-clock {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--md-primary);
}
.next-exam-card {
    margin: 20px auto 0;
    max-width: 320px;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
}
.next-exam-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.85;
}
.next-exam-subject {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
}
.next-exam-when {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.85;
}

/* ---------- Indoor-навигация (/nav) ---------- */

/* Экран навигации — fullscreen: топбар, селектор сверху, карта на всё
   остающееся место, чип-сводка и пейджер внизу. Перекрываем общие
   правила `.screen` (min-height: 100vh): нам нужна именно фиксированная
   высота окна, иначе flex:1 на canvas не растягивается на остаток. */
.nav-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    /* dvh — динамическая высота вьюпорта: на мобиле учитывает адресную строку
       браузера, иначе при 100vh экран выше видимой области и нижний пейджер
       со стрелками уезжает под сгиб. vh — фолбэк для старых браузеров. */
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    padding: 0 !important;
}

/* В WebView приложения vh бывает нулевым, поэтому высоту берём цепочкой
   процентов от html (100% в reset.css, при нулевом вьюпорте его задаёт
   main.js), экран навигации — по inset: 0. */
html.native-embed #app { min-height: 100%; }
html.native-embed .nav-screen {
    height: auto;
    min-height: 0;
    max-height: none;
}

/* ---------- Маршрут: точки сверху, карта, шторка с подсказкой ---------- */

.route-top {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 4px 8px 8px;
    background: var(--md-background);
    z-index: 6;
}
.route-back { flex: none; }
.route-points {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0;
    border-radius: 16px;
    background: var(--md-surface);
}
.route-points .nav-search-row {
    height: 40px;
    padding: 0 8px 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.route-points .nav-search-row + .nav-search-row {
    box-shadow: inset 0 1px 0 var(--md-outline-variant);
}
.route-point-meta {
    flex: none;
    font-size: 12px;
    color: var(--md-on-surface-variant);
    white-space: nowrap;
}
.route-point-meta:empty { display: none; }
.route-acts {
    flex: none;
    display: flex;
    flex-direction: column;
}
.route-acts svg, .route-back svg { width: 22px; height: 22px; }

.nav-search-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--md-surface-variant);
}
.nav-search-marker {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.nav-search-marker-from {
    background: var(--md-surface);
    box-shadow: inset 0 0 0 2.5px var(--md-primary);
}
.nav-search-marker-to { background: var(--md-primary); }
.nav-search-icon { display: flex; color: var(--md-on-surface-variant); }
.nav-search-icon svg { width: 22px; height: 22px; }
.nav-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 0;
    border: none;
    background: transparent;
    color: var(--md-on-surface);
    font: inherit;
    font-size: 15px;
    outline: none;
}
.nav-search-input::placeholder { color: var(--md-on-surface-variant); }
/* Крестик виден, только пока поле в работе: в покое он лишь шумит. */
.nav-search-clear {
    display: none;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: var(--md-on-surface-variant);
    font-size: 14px;
    line-height: 1;
    align-items: center;
    justify-content: center;
}
.nav-search-row:focus-within .nav-search-clear { display: flex; }
.nav-search-row:focus-within .route-point-meta { display: none; }
.nav-suggestions {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 4px);
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0;
    background: var(--md-surface);
    border-radius: 16px;
    z-index: 10;
    box-shadow: 0 0 0 1px var(--md-outline-variant), 0 12px 28px -8px rgb(0 0 0 / 0.45);
}
.nav-suggestions:empty { display: none; }
.nav-suggestion {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 11px 16px;
    color: var(--md-on-surface);
    text-align: left;
    font-size: 15px;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .nav-suggestion:hover, .nav-suggestion:focus-visible {
        background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
    }
}
.nav-suggestion-name { font-weight: 600; }
.nav-suggestion-meta { font-size: 12px; color: var(--md-on-surface-variant); }

.nav-map {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}
.nav-canvas-full {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: var(--md-background);
    touch-action: none;
    /* Карту таскают мышью — номера кабинетов не должны выделяться и перехватывать перетаскивание. */
    -webkit-user-select: none;
    user-select: none;
}
.nav-canvas-full svg {
    width: 100%;
    height: 100%;
    display: block;
}
.nav-layer-name {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--md-surface);
    color: var(--md-on-surface);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px -2px rgb(0 0 0 / 0.3);
    pointer-events: none;
}
/* Колонка участков маршрута (или этажей корпуса) справа поверх карты. */
.nav-rail {
    position: absolute;
    right: 10px;
    top: 10px;
    max-height: calc(100% - 44px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
    background: var(--md-surface);
    box-shadow: 0 2px 10px -2px rgb(0 0 0 / 0.35);
    scrollbar-width: none;
}
.nav-rail[hidden] { display: none; }
.nav-rail-btn {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.05;
    color: var(--md-on-surface-variant);
    font-variant-numeric: tabular-nums;
    transition: background-color 150ms ease, color 150ms ease, scale 150ms ease;
}
.nav-rail-btn small { font-size: 9px; font-weight: 500; opacity: 0.8; }
.nav-rail-btn:active { scale: 0.96; }
.nav-rail-btn[aria-pressed="true"] {
    background: var(--md-primary);
    color: var(--md-on-primary);
}

.route-sheet {
    flex: 0 0 auto;
    position: relative;
    margin-top: -16px;
    padding: 6px 16px 14px;
    border-radius: 24px 24px 0 0;
    background: var(--md-surface);
    box-shadow: 0 -8px 24px -12px rgb(0 0 0 / 0.4);
    z-index: 4;
}
.route-sheet-handle {
    width: 32px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 2px;
    background: var(--md-outline-variant);
}
.route-sheet.is-loading .nav-variants { min-height: 40px; }
.nav-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    font-size: 14px;
    line-height: 1.35;
    text-wrap: pretty;
}
.nav-hint[hidden] { display: none; }
.nav-hint-ic {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}
.nav-hint-ic svg { width: 20px; height: 20px; }
.nav-hint-text.is-new { animation: hint-in 240ms cubic-bezier(.2, 0, 0, 1); }
@keyframes hint-in {
    from { opacity: 0; transform: translateY(4px); }
}
.nav-route-meta {
    margin-top: 8px;
    font-size: 13px;
    color: var(--md-on-surface-variant);
    font-variant-numeric: tabular-nums;
}
.nav-variant-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}
.nav-variant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
    text-align: left;
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, scale 150ms ease;
}
.nav-variant:active { scale: 0.96; }
.nav-variant svg { flex: none; width: 22px; height: 22px; }
.nav-variant b { display: block; font-size: 14px; font-weight: 600; }
.nav-variant span span { display: block; margin-top: 1px; font-size: 12px; font-variant-numeric: tabular-nums; }
.nav-variant[aria-pressed="true"] {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    box-shadow: inset 0 0 0 1.5px var(--md-primary);
}

/* ---------- Главный экран навигатора ---------- */

.nav-home-head { padding: 4px 16px 0; }
.nav-home-search {
    height: 52px;
    padding: 0 16px;
    border-radius: 26px;
}
.nav-from-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 6px 4px 0;
    font-size: 13px;
    color: var(--md-on-surface-variant);
}
.nav-from-row > svg { flex: none; width: 18px; height: 18px; color: var(--md-primary); }
.nav-from-row b { color: var(--md-on-surface); font-weight: 500; }
.nav-from-row .nav-search-row { flex: 1; }
.nav-from-change {
    margin-left: auto;
    padding: 8px 4px;
    color: var(--md-primary);
    font-weight: 500;
}
.nav-lesson-card {
    margin: 12px 16px 0;
    padding: 14px 14px 14px 16px;
    border-radius: 20px;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    animation: hint-in 240ms cubic-bezier(.2, 0, 0, 1);
}
.nav-lesson-card small { font-size: 12px; font-weight: 500; opacity: 0.85; font-variant-numeric: tabular-nums; }
.nav-lesson-card h3 { margin-top: 4px; font-size: 16px; font-weight: 500; line-height: 1.3; text-wrap: pretty; }
.nav-lesson-go {
    gap: 8px;
    margin-top: 12px;
    height: 44px;
    border-radius: 22px;
    transition: background 120ms, scale 150ms ease;
}
.nav-lesson-go:active { scale: 0.96; }
.nav-lesson-go svg { width: 20px; height: 20px; }
.nav-recent { padding: 0 8px; }
.nav-recent-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 8px;
    border-radius: 16px;
    text-align: left;
    color: var(--md-on-surface);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .nav-recent-row:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); }
}
.nav-recent-ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
}
.nav-recent-ic svg { width: 22px; height: 22px; }
.nav-recent-text b { display: block; font-weight: 500; }
.nav-recent-text span { font-size: 13px; color: var(--md-on-surface-variant); }
.nav-buildings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 4px 16px 16px;
}
.nav-building {
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
    background: var(--md-surface);
    color: var(--md-on-surface);
    text-align: left;
    transition: scale 150ms ease;
}
.nav-building:active { scale: 0.96; }
.nav-building b { display: block; font-size: 18px; font-weight: 600; }
.nav-building span { display: block; font-size: 12px; line-height: 1.3; color: var(--md-on-surface-variant); }

@media (prefers-reduced-motion: reduce) {
    .nav-hint-text.is-new, .nav-lesson-card { animation: none; }
}

/* Планы этажей в цветах темы: исходники нарисованы оранжевым по белому
   и задают цвета прямо в style, поэтому — через !important. */
.floor-renderer #layer-coridor { opacity: 1 !important; }
.floor-renderer #layer-coridor path { fill: var(--md-surface-variant) !important; }
/* color-mix — под @supports: WebView до Chrome 111 его не знает, а с var()
   внутри объявление не отбрасывается при разборе и красит в чёрный. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .floor-renderer #layer-coridor path {
        fill: color-mix(in srgb, var(--md-on-surface) 6%, var(--md-surface)) !important;
    }
    .nav-canvas-full { background: color-mix(in srgb, var(--md-surface-variant) 55%, var(--md-background)); }
}
.floor-renderer #layer-rooms path {
    fill: var(--md-surface) !important;
    fill-opacity: 1 !important;
    stroke: var(--md-outline-variant) !important;
    stroke-width: 1px !important;
    vector-effect: non-scaling-stroke;
}
.floor-renderer #layer-borders path {
    stroke: var(--md-outline) !important;
    stroke-width: 1.5px !important;
    vector-effect: non-scaling-stroke;
}
.floor-renderer #layer-labels text,
.floor-renderer #layer-labels tspan { fill: var(--md-on-surface-variant) !important; }
.floor-renderer #layer-nodes circle,
.floor-renderer #layer-nodes path { fill: var(--md-outline) !important; }
.floor-renderer #layer-rooms .nav-to {
    fill: var(--md-primary-container) !important;
    stroke: var(--md-primary) !important;
    stroke-width: 2px !important;
}

/* Маршрут: сплошная линия поверх подложки цвета фона; прорисовку от
   начала ведёт floor-renderer.js (drawIn). */
.nav-polyline,
.nav-polyline-casing {
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-polyline { stroke: var(--md-primary); stroke-width: 5; }
.nav-polyline-casing { stroke: var(--md-background); stroke-width: 9; opacity: 0.8; }
.nav-polyline-alt {
    stroke: var(--md-on-surface-variant);
    stroke-opacity: 0.4;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-start, .nav-start-in, .nav-end, .nav-end-in { fill: none; stroke-linecap: round; }
.nav-start { stroke: var(--md-primary); stroke-width: 15; }
.nav-start-in { stroke: var(--md-surface); stroke-width: 8; }
.nav-end { stroke: var(--md-surface); stroke-width: 17; }
.nav-end-in { stroke: var(--md-primary); stroke-width: 12; }
.nav-end, .nav-end-in { animation: nav-dot-in 300ms 700ms cubic-bezier(.2, 0, 0, 1) both; }
@keyframes nav-dot-in {
    from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-end, .nav-end-in { animation: none; }
}

/* Режим разбора маршрута (ссылка `?inspect=nav`). Показывает сеть
   коридоров — в планах она лежит скрытым слоем `nav` — и раскладывает
   маршрут на отрезки, чтобы можно было ткнуть в конкретное ребро.
   Обычному пользователю ничего из этого не видно. */
.floor-renderer.is-debug #nav-corridors path {
    stroke: var(--md-on-surface-variant);
    stroke-opacity: 0.45;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.floor-renderer.is-debug #nav-nodes circle {
    fill: var(--md-on-surface-variant);
    fill-opacity: 0.55;
}
.nav-seg {
    stroke: transparent;
    stroke-width: 6;
    stroke-linecap: round;
}
.nav-seg.is-selected {
    stroke: var(--md-tertiary);
    stroke-opacity: 0.9;
}
/* Толстая невидимая линия поверх ребра: попасть пальцем в 4-пиксельную
   полилинию иначе невозможно. `pointer-events: stroke` ловит клик по
   штриху независимо от того, что он прозрачный. */
.nav-seg-hit {
    stroke: transparent;
    stroke-width: 22;
    stroke-linecap: round;
    pointer-events: stroke;
    cursor: pointer;
}

.nav-inspect {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 40vh;
    padding: 8px 12px;
    background: var(--md-surface);
    border-top: 1px solid var(--md-surface-variant);
    font-size: 12px;
}
.nav-inspect-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.nav-inspect-title {
    font-weight: 600;
    color: var(--md-on-surface);
}
.nav-inspect-copy {
    flex: 0 0 auto;
    border: none;
    border-radius: 8px;
    padding: 4px 10px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 12px;
    cursor: pointer;
}
.nav-inspect-body,
.nav-inspect-step {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.nav-inspect-body {
    color: var(--md-on-surface);
    line-height: 1.45;
    word-break: break-word;
}
.nav-inspect-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}
.nav-inspect-step {
    text-align: left;
    border: none;
    border-radius: 6px;
    padding: 3px 4px;
    background: transparent;
    color: var(--md-on-surface-variant);
    font-size: 12px;
    cursor: pointer;
}
.nav-inspect-step:hover {
    background: var(--md-surface-variant);
}
.nav-inspect-empty {
    color: var(--md-on-surface-variant);
}

/* Подсветка узлов from/to: рисуем «гало» через filter — работает для
   любого SVG-элемента (circle, polygon, path) без необходимости
   менять разметку. */
.nav-from, .nav-to {
    filter: drop-shadow(0 0 4px var(--md-primary));
}
.nav-from { stroke: var(--md-primary); stroke-width: 2; }
.nav-to   { stroke: var(--md-tertiary); stroke-width: 2; }


/* Кнопка «Маршрут» в карточке кабинета. */
.room-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.room-card-route {
    flex: 0 0 auto;
}

/* Кабинет на схемах — кнопка с шагами, ведёт в маршрут (как RoomChip в приложении). */
.lesson-room-nav {
    position: relative;
    padding-left: 8px;
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    cursor: pointer;
    transition: scale 150ms ease;
}
.lesson-room-nav svg { width: 16px; height: 16px; flex: none; }
/* Пальцу — больше места, чем видно. */
.lesson-room-nav::before { content: ""; position: absolute; inset: -7px -4px; }
.lesson-room-nav:active { scale: 0.96; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .lesson-room-nav:hover {
        background: color-mix(in srgb, var(--md-primary) 22%, var(--md-secondary-container));
    }
}

/* ---------- Карточка пары в расписании (вариант A) ---------- */

.day-pager .lesson-card {
    background: var(--md-surface);
    border-radius: 18px;
    padding: 12px 12px 14px 16px;
    gap: 0;
}
.day-pager .lesson-card.lesson-current {
    background: var(--md-surface);
    color: var(--md-on-surface);
    box-shadow: inset 0 0 0 1.5px var(--md-primary);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .day-pager .lesson-card.lesson-current { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--md-primary) 55%, transparent); }
}
.day-pager .lesson-card.lesson-past {
    opacity: 0.62;
    background: var(--md-surface);
}
.day-pager .lesson-card.lesson-current .lesson-time { color: var(--md-primary); }
.day-pager .lesson-time-row { min-height: 30px; }
.day-pager .lesson-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.day-pager .lesson-subject { font-size: 16px; }
.day-pager .lesson-meta-row {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 8px;
    margin: 8px 0 0;
}
.day-pager .lesson-meta-row > * { margin: 0; }
.day-pager .lesson-teacher { font-size: 13px; color: var(--md-on-surface-variant); }
.day-pager .lesson-note {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-top: 8px;
    padding: 7px 9px;
    border-radius: 10px;
    background: var(--md-tertiary-container);
    color: var(--md-on-tertiary-container);
    font-size: 13px;
    line-height: 1.4;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .day-pager .lesson-note { background: color-mix(in srgb, var(--md-tertiary) 14%, transparent); }
}
.day-pager .lesson-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--md-tertiary); }
.day-pager .lesson-note span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.day-pager .lesson-card .lesson-progress {
    margin: 10px 0 0;
    background: var(--md-primary-container);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .day-pager .lesson-card .lesson-progress { background: color-mix(in srgb, var(--md-primary) 20%, transparent); }
}
.day-pager .lesson-card .lesson-progress-fill {
    background: var(--md-primary);
    border-radius: 2px;
    transform-origin: left;
    animation: progress-grow 700ms cubic-bezier(.2, 0, 0, 1);
}
@keyframes progress-grow {
    from { transform: scaleX(0); }
}
.day-pager .lesson-left {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--md-primary);
    font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
    .date-tabs-track, .day-pager .lesson-card .lesson-progress-fill { animation: none; }
}

/* ---------- Рейтинги ---------- */

.rating-hint { padding: 0 16px; font-size: 12px; color: var(--md-on-surface-variant); }
.rating-card { padding: 4px 0; overflow: hidden; }
.rating-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 2px 10px;
    align-items: center;
    padding: 7px 12px;
}
.rating-place { text-align: end; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.rating-users { color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.rating-bar {
    grid-column: 2 / 4;
    height: 4px;
    border-radius: 2px;
    background: var(--md-surface-variant);
    overflow: hidden;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .rating-bar { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
}
.rating-fill { display: flex; height: 100%; border-radius: 2px; overflow: hidden; }
.rating-fill span { display: block; opacity: .75; }
/* Цвета устройств — общие для полосок групп, секции «Устройства» и легенды. */
.dev-pc { background: var(--md-tertiary); }
.dev-android { background: var(--md-secondary); }
.dev-ios, .dev-none { background: var(--md-primary); }
.rating-legend {
    display: flex;
    gap: 14px;
    padding: 6px 12px 2px;
    font-size: 12px;
    color: var(--md-on-surface-variant);
}
.rating-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-inline-end: 5px;
    vertical-align: -1px;
}
.rating-row.mine { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.rating-row.mine .rating-place, .rating-row.mine .rating-users { color: inherit; }
.rating-mine {
    margin-inline-start: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 11px;
    background: var(--md-surface);
    color: var(--md-primary);
}
.rating-gap { text-align: center; line-height: 1; color: var(--md-on-surface-variant); }
.rating-donors { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
.rating-donor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--md-surface);
    font-size: 14px;
}
.rating-donor svg { width: 16px; height: 16px; color: var(--md-error); }
.rating-empty { text-align: center; padding: 20px 16px; color: var(--md-on-surface-variant); }
.rating-loading { opacity: .5; transition: opacity 120ms; }