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

.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-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid color-mix(in srgb, var(--md-primary) 30%, transparent);
    border-top-color: var(--md-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@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;
}
.settings-version {
    padding: 32px 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: color-mix(in srgb, var(--md-on-surface) 18%, transparent);
    position: relative;
    cursor: pointer;
    transition: background 200ms;
    flex-shrink: 0;
    margin: 0;
}
.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);
}

/* ---------- Ряд вкладок дат (Расписание) ---------- */

/* Видны три вкладки с весами 1 / 1.6 / 1, за каждым краем ещё
   --strip-spare дней (STRIP_SPARE в schedule.js). Проценты у flex-basis
   и translateX считаются от ширины трека, а она равна видимой. */
.date-tabs-row {
    --strip-spare: 3;
    padding: 18px 8px 8px;  /* сверху место под квадрат с числом пар */
    background: var(--md-surface);
    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 {
    --tab-unit: calc((100% - 12px) / 3.6);
    --strip-dx: 0px;
    display: flex;
    gap: 6px;
    /* Слева видна одна вкладка («вчера»), остальные запасные — за краем. */
    transform: translateX(calc(var(--strip-spare) * -1 * (var(--tab-unit) + 6px) + var(--strip-dx)));
}
.date-tab {
    position: relative;
    flex: 0 0 var(--tab-unit);
    min-width: 0;
    text-align: center;
    padding: 10px 8px;
    border-radius: 10px;
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
}
.date-tab-label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Число пар: квадрат над вкладкой, на 30% своей высоты заходит на неё. */
.date-tab-count {
    --count-size: 22px;
    position: absolute;
    left: 50%;
    top: calc(var(--count-size) * -0.7);
    transform: translateX(-50%);
    width: var(--count-size);
    height: var(--count-size);
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--md-surface);
    color: var(--md-primary);
    box-shadow: inset 0 0 0 1.5px var(--md-primary);
}
.date-tab.current .date-tab-count {
    background: var(--md-primary);
    color: var(--md-on-primary);
    box-shadow: 0 0 0 2px var(--md-surface);
}
.date-tab.current {
    flex-basis: calc(var(--tab-unit) * 1.6);
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 13px;
    font-weight: 700;
}
.date-tab.today:not(.current) {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font-weight: 700;
}
.date-tab.sunday {
    color: var(--md-error);
}

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

.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);
}
.lesson-card.lesson-past {
    opacity: 0.5;
    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 {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    font-size: 12px;
    font-weight: 600;
}

.lesson-progress {
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--md-on-surface) 15%, transparent);
    overflow: hidden;
    margin: 4px 0;
}
.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: color-mix(in srgb, var(--chip) 15%, transparent);
    color: var(--chip);
}
.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: color-mix(in srgb, var(--md-on-surface) 10%, transparent);
    color: var(--md-on-surface-variant);
}

.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;
}

.nav-search-overlay {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--md-surface);
    border-bottom: 1px solid var(--md-surface-variant);
    z-index: 5;
}
.nav-search-fields {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nav-swap {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--md-on-surface-variant);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.nav-swap:hover {
    background: color-mix(in srgb, var(--md-on-surface) 10%, transparent);
}
.nav-search-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--md-surface-variant);
    background: var(--md-surface-variant);
    transition: border-color 0.15s, background-color 0.15s;
}
.nav-search-row:focus-within {
    border-color: var(--md-primary);
}
.nav-search-marker {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.nav-search-marker-from {
    background: #ef4444;
    box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 25%, transparent);
}
.nav-search-marker-to {
    background: var(--md-on-surface-variant);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-on-surface-variant) 18%, transparent);
}
.nav-search-input {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 0;
    border: none;
    background: transparent;
    color: var(--md-on-surface);
    font-size: 15px;
    outline: none;
}
.nav-search-clear {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--md-on-surface-variant);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.nav-search-clear:hover {
    background: color-mix(in srgb, var(--md-on-surface) 10%, transparent);
}
.nav-suggestions {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 2px);
    max-height: 240px;
    overflow-y: auto;
    background: var(--md-surface);
    border: 1px solid var(--md-surface-variant);
    border-radius: 10px;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.nav-suggestions:empty {
    display: none;
}
.nav-suggestion {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--md-on-surface);
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}
.nav-suggestion:hover, .nav-suggestion:focus {
    background: var(--md-surface-variant);
}
.nav-suggestion-name {
    font-weight: 600;
}
.nav-suggestion-meta {
    font-size: 12px;
    color: var(--md-on-surface-variant);
}

.nav-canvas-full {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: var(--md-surface-variant);
    touch-action: none;
    /* Карту таскают мышью — номера кабинетов не должны выделяться и перехватывать перетаскивание. */
    -webkit-user-select: none;
    user-select: none;
}
.nav-canvas-full svg {
    width: 100%;
    height: 100%;
    display: block;
}

.nav-summary-chip {
    flex: 0 0 auto;
    padding: 6px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--md-on-surface-variant);
    background: var(--md-surface);
    border-top: 1px solid var(--md-surface-variant);
}
.nav-summary-chip:empty {
    display: none;
}

/* Pager под canvas: ◀ — «ГК, 1 этаж · 2 из 5» — ▶. Идёт строго в
   порядке прохождения маршрута; промежуточные «проходные» слои
   (где маршрут только пересаживается на лестницу) выкинуты. */
.nav-pager {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--md-surface);
    border-top: 1px solid var(--md-surface-variant);
}
.nav-pager-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s;
}
.nav-pager-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.nav-pager-label {
    flex: 1 1 auto;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--md-on-surface);
}


.nav-polyline {
    stroke: var(--md-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 8 6;
    animation: nav-polyline-dash 1.2s linear infinite;
}
@keyframes nav-polyline-dash {
    to { stroke-dashoffset: -28; }
}

/* Режим разбора маршрута (ссылка `?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;
}

/* Кабинет-бейдж с навигацией: стрелка внутри, рядом с номером (как android). */
.lesson-room-nav {
    cursor: pointer;
    white-space: nowrap;
}
.lesson-room-nav:hover, .lesson-room-nav:active {
    background: color-mix(in srgb, var(--md-primary) 22%, var(--md-secondary-container));
}