:root {
    --panel-bg: rgba(255, 255, 255, .96);
    --border: #d0d5dd;
    --text: #1d2939;
    --muted: #667085;
    --accent: #2563eb;
    --shadow: 0 12px 36px rgba(16, 24, 40, .16);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
}

button,
select,
input {
    font: inherit;
}

.public-map-page,
.public-map {
    width: 100%;
    height: 100%;
}

.public-map-page {
    position: relative;
}

.map-panel {
    position: absolute;
    z-index: 20;
    top: 16px;
    left: 16px;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel-bg);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.map-panel__header {
    margin-bottom: 14px;
}

.map-panel__header h1 {
    margin: 0 0 4px;
    font-size: 21px;
    line-height: 1.15;
}

.map-panel__header p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.field {
    display: block;
    margin: 12px 0;
}

.field > span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.field select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
}

.layer-list {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #f9fafb;
}

.layer-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.panel-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 12px 0;
}

.panel-actions button {
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.panel-actions button:hover:not(:disabled) {
    border-color: var(--accent);
}

.panel-actions button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.route-info {
    margin-top: 12px;
    padding: 11px;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 13px;
    line-height: 1.45;
}

.map-status {
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
}

.map-status.error {
    color: #b42318;
}

.map-alert {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #f79009;
    border-radius: 9px;
    background: #fffaeb;
    color: #7a2e0e;
    font-size: 13px;
}

.panel-toggle {
    display: none;
    position: absolute;
    z-index: 30;
    top: 12px;
    left: 12px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-bg);
    box-shadow: var(--shadow);
    cursor: pointer;
}

@media (max-width: 720px) {
    .map-panel {
        top: 62px;
        left: 10px;
        width: calc(100vw - 20px);
        max-height: calc(100vh - 72px);
    }

    .map-panel.is-hidden {
        display: none;
    }

    .panel-toggle {
        display: block;
    }

    .panel-actions {
        grid-template-columns: 1fr;
    }
}


.map-panel__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.public-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.public-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}

.public-nav a.active,
.public-nav a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

@media (max-width: 720px) {
    .map-panel__title-row {
        flex-direction: column;
    }
}

.route-draft-note{color:#b42318;font-size:12px;font-weight:700;}


/* Расписание остановки: отдельный блок для каждого направления. */
.stop-schedule {
    width: min(390px, calc(100vw - 72px));
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    color: #1d2939;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.stop-schedule-header {
    margin-bottom: 5px;
}

.stop-schedule-header h3 {
    margin: 0 0 2px;
    font-size: 15px;
    line-height: 1.15;
}

.stop-schedule-details,
.stop-schedule-date,
.stop-schedule-legend {
    color: #667085;
    font-size: 9px;
    line-height: 1.25;
}

.stop-schedule-date {
    margin-top: 2px;
    font-weight: 700;
}

.stop-schedule-legend {
    margin-top: 2px;
}

.nearest-sample {
    display: inline-block;
    padding: 1px 4px;
    border: 1px solid #6ce9a6;
    border-radius: 3px;
    background: #ecfdf3;
    color: #027a48;
    font-weight: 800;
}

.stop-schedule-routes {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    box-sizing: border-box;
}

.stop-route-block {
    margin: 0 0 6px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #ffffff;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.stop-route-block:last-child {
    margin-bottom: 0;
}

.stop-route-block-header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: stretch;
    min-height: 34px;
    background: #f8fafc;
}

.stop-route-number-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-right: 1px solid #d0d5dd;
}

.stop-route-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 22px;
    padding: 2px 5px;
    border-radius: 4px;
    background: #2563eb;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.stop-route-number:hover {
    background: #1849a9;
    color: #ffffff;
}

.stop-route-following {
    min-width: 0;
    padding: 4px 7px;
}

.stop-route-caption {
    display: block;
    margin-bottom: 1px;
    color: #98a2b3;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.stop-route-following strong {
    display: block;
    overflow: hidden;
    color: #1d2939;
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stop-route-divider {
    height: 1px;
    background: #d0d5dd;
}

.stop-time-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.stop-time-table tr + tr .stop-time-cell {
    border-top: 1px solid #f2f4f7;
}

.stop-time-cell {
    width: 16.6667%;
    height: 20px;
    padding: 2px 1px;
    border-right: 1px solid #f2f4f7;
    color: #344054;
    font-size: 9px;
    font-weight: 650;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.stop-time-cell:last-child {
    border-right: 0;
}

.stop-time-cell.is-nearest {
    background: #ecfdf3;
    color: #027a48;
    font-weight: 900;
    box-shadow:
        inset 0 0 0 1px #6ce9a6;
}

.stop-time-cell.is-next-day:not(.is-nearest) {
    background: #f5f8ff;
    color: #175cd3;
}

.stop-time-cell.is-empty {
    background: #ffffff;
}

.stop-schedule-loading,
.stop-schedule-error,
.stop-schedule-empty {
    min-width: 250px;
    padding: 8px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.35;
}

.stop-schedule-loading,
.stop-schedule-empty {
    background: #f8fafc;
    color: #475467;
}

.stop-schedule-error {
    border: 1px solid #fda29b;
    background: #fff1f0;
    color: #b42318;
}

@media (max-width: 720px) {
    .stop-schedule {
        width: min(390px, calc(100vw - 64px));
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .stop-route-block-header {
        grid-template-columns: 43px minmax(0, 1fr);
    }

    .stop-route-following strong {
        white-space: normal;
    }

    .stop-schedule-routes {
        max-height: none;
        overflow: visible;
    }

    .stop-time-cell {
        font-size: 8px;
    }
}


/* Баллон остановки прокручивается только по вертикали. */
.stop-schedule,
.stop-schedule *,
.stop-schedule *::before,
.stop-schedule *::after {
    box-sizing: border-box;
}

.stop-schedule-routes,
.stop-route-block,
.stop-route-block-header,
.stop-route-following,
.stop-time-table {
    min-width: 0;
}

.stop-schedule-routes {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    overscroll-behavior-x: none;
}

.stop-time-table {
    overflow: hidden;
}

.stop-route-following strong {
    max-width: 100%;
}

/* Не допускаем горизонтальной полосы прокрутки внутри содержимого баллона. */
.ymaps-2-1-79-balloon__content > ymaps,
.ymaps-2-1-79-balloon__content > div {
    max-width: 100%;
    overflow-x: hidden !important;
}


/* Только один вертикальный скролл: штатный скролл содержимого баллона. */
.stop-schedule-routes {
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scrollbar-width: none;
}

.stop-schedule-routes::-webkit-scrollbar {
    display: none;
}


/* ============================================================
   Расчётное движение трамваев по расписанию
   ============================================================ */

.vehicle-status {
    margin: 8px 0 0;
    padding: 7px 9px;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    background: rgba(255, 255, 255, .92);
    color: #475467;
    font-size: 11px;
    line-height: 1.35;
}

.vehicle-status.error {
    border-color: #fda29b;
    background: #fff5f4;
    color: #b42318;
}

/* Единый маркер подключается из assets/vehicle-marker.css. */
.vehicle-balloon-note {
    display: inline-block;
    margin-top: 5px;
    color: #667085;
    font-size: 11px;
}


/* Scheduled vehicles v2: works even when controls are injected by JS. */
.scheduled-vehicle-layer-control {
    display: flex;
    align-items: center;
    gap: 7px;
}

#vehicleStatus.vehicle-status {
    display: block;
}


/* ================================================================
   Масштабно-зависимые слои карты v20260723-4
   ================================================================ */

.map-scale-note {
    margin: -2px 0 8px;
    color: #667085;
    font-size: 10px;
    line-height: 1.35;
}


/* Technical node icons v20260723-6 */
.map-scale-note::after {
    content: " · технические NODE: пиктограммы как в редакторе";
}


.stop-page-link{color:inherit;text-decoration:none}.stop-page-link:hover{color:#175cd3;text-decoration:underline}.stop-page-action{margin:5px 0 7px}.stop-page-action a{display:inline-block;padding:4px 7px;border:1px solid #b2ccff;border-radius:6px;background:#eff4ff;color:#175cd3;font-size:11px;font-weight:700;text-decoration:none}


/* Explicit stop-page link in map balloon, v20260723-2 */
.stop-page-link {
    color: #101828 !important;
    text-decoration: none !important;
    cursor: pointer;
    border-bottom: 1px dotted #667085;
}

.stop-page-link:hover {
    color: #175cd3 !important;
    border-bottom-color: #175cd3;
}

.stop-page-link-mark {
    margin-left: 3px;
    color: #175cd3;
    font-size: .8em;
    font-weight: 700;
}


/* Guaranteed clickable stop title v20260723-3 */
.stop-schedule-header h3 .stop-page-link {
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
}


/* v20260723-4: отдельная кнопка не используется.
   Навигация выполняется только по названию остановки. */
.stop-page-action {
    display: none !important;
}


/* ================================================================
   Использование SEGMENT действующими маршрутами
   ================================================================ */

.track-usage-legend {
    display: grid;
    gap: 5px;
    margin: 7px 0 10px;
    padding: 7px 9px;
    border: 1px solid #e4e7ec;
    border-radius: 7px;
    background: rgba(255, 255, 255, .82);
    color: #475467;
    font-size: 10px;
    line-height: 1.3;
}

.track-usage-legend__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.track-usage-legend__rail {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 8px;
    flex: 0 0 30px;
    border-radius: 4px;
    background: #1f2937;
}

.track-usage-legend__rail::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    height: 4px;
    border-radius: 2px;
}

.track-usage-legend__rail--used {
    opacity: .88;
}

.track-usage-legend__rail--used::after {
    background: #fff;
    opacity: 1;
}

.track-usage-legend__rail--unused {
    background: #1f2937;
    opacity: .4;
}

.track-usage-legend__rail--unused::after {
    background: #fff;
    opacity: 1;
}


.segment-type-public-legend{display:grid;gap:4px;margin:7px 0 10px;padding:7px 9px;border:1px solid #e4e7ec;border-radius:7px;background:rgba(255,255,255,.82);color:#475467;font-size:10px;line-height:1.25}.segment-type-public-legend__title{font-weight:700;color:#344054;margin-bottom:2px}.segment-type-public-legend>div:not(.segment-type-public-legend__title){display:flex;align-items:center;gap:7px}.segment-public-swatch{display:inline-block;width:30px;height:7px;border-radius:4px;flex:0 0 30px}.segment-public-swatch--tram-overhead {
    position: relative;
    background: #fff;
    border: 3px solid #1f2937;
    height: 10px;
}.segment-public-swatch--tram-battery {
    background: #fff;
    border: 3px solid #1f2937;
    height: 10px;
}.segment-public-swatch--third-center{background:#facc15;border:2px solid #3f3f46;height:8px}.segment-public-swatch--third-left{background:#f59e0b;border:2px solid #3f3f46;height:8px}.segment-public-swatch--third-right{background:#d97706;border:2px solid #3f3f46;height:8px}.segment-public-swatch--road{background:#cbd5e1;border:3px solid #475569;height:10px}.segment-public-swatch--water{background:#93c5fd;border:2px solid #1d4ed8;height:8px}.segment-public-swatch--trolley{background:#99f6e4;border:2px solid #0f766e;height:7px}

.segment-public-swatch--tram-overhead::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #374151;
    transform: translateY(-50%);
}


/* ================================================================
   Имитация остановочного светодиодного табло Мосгортранса
   ================================================================ */

.mgt-led-shell {
    width: 100%;
    max-width: 100%;
    margin: 7px 0 9px;
    padding: 5px;
    border: 1px solid #4f555a;
    border-radius: 3px;
    background:
        linear-gradient(
            180deg,
            #777d82 0%,
            #555b60 45%,
            #6b7176 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .16),
        0 1px 3px rgba(15, 23, 42, .20);
}

.mgt-led-screen {
    position: relative;
    overflow: hidden;
    min-height: 118px;
    padding: 7px 8px 6px;
    border: 1px solid #111513;
    border-radius: 1px;
    background-color: #111410;
    background-image:
        radial-gradient(
            circle,
            rgba(255, 169, 0, .16) 0,
            rgba(255, 169, 0, .16) .65px,
            transparent .8px
        );
    background-size: 3px 3px;
    color: #ffae18;
    font-family:
        Consolas,
        "Courier New",
        monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .1px;
    text-shadow:
        0 0 2px rgba(255, 161, 0, .92),
        0 0 5px rgba(255, 119, 0, .28);
}

.mgt-led-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, .018) 0,
            rgba(255, 255, 255, .018) 1px,
            rgba(0, 0, 0, .035) 1px,
            rgba(0, 0, 0, .035) 2px
        );
}

.mgt-led-columns,
.mgt-led-row,
.mgt-led-footer {
    position: relative;
    z-index: 1;
}

.mgt-led-columns,
.mgt-led-row {
    display: grid;
    grid-template-columns:
        43px
        minmax(0, 1fr)
        35px
        35px;
    align-items: center;
    column-gap: 4px;
}

.mgt-led-columns {
    grid-template-rows:
        10px
        9px;
    margin-bottom: 2px;
    color: #ff9d00;
    font-size: 7px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.mgt-led-col-route {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
}

.mgt-led-col-destination {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mgt-led-col-arrival {
    grid-column: 3 / 5;
    grid-row: 1;
    text-align: center;
}

.mgt-led-col-sub {
    grid-row: 2;
    color: #d98200;
    text-align: right;
}

.mgt-led-row {
    min-height: 15px;
    border-top: 1px solid rgba(255, 174, 24, .075);
}

.mgt-led-route {
    overflow: hidden;
    color: #ffb521;
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mgt-led-destination {
    overflow: hidden;
    min-width: 0;
    color: #ffa40b;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mgt-led-eta {
    color: #ffb521;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.mgt-led-row--empty {
    grid-template-columns: 1fr;
    min-height: 58px;
    place-items: center;
}

.mgt-led-message {
    color: #d88708;
    font-size: 9px;
    text-align: center;
}

.mgt-led-footer {
    margin-top: 5px;
    color: #9f650b;
    font-size: 6px;
    text-align: right;
    letter-spacing: .3px;
}

@media (max-width: 420px) {
    .mgt-led-screen {
        padding-right: 6px;
        padding-left: 6px;
        font-size: 9px;
    }

    .mgt-led-columns,
    .mgt-led-row {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            31px
            31px;
        column-gap: 3px;
    }

    .mgt-led-route,
    .mgt-led-eta {
        font-size: 10px;
    }

    .mgt-led-destination {
        font-size: 9px;
    }

    .mgt-led-columns {
        font-size: 6px;
    }
}


/* Тоннель / участок под мостом: вагон визуально уходит под перекрытие. */
.tram-vehicle-marker--dimmed {
    filter: brightness(.42) saturate(.48);
    opacity: .72;
    transition: filter .18s ease, opacity .18s ease;
}

/* Компактная верхняя часть публичной панели. */
.map-panel__header--compact {
    margin-bottom: 8px;
}

.map-panel__compact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.map-panel__compact-row h1 {
    min-width: 0;
    margin: 0;
    font-size: 18px;
    line-height: 1.15;
}

.public-nav--icons {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
}

.public-nav--icons a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 8px;
}

.public-nav--icons svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.public-nav--icons a::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 100;
    top: calc(100% + 7px);
    left: 50%;
    width: max-content;
    max-width: 180px;
    padding: 5px 7px;
    border-radius: 6px;
    background: rgba(17, 24, 39, .96);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -3px);
    transition: opacity .12s ease, transform .12s ease;
}

.public-nav--icons a:hover::after,
.public-nav--icons a:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.map-panel__header--compact + .field,
.map-alert + .field {
    margin-top: 8px;
}

@media (max-width: 420px) {
    .map-panel__compact-row h1 {
        font-size: 16px;
    }

    .public-nav--icons a {
        width: 30px;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
    }
}

/* Каскад выбора: скрытые поля не должны раскрываться правилом .field. */
.field[hidden],
#transportModeField[hidden],
#routeField[hidden],
#patternField[hidden] {
    display: none !important;
}

/* Уплотнённая шапка панели и независимые от шрифтов пиктограммы. */
.map-panel__header--compact {
    margin-bottom: 6px;
}

.map-panel__compact-row {
    gap: 7px;
}

.map-panel__compact-row h1 {
    flex: 1 1 auto;
    max-width: 205px;
    font-size: 16px;
    line-height: 1.08;
}

.public-nav--icons {
    gap: 3px;
}

.public-nav--icons a {
    width: 29px;
    min-width: 29px;
    height: 29px;
    min-height: 29px;
}

.public-nav__icon::before {
    content: "";
    display: block;
    width: 17px;
    height: 17px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.public-nav__icon--map::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3V6Z'/%3E%3Cpath d='M9 3v15M15 6v15'/%3E%3C/svg%3E");
}

.public-nav__icon--routes::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='2'/%3E%3Ccircle cx='19' cy='18' r='2'/%3E%3Cpath d='M7 6h5a4 4 0 0 1 4 4v6'/%3E%3Cpath d='m13 13 3 3 3-3'/%3E%3C/svg%3E");
}

.public-nav__icon--stops::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6-5.2 6-11a6 6 0 1 0-12 0c0 5.8 6 11 6 11Z'/%3E%3Ccircle cx='12' cy='10' r='2'/%3E%3C/svg%3E");
}

.public-nav__icon--depots::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V8l9-5 9 5v13'/%3E%3Cpath d='M7 21v-7h10v7M7 10h10'/%3E%3C/svg%3E");
}

.public-nav__icon.active::before,
.public-nav__icon:hover::before,
.public-nav__icon:focus-visible::before {
    filter: invert(35%) sepia(98%) saturate(1800%) hue-rotate(213deg) brightness(93%) contrast(94%);
}

@media (max-width: 390px) {
    .map-panel__compact-row h1 {
        max-width: 170px;
        font-size: 15px;
    }
}

/* Каскад территория → транспортная сеть → маршрут. */
#networkField[hidden],
#routeField[hidden],
#patternField[hidden] {
    display: none !important;
}

/* Пиктограммы находятся непосредственно в HTML, без шрифтов и background-image. */
.public-nav--icons .public-nav__icon::before {
    display: none !important;
    content: none !important;
}

.public-nav--icons .public-nav__icon svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none;
}

.public-nav--icons .public-nav__icon {
    color: #344054;
}

.public-nav--icons .public-nav__icon.active,
.public-nav--icons .public-nav__icon:hover,
.public-nav--icons .public-nav__icon:focus-visible {
    color: var(--accent);
}

.field select:disabled {
    color: #98a2b3;
    background: #f2f4f7;
    cursor: not-allowed;
}

/* Public context cascade build 20260801-5 */
.public-nav--icons .public-nav__icon > img,
.public-nav .public-nav__icon > img {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

#networkField[hidden],
#routeField[hidden],
#patternField[hidden] {
    display: none !important;
}

.map-panel[data-public-ui-build="20260801-5"] .public-nav__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}