/* /market: язык /salary (sv-*: токены, панели, заголовки секций — css/salary_page/hub), своя композиция — mk-*.
   Зелёный — вакансии, серый — резюме. Здесь шапка, панель индекса и зеркальная шкала; списки — 02_lists.css,
   появление блоков — 03_motion.css. Разметку наполняет js/market_page/market_page.js. */
.mk {
    --mk-res: color-mix(in srgb, var(--text-color) 26%, transparent);
}

.mk-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
}

/* Чипы направлений управляют панелью под ними — держим их ближе к ней, чем на /salary */
.mk .sv-hero {
    padding-bottom: 24px;
}

.mk-chips .filter-chip:not(.active) {
    background: var(--surface-primary);
}

.mk-pay-chips .filter-chip:not(.active) {
    background: var(--surface-secondary);
}

/* ---------- Панель: индекс и «10 вакансий — N резюме» слева, полюса рынка справа ---------- */

.mk-board {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 344px;
    overflow: hidden;
}

.mk-legend-res i {
    background: var(--mk-res);
}

.mk-picto {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px 24px;
    flex: 1 1 auto;
    align-content: center;
    min-height: 220px;
    padding: 32px;
}

.mk-picto-label {
    color: var(--text-muted);
    font-size: var(--fs-16);
    letter-spacing: var(--ls-16);
    white-space: nowrap;
}

.mk-picto-label b {
    color: var(--text-color);
    font-weight: var(--fw-semibold);
}

.mk-picto-row {
    display: grid;
    grid-template-columns: repeat(var(--cols, 10), minmax(0, 56px));
    gap: 10px;
}

.mk-picto-row i {
    aspect-ratio: 1;
    border-radius: 25%;
    background: var(--accent-color);
}

.mk-picto-res i {
    border-radius: 50%;
    background: var(--mk-res);
}

.mk-side {
    display: flex;
    flex-direction: column;
    padding: 28px 24px 20px;
    border-left: 1px solid var(--sv-line);
}

.mk-side-group + .mk-side-group {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--sv-line);
}

.mk-pole {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    color: var(--text-color);
    font-size: var(--fs-16);
    letter-spacing: var(--ls-16);
}

.mk-pole b {
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}

.mk-side .sv-side-note {
    border-top: 1px solid var(--sv-line);
    margin-top: auto;
}

.mk-side-group:last-of-type {
    margin-bottom: 20px;
}

/* ---------- Зеркальная шкала: резюме влево, вакансии вправо ---------- */

.mk-fly {
    padding: 24px 32px 20px;
}

.mk-fly-head,
.mk-fly-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 140px minmax(0, 1fr) 64px 72px;
    align-items: center;
    gap: 16px;
}

.mk-fly-head {
    padding-bottom: 8px;
}

.mk-fly-head span:nth-child(1) {
    grid-column: 1 / 3;
}

.mk-fly-head span:nth-child(2) {
    grid-column: 4 / 6;
    text-align: right;
}

.mk-fly-head span:nth-child(3) {
    text-align: right;
}

.mk-fly-row {
    height: 48px;
    border-top: 1px solid var(--sv-line);
}

.mk-fly-name {
    color: var(--text-color);
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-16);
    text-align: center;
    white-space: nowrap;
}

.mk-fly-val {
    color: var(--text-muted);
    font-size: var(--fs-14);
    letter-spacing: var(--ls-14);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mk-fly-val.mk-jobs {
    text-align: right;
}

.mk-bar {
    display: flex;
    height: 8px;
}

.mk-bar i {
    height: 100%;
    border-radius: 999px;
    background: var(--accent-color);
}

.mk-bar.mk-res {
    justify-content: flex-end;
}

.mk-bar.mk-res i {
    background: var(--mk-res);
}

.mk-fly-idx {
    color: var(--text-color);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-16);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.mk-fly-legend {
    display: none;
}

/* Выбрано направление: его строка и полюс выделены, остальные приглушены */
.mk-fly-row {
    cursor: var(--cursor-pointer);
    transition: opacity 0.3s ease;
}

.mk-fly.has-current .mk-fly-row:not(.is-current):not(:hover) {
    opacity: 0.42;
}

.mk-pole.is-current span {
    color: var(--accent-color);
    font-weight: var(--fw-semibold);
}

.mk-scope:not(:empty)::before {
    content: " · ";
}

.mk-loader {
    display: flex;
    justify-content: center;
    padding: 96px 0;
    color: var(--text-muted);
    font-size: var(--fs-16);
}

.mk-empty {
    padding: 28px 32px;
    color: var(--text-muted);
    font-size: var(--fs-16);
    letter-spacing: var(--ls-16);
}

@media (max-width: 1279px) {
    .mk-chips {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        margin-top: 24px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .mk-board {
        grid-template-columns: minmax(0, 1fr);
    }

    .mk-picto {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        min-height: 0;
        padding: 24px 20px;
    }

    .mk-picto-row {
        gap: 6px;
        margin-bottom: 8px;
    }

    .mk-side {
        padding: 20px;
        border-top: 1px solid var(--sv-line);
        border-left: 0;
    }

    .mk-fly {
        padding: 16px 20px 8px;
    }

    .mk-fly-head {
        display: none;
    }

    .mk-fly-legend {
        display: flex;
        padding-bottom: 12px;
    }

    .mk-fly-row {
        grid-template-columns: minmax(0, 1fr) 56px;
        grid-template-areas: "name idx" "rbar rval" "jbar jval";
        gap: 6px 12px;
        height: auto;
        padding: 12px 0;
    }

    .mk-fly-name { grid-area: name; text-align: left; }
    .mk-fly-idx { grid-area: idx; }
    .mk-bar.mk-res { grid-area: rbar; justify-content: flex-start; }
    .mk-fly-val.mk-res { grid-area: rval; text-align: right; }
    .mk-bar.mk-jobs { grid-area: jbar; }
    .mk-fly-val.mk-jobs { grid-area: jval; }

    .mk-empty {
        padding: 20px;
    }
}