/* ═══════════════════════════════════════════════════════════════════════════
   НЕО — Sections
   У каждого раздела своя раскладка. Общая — только сетка и токены.
   Контакты — карточки. Компании — реестр строк. Аналитика — ранжированные
   шкалы. Отрасли — таблица покрытия. Новости — лента. Реестр — плотные записи.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ Контакты — сетка карточек ═══════════════════════════════════════ */

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: var(--s-4);
    align-items: start;
}

@media (max-width: 720px) {
    .contacts-grid { grid-template-columns: 1fr; }
}

/* ═══ Аналитика — дашборд ранжированных шкал ══════════════════════════ */

.analytics-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
}

.analytics-layout > .analytics-summary { grid-column: 1 / -1; }

@media (max-width: 900px) {
    /* minmax(0, …), не 1fr: иначе колонка не сожмётся уже своего контента
       и длинное название отрасли распирает страницу по горизонтали. */
    .analytics-layout { grid-template-columns: minmax(0, 1fr); }
}

.rankbar-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.rankbar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
}

.rankbar-name {
    min-width: 0;   /* флекс-элемент иначе не уступит длинному слову */
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rankbar-val {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}

.rankbar-val b {
    font-weight: 500;
    color: var(--text-muted);
}

.rankbar-track {
    height: 5px;
    border-radius: var(--r-full);
    background: var(--g-800);
    overflow: hidden;
}

.rankbar-fill {
    height: 100%;
    border-radius: inherit;
    /* Тон категории. Глубину (opacity) по позиции в рейтинге задаёт JS. */
    background: var(--cat);
    transform: scaleX(0);
    transform-origin: left center;
    animation: rankbar-grow 640ms var(--e-out) forwards;
}

@keyframes rankbar-grow { to { transform: scaleX(1); } }

.analytics-summary p {
    max-width: var(--container-text);
    font-size: var(--t-base);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
}

.analytics-summary b {
    font-weight: 500;
    color: var(--text);
}

/* ═══ Отрасли — таблица покрытия, не аккордеон ════════════════════════ */

.industry-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
}

.industry-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--border);
    transition: background var(--d-fast) var(--e-out);
}

.industry-row:last-child { border-bottom: none; }
.industry-row:hover { background: var(--surface-2); }

.industry-name {
    font-size: var(--t-base);
    font-weight: 500;
    color: var(--text-strong);
}

.industry-cov {
    margin-top: 3px;
    font-size: var(--t-sm);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

.industry-count {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
    color: var(--cat-text);
}

.industry-count span {
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    color: var(--text-faint);
    margin-left: var(--s-1);
}

@media (max-width: 620px) {
    .industry-row {
        grid-template-columns: 1fr;
        row-gap: var(--s-2);
    }
    .industry-count { justify-self: start; }
}

/* ═══ Компании и Проблемы — реестр строк, не карточная сетка ══════════ */

.roster {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.roster .contact-card,
.roster .wide-card {
    width: 100%;
}

/* ═══ Реестр Tizilim — плотные записи ═════════════════════════════════ */

.tizilim-regions {
    margin-bottom: var(--s-5);
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.tizilim-regions-title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--tr-caps);
    text-transform: uppercase;
    color: var(--text-faint);
}

.tizilim-regions-title svg { width: 13px; height: 13px; stroke: currentColor; }

.regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: var(--s-2);
}

@media (max-width: 520px) {
    .regions-grid { grid-template-columns: 1fr 1fr; }
}

/* Чип региона — тот же примитив, но растянут по ячейке сетки: счётчик
   прижат вправо, длинное название усекается многоточием. */
.region-pill {
    justify-content: space-between;
    width: 100%;
    min-width: 0;   /* иначе grid-трек растянется до длины «Западно-Казахстанская» */
    min-height: 40px;
    gap: var(--s-2);
}

.region-pill-name {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.region-pill-name svg {
    width: 12px;
    height: 12px;
    flex: none;
    stroke: currentColor;
    opacity: 0.6;
}

/* ═══ Новости — лента. Уже была отдельной, приводим к токенам. ════════ */

.news-feed {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid var(--border-strong);
}

.news-statline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    margin-bottom: var(--s-5);
    font-size: var(--t-sm);
    color: var(--text-muted);
}

.news-statline b {
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
    margin-right: var(--s-1);
}

/* ═══ Встроенные презентации ══════════════════════════════════════════ */

.embed-frame {
    position: relative;
    height: min(calc(100dvh - 220px), 900px);
    min-height: 480px;
    padding: var(--s-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.embed-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--r-md);
    background: var(--bg-sunken);
}

/* Бюджет занимает всё полотно под шапкой. */
.embed-full {
    width: 100%;
    height: calc(100dvh - var(--header-h));
}

.embed-full iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--bg-sunken);
}

@media (max-width: 1023px) {
    .embed-full { height: calc(100dvh - var(--header-h) - var(--dock-h)); }
    .embed-frame { height: min(calc(100dvh - 260px), 720px); }
}

/* ═══ Ассистент НЕО ═══════════════════════════════════════════════════ */

.neo-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
    margin-block: var(--s-6);
}

@media (max-width: 720px) {
    .neo-modes { grid-template-columns: 1fr; }
}

.neo-mode {
    text-align: left;
    padding: var(--s-5);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out);
}

.neo-mode:hover { border-color: var(--accent-line); background: var(--surface-hover); }

.neo-mode h4 {
    margin-bottom: var(--s-2);
    font-size: var(--t-base);
    font-weight: 600;
    color: var(--text-strong);
}

.neo-mode p {
    font-size: var(--t-sm);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}