/* ─── Раздел «Выборы 18–20 сентября 2026» ───────────────────────────────
   Подключается только при включённом модуле elections. Геометрию берём у
   мини-аппа (.home-card: padding 16, radius 22, иконка 64) — раздел стоит в
   одном ряду с «Расписанием» и «Услугами» и обязан лежать по той же сетке.
   Своё здесь — палитра и один крупный элемент.

   Палитра из логотипа кампании: синий #1F4C9E, красный #D62B22.
   Шрифт НЕ переопределяем: в десктопном МАКС кириллица в подставленных
   шрифтах рассыпается (урок баннера «Краснотеки»), поэтому характер даём
   кеглем и начертанием, а не гарнитурой.

   Главный элемент раздела — табличка участка: сплошной синий блок с крупным
   номером. Это ровно то, за чем человек пришёл, и это язык настоящей вывески
   на дверях школы, где стоит комиссия. Всё остальное намеренно тихое. */

:root {
    --el-blue: #1F4C9E;
    --el-blue-ink: #16233c;
    --el-red: #D62B22;
    --el-paper: #eef2fb;
    --el-line: #d8e0f3;
}

/* ─── Баннер на главной ─── */
.el-banner {
    background: #f4f7ff;
    border: 1px solid var(--el-line);
}
.dark .el-banner {
    background: rgba(31, 76, 158, 0.16);
    border-color: rgba(31, 76, 158, 0.42);
}
/* Логотип кампании широкий (216×111). В квадратный слот 64×64 он ужимается до
   нечитаемой полоски, поэтому слот для него шире — карточка от этого не ломается,
   у неё flex-раскладка. */
.el-banner-logo { width: 84px; height: auto; object-fit: contain; }
.el-banner-title { color: var(--el-blue); font-weight: 700; }
.dark .el-banner-title { color: #a8c2f0; }
.el-banner-sub { color: #5b6b8a; opacity: 1; }
.dark .el-banner-sub { color: #9fb4d8; }

/* ─── Шапка раздела ───
   Синяя плашка с надзаголовком-датой: тот же приём, что у вывески комиссии,
   только маленький. Крупный номер приберегаем для карточки участка. */
.el-hero {
    background: var(--el-blue);
    color: #fff;
    border-radius: 22px;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.el-hero-kicker {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd9d6;
}
.el-hero-title { font-size: 20px; font-weight: 800; margin-top: 4px; }
.el-hero-sub { font-size: 13px; line-height: 1.45; opacity: 0.9; margin-top: 6px; }

/* ─── Поиск ─── */
.el-search {
    width: 100%;
    padding: 13px 16px;
    border-radius: 999px;
    border: 1px solid var(--el-line);
    background: #fff;
    font-size: 15px;
    outline: none;
    -webkit-appearance: none;
}
.el-search:focus { border-color: var(--el-blue); box-shadow: 0 0 0 3px rgba(31, 76, 158, 0.12); }
.dark .el-search { background: #1f2937; border-color: #374151; color: #e5e7eb; }
.dark .el-search:focus { border-color: #6f9bea; }

.el-hits { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.el-hit {
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #eef1f6;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dark .el-hit { background: #1f2937; border-color: #374151; }
.el-hit-name { font-size: 14.5px; font-weight: 600; }
.el-hit-place { font-size: 12.5px; opacity: 0.65; }
.el-empty { padding: 18px 10px; text-align: center; font-size: 13.5px; line-height: 1.5; opacity: 0.7; }

.el-by-number { margin-top: 14px; }
.el-link {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 13.5px;
    color: var(--el-blue);
    background: none;
}
.dark .el-link { color: #a8c2f0; }
.el-number-box { margin-top: 6px; }
.el-hint { margin-top: 8px; padding: 0 4px; font-size: 12.5px; color: var(--el-red); }
.dark .el-hint { color: #f0a9a4; }

/* !important здесь по делу: блоки, которые прячет JS, ниже по файлу получают
   собственный display (.el-rows — flex), и без него свёрнутый блок раскрывался
   сам собой — обе селекторные специфичности равны, выигрывал тот, что объявлен
   позже. */
.is-hidden { display: none !important; }

.el-note {
    margin-top: 20px;
    padding: 0 4px;
    font-size: 11.5px;
    line-height: 1.5;
    opacity: 0.6;
}

/* ─── Экран «Ваш дом?» ───
   Приглушённый вариант шапки: крупная синяя плашка тут была бы вторым главным
   элементом на пути к настоящему главному — табличке участка. */
.el-hero-soft { background: var(--el-paper); color: var(--el-blue-ink); }
.el-hero-soft .el-hero-kicker { color: var(--el-red); }
.dark .el-hero-soft { background: rgba(31, 76, 158, 0.18); color: #dbe6fb; }

/* Номера домов читаются столбиком — цифры одной ширины держат строку ровной. */
.el-house-row .el-hit-name { font-variant-numeric: tabular-nums; }
.el-hit.is-match {
    border-color: var(--el-blue);
    box-shadow: 0 0 0 2px rgba(31, 76, 158, 0.15);
}
.dark .el-hit.is-match { border-color: #6f9bea; box-shadow: 0 0 0 2px rgba(111, 155, 234, 0.25); }

/* ─── Табличка участка ───
   Единственный крупный элемент раздела: номер набран так, как его пишут на
   дверях школы, где стоит комиссия. Красная линия под номером — из логотипа
   кампании, больше нигде в разделе крупного красного нет. */
.el-plate {
    background: var(--el-blue);
    color: #fff;
    border-radius: 22px;
    padding: 20px;
}
.el-plate-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}
.el-plate-no {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.el-plate-rule {
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: var(--el-red);
    margin: 10px 0 12px;
}
.el-plate-where { font-size: 14px; font-weight: 600; line-height: 1.4; }
.el-plate-addr { font-size: 13.5px; line-height: 1.45; opacity: 0.9; margin-top: 4px; }
.el-map {
    display: inline-block;
    margin-top: 14px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.el-plate-when { margin-top: 14px; font-size: 12.5px; opacity: 0.85; }

/* ─── Адреса участка ─── */
.el-toggle {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: var(--el-paper);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--el-blue);
}
.dark .el-toggle { background: rgba(31, 76, 158, 0.18); color: #cbd9f5; }
.el-addresses { margin-top: 10px; font-size: 13px; line-height: 1.55; }
.el-addr-group { margin-bottom: 12px; }
.el-addr-city { font-weight: 700; margin-bottom: 3px; }
.el-addr-row { padding-left: 2px; }
.el-addr-houses { opacity: 0.65; font-variant-numeric: tabular-nums; }

/* ─── Уровень выборов — свёрнутая карточка ─── */
.el-level { margin-top: 12px; }
.el-level-head {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eef1f6;
}
.dark .el-level-head { background: #1f2937; border-color: #374151; }
.el-level-head.is-open { border-color: var(--el-line); background: var(--el-paper); }
.dark .el-level-head.is-open { background: rgba(31, 76, 158, 0.20); border-color: #4b5563; }
/* Герб — на белой подложке: герб России нарисован чёрным контуром и на тёмной
   теме без подложки пропадает. */
.el-emblem {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #eef1f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dark .el-emblem { border-color: #d7dbe3; }
.el-emblem img { width: 34px; height: 34px; object-fit: contain; }
.el-level-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.el-level-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.el-level-sub { font-size: 12px; line-height: 1.35; opacity: 0.65; }
/* Сколько бумаг на этом уровне. Кружок, а не хвост подписи: это то же число,
   что и в пачке наверху, и глаз должен ловить его без чтения. */
.el-level-count {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    background: var(--el-blue);
}
.dark .el-level-count { background: #3b6bc4; }
/* Шеврон: чистый CSS, чтобы не тащить ещё один спрайт в мини-апп. */
.el-chevron {
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: 0.4;
    transition: transform 0.2s ease;
}
.el-level-head.is-open .el-chevron { transform: rotate(225deg) translate(-2px, -2px); }
.el-level-body { padding: 4px 0 6px; }

/* ─── Пачка бюллетеней ───
   Первый вопрос у входа на участок — «сколько мне дадут бумаг и каких». Отвечаем
   не предложением, а самими бумагами: пять миниатюр в том же порядке и тех же
   цветах, что бланки ниже. Тап по миниатюре открывает свой бланк. */
.el-stack {
    margin: 16px 0 6px;
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--el-line);
}
.dark .el-stack { background: #1f2937; border-color: #374151; }
.el-stack-kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.5;
}
.el-stack-count {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.15;
    margin-top: 2px;
    color: var(--el-blue);
}
.dark .el-stack-count { color: #a8c2f0; }
.el-stack-row { display: flex; gap: 7px; margin-top: 12px; }
.el-chip {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
/* Миниатюра — маленький бланк: цветной корешок сверху, две строки текста и
   пустой квадрат. Пропорции листа (3:4), чтобы это читалось бумагой, а не плиткой. */
.el-chip-paper {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 5px;
    background: var(--b-tint);
    border: 1px solid var(--el-line);
    border-top: 4px solid var(--b-accent);
    overflow: hidden;
}
.dark .el-chip-paper { background: var(--b-dark); border-color: #4b5563; border-top-color: var(--b-accent); }
.el-chip-line {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 8px;
    height: 2px;
    border-radius: 1px;
    background: var(--el-blue-ink);
    opacity: 0.22;
}
.dark .el-chip-line { background: #fff; opacity: 0.3; }
.el-chip-line.is-short { top: 14px; right: 40%; }
/* Строки списка под шапкой: миниатюра должна читаться заполненным бланком, а не
   пустым прямоугольником. Линейки, а не отдельные элементы — меньше разметки. */
.el-chip-paper::after {
    content: '';
    position: absolute;
    left: 5px;
    right: 5px;
    top: 24px;
    bottom: 18px;
    background: repeating-linear-gradient(to bottom,
        currentColor 0 1px, transparent 1px 9px);
    opacity: 0.16;
}
.dark .el-chip-paper::after { opacity: 0.26; }
.el-chip-box {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--b-accent);
    border-radius: 1px;
}
.el-chip-name {
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    letter-spacing: -0.01em;
    hyphens: auto;
}
.el-chip-kind { font-size: 9px; line-height: 1.1; opacity: 0.55; text-align: center; }
.el-chip:active .el-chip-paper { transform: translateY(1px); }

/* ─── Бланк бюллетеня ───
   Рамка, официальная шапка с двойной линейкой, строка «сколько отмечать» и
   пустой квадрат в каждой строке. Квадрат ДЕКОРАТИВНЫЙ (aria-hidden, без
   состояний нажатия): это изображение бумаги, а не голосование — иначе человек
   решит, что уже проголосовал в телефоне.
   Цвет свой у каждого листа: в жизни бюллетени разных уровней тоже печатают на
   разной бумаге, чтобы их не путали ни избиратель, ни комиссия. */
.el-ballot {
    --b-accent: var(--el-blue);
    --b-tint: #eef2fb;
    --b-dark: rgba(31, 76, 158, 0.16);
    position: relative;
    margin: 14px 0 18px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--el-line);
    border-top: 5px solid var(--b-accent);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(22, 35, 60, 0.04), 0 6px 18px rgba(22, 35, 60, 0.07);
}
.dark .el-ballot { background: #1c2431; border-color: #374151; box-shadow: none; }
.el-b1 { --b-accent: #1F4C9E; --b-tint: #eef2fb; --b-dark: rgba(31, 76, 158, 0.16); }
.el-b2 { --b-accent: #2F6D55; --b-tint: #edf4f0; --b-dark: rgba(47, 109, 85, 0.18); }
.el-b3 { --b-accent: #B23A2B; --b-tint: #fbefec; --b-dark: rgba(178, 58, 43, 0.18); }
.el-b4 { --b-accent: #5B4A93; --b-tint: #f1eefa; --b-dark: rgba(91, 74, 147, 0.20); }
.el-b5 { --b-accent: #97701A; --b-tint: #faf3e4; --b-dark: rgba(151, 112, 26, 0.18); }
.el-b6 { --b-accent: #33607a; --b-tint: #ecf3f7; --b-dark: rgba(51, 96, 122, 0.18); }

/* Шапка: ровный тон бумаги и одна линейка снизу. Косая защитная сетка тут была
   (владелец, 2026-08-20: «вычурно») — бланк узнаётся рамкой, шапкой и квадратами,
   текстура ему для этого не нужна. */
.el-ballot-head {
    padding: 14px 16px 12px;
    background: var(--b-tint);
    border-bottom: 2px solid var(--b-accent);
}
.dark .el-ballot-head { background: var(--b-dark); }
.el-ballot-no {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--b-accent);
}
.dark .el-ballot-no { color: #fff; opacity: 0.75; }
.el-ballot-title {
    margin: 5px 0 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.28;
    color: var(--el-blue-ink);
}
.dark .el-ballot-title { color: #eef2f8; }
.el-ballot-okrug { margin-top: 4px; font-size: 12.5px; font-weight: 600; opacity: 0.75; }
.el-ballot-date { margin-top: 2px; font-size: 11.5px; opacity: 0.55; }
/* Главная строка бланка: сколько отмечать. Слева — действие, справа — сколько
   вообще строк, чтобы человек понимал длину списка до прокрутки. */
.el-ballot-mark {
    padding: 9px 16px 10px;
    border-bottom: 1px solid var(--el-line);
    background: rgba(22, 35, 60, 0.02);
}
.dark .el-ballot-mark { border-bottom-color: #374151; background: rgba(255, 255, 255, 0.03); }
.el-ballot-mark-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.el-ballot-mark-do { font-size: 13px; font-weight: 700; }
/* Подсказка про тап — под строкой «сколько отмечать», то есть прямо над списком. */
.el-ballot-tip { margin-top: 3px; font-size: 11.5px; line-height: 1.35; opacity: 0.6; }
.el-ballot-mark-n {
    flex: none;
    font-size: 11.5px;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
}
/* Строки бланка разделены линейками, а не промежутками: список в бюллетене
   печатают сплошной таблицей, и именно это делает его узнаваемым. */
.el-rows { display: flex; flex-direction: column; }
.el-rows > * + * { border-top: 1px solid #eef1f6; }
.dark .el-rows > * + * { border-top-color: #2b3444; }
.el-row {
    width: 100%;
    text-align: left;
    padding: 11px 16px;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
}
.el-row.is-tappable { cursor: pointer; }
.el-row-no {
    flex: 0 0 20px;
    text-align: right;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--b-accent);
    opacity: 0.75;
}
.dark .el-row-no { color: #fff; opacity: 0.55; }
.el-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.el-row-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.el-row-sub { font-size: 11.5px; line-height: 1.35; opacity: 0.6; }
/* Пустой квадрат для отметки — тот самый знак, по которому бумагу узнают. */
.el-box {
    flex: none;
    width: 22px;
    height: 22px;
    border: 1.6px solid var(--el-blue-ink);
    border-radius: 2px;
    opacity: 0.4;
}
.dark .el-box { border-color: #cbd5e1; opacity: 0.45; }
/* Вычеркнутый кандидат: фамилия в бюллетене напечатана, но её зачеркнут ручкой —
   так и рисуем, плюс пояснение под строкой без тапа. */
.el-row-wrap.is-struck .el-row-name {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #d62b22;
}
.el-row-wrap.is-struck .el-party-mark,
.el-row-wrap.is-struck .el-row-sub,
.el-row-wrap.is-struck .el-box { opacity: 0.35; }
.el-struck-badge {
    align-self: flex-start;
    margin-top: 3px;
    padding: 1px 7px;
    border-radius: 6px;
    background: #fdf0ef;
    color: #8f231c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}
.dark .el-struck-badge { background: rgba(214, 43, 34, 0.16); color: #f3b3ae; }
.el-struck-note {
    margin: 0 16px 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fdf0ef;
    color: #8f231c;
    font-size: 12px;
    line-height: 1.45;
}
.dark .el-struck-note { background: rgba(214, 43, 34, 0.16); color: #f3b3ae; }
.el-struck-basis { display: block; margin-top: 4px; opacity: 0.8; }
.el-ballot-foot {
    padding: 10px 16px;
    font-size: 11.5px;
    line-height: 1.45;
    opacity: 0.6;
    border-top: 1px solid #eef1f6;
}
.dark .el-ballot-foot { border-top-color: #2b3444; }

/* Знак партии слева: всегда на белой подложке — часть логотипов нарисована чёрным
   контуром (Партия прямой демократии) и на тёмной теме без подложки исчезает. */
.el-party-mark {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #eef1f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.el-party-mark img { width: 30px; height: 30px; object-fit: contain; }
.el-party-mark.is-empty { background: transparent; border-style: dashed; border-color: #e5e7eb; }
.dark .el-party-mark { border-color: #d7dbe3; }
.dark .el-party-mark.is-empty { background: transparent; border-color: #4b5563; }
/* Развёрнутая карточка: сведения с izbirkom.ru. Подпись строки — отдельной
   строкой сверху, потому что значения длинные («ГАОУ ВО города Москвы …, 2024»)
   и в две колонки на телефоне превращаются в лесенку из переносов. */
.el-person-more {
    padding: 2px 16px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    background: rgba(22, 35, 60, 0.02);
}
.dark .el-person-more { background: rgba(255, 255, 255, 0.03); }
.el-person-detail { display: block; margin-top: 8px; }
.el-person-detail-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.5;
}
/* Судимость и статус иноагента — не рядовая строка справки: их публикуют
   отдельно и именно ради того, чтобы человек их увидел. */
.el-person-flag {
    display: block;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fdf0ef;
    color: #8f231c;
    font-size: 12px;
    line-height: 1.45;
}
.dark .el-person-flag { background: rgba(214, 43, 34, 0.16); color: #f3b3ae; }
.el-person-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--el-blue);
    text-decoration: none;
}
.dark .el-person-link { color: #a8c2f0; }

/* ─── Итоги голосования ───
   Тот же бланк, что и бюллетень: цветной корешок, шапка, сплошная таблица строк.
   Меняется содержимое строки — вместо пустого квадрата число и полоска. Полоску
   меряем от лидера, а не от 100%: в пятимандатном округе победитель набирает
   меньше половины бюллетеней, и абсолютные доли дали бы пять одинаковых обрубков,
   по которым разрыв не прочитать.

   Порядок внутри строки: имя и процент на первой линии (по ним ищут), партия,
   мандат и абсолютные голоса — на второй. Число голосов набрано табличными
   цифрами: колонка справа должна читаться сверху вниз как столбик. */

/* Явка под шапкой бланка. Отдельная полоса, а не строка в шапке: это не про
   выборы вообще, а про то, сколько людей в эту бумагу вообще опустили. */
.el-res-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 16px;
    background: var(--b-tint, var(--el-paper));
    border-bottom: 1px solid var(--el-line);
}
.dark .el-res-meta { background: var(--b-dark, rgba(255, 255, 255, 0.04)); border-bottom-color: #374151; }
.el-res-meta-main { font-size: 13px; font-weight: 800; color: var(--el-blue-ink); }
.dark .el-res-meta-main { color: #eef2f8; }
.el-res-meta-sub { font-size: 11.5px; opacity: 0.6; font-variant-numeric: tabular-nums; }

/* Насколько свежие числа. Стоит сразу под явкой, до списка: «предварительные»
   меняет смысл всего, что ниже, и узнать об этом постфактум бесполезно.
   Цветная точка, а не заливка всей полосы: статуса три, и пёстрый бланк от
   этого читался бы хуже, чем от одного акцента слева. */
.el-fresh {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 7px 16px;
    font-size: 11.5px;
    line-height: 1.4;
    border-bottom: 1px solid var(--el-line);
    opacity: 0.75;
}
.dark .el-fresh { border-bottom-color: #374151; }
.el-fresh-dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-radius: 50%;
    background: #6b7280;
}
.el-fresh.is-signed .el-fresh-dot { background: #2F6D55; }
.el-fresh.is-interim .el-fresh-dot { background: var(--el-red); }
.el-fresh.is-interim { opacity: 0.9; }

/* Чей это протокол: округ целиком или только наша территория. Полоса, а не
   сноска внизу, — читать её нужно ДО чисел, иначе они поняты неверно. */
.el-res-scope {
    padding: 8px 16px;
    font-size: 11.5px;
    line-height: 1.4;
    border-bottom: 1px solid var(--el-line);
    opacity: 0.7;
}
.dark .el-res-scope { border-bottom-color: #374151; }
.el-res-scope.is-local {
    border-left: 3px solid var(--b-accent, var(--el-blue));
    padding-left: 13px;
    opacity: 0.85;
}

.el-res-rows { display: flex; flex-direction: column; }
.el-res-rows > * + * { border-top: 1px solid #eef1f6; }
.dark .el-res-rows > * + * { border-top-color: #2b3444; }
.el-res-row {
    width: 100%;
    text-align: left;
    padding: 10px 16px 11px;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 11px;
}
.el-res-row.is-tappable { cursor: pointer; }
/* Место в списке. Крупнее подписи, но тише имени — это координата, а не итог. */
.el-res-rank {
    flex: 0 0 18px;
    text-align: right;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--b-accent, var(--el-blue));
    opacity: 0.55;
}
.el-res-row.is-winner .el-res-rank { opacity: 1; }
.el-res-main { flex: 1 1 auto; min-width: 0; }
.el-res-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.el-res-line.is-sub { margin-top: 1px; }
.el-res-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    min-width: 0;
}
.el-res-row.is-winner .el-res-name { font-weight: 800; }
.el-res-pct {
    flex: none;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--b-accent, var(--el-blue));
}
.dark .el-res-pct { color: #fff; opacity: 0.85; }
.el-res-sub {
    font-size: 11.5px;
    opacity: 0.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.el-res-votes {
    flex: none;
    font-size: 11.5px;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
}
/* Полоска — последняя строка блока, во всю его ширину: так соседние строки
   сравниваются взглядом по одной оси, без привязки к длине фамилии. */
.el-res-bar {
    display: block;
    margin-top: 7px;
    height: 4px;
    border-radius: 2px;
    background: rgba(22, 35, 60, 0.07);
    overflow: hidden;
}
.dark .el-res-bar { background: rgba(255, 255, 255, 0.10); }
.el-res-bar > i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--b-accent, var(--el-blue));
    opacity: 0.38;
}
.el-res-row.is-winner .el-res-bar > i { opacity: 1; }
/* Мандат. Не медаль и не галочка: словом, потому что «Мандат» и «Избрана» —
   это разные вещи, и заменять их одной иконкой нечестно. */
.el-res-seat {
    flex: none;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--b-accent, var(--el-blue));
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.el-res-seat.is-tie { background: var(--el-red); }
.el-res-line.is-sub .el-res-seat + .el-res-votes { margin-left: 8px; }
.el-res-row.is-winner { background: rgba(22, 35, 60, 0.025); }
.dark .el-res-row.is-winner { background: rgba(255, 255, 255, 0.04); }

/* Бумага и ДЭГ — в раскрытой карточке кандидата, над сведениями ЦИК. */
.el-res-parts { display: flex; gap: 8px; margin: 10px 0 2px; flex-wrap: wrap; }
.el-res-part {
    flex: 1 1 120px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(22, 35, 60, 0.04);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.dark .el-res-part { background: rgba(255, 255, 255, 0.06); }
.el-res-parts-note {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.55;
}
.el-res-part-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.55;
}

/* Выбывшие и неопубликованные протоколы — тихие пояснения, не ошибки. */
.el-res-withdrawn,
.el-res-pending {
    padding: 10px 16px;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.65;
}
.el-res-pending { border-bottom: 1px solid var(--el-line); }
.dark .el-res-pending { border-bottom-color: #374151; }
.el-res-withdrawn { border-top: 1px solid #eef1f6; }
.dark .el-res-withdrawn { border-top-color: #2b3444; }

/* ─── Протокол комиссии ───
   Первоисточник под спойлером: почти никому не нужен, но раздел про выборы без
   возможности сверить числа — это просто картинка. */
.el-proto-toggle {
    display: block;
    width: 100%;
    padding: 11px 16px;
    border: none;
    border-top: 1px solid #eef1f6;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    color: var(--b-accent, var(--el-blue));
    cursor: pointer;
}
.dark .el-proto-toggle { border-top-color: #2b3444; color: #a8c2f0; }
.el-proto-toggle.is-open { background: rgba(22, 35, 60, 0.02); }
.el-proto { padding: 2px 16px 14px; font-size: 12.5px; }
.el-proto-cap {
    margin-top: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.5;
}
.el-proto-list { margin: 6px 0 0; }
.el-proto-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}
/* Пунктир между подписью и числом: строки протокола длинные и разной длины,
   без связки глаз теряет, к какому числу относится строка. */
.el-proto-row dt {
    flex: 1 1 auto;
    opacity: 0.6;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.el-proto-row dd {
    flex: none;
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.el-proto-when, .el-proto-src { margin-top: 8px; font-size: 11.5px; opacity: 0.5; }

/* ─── Итог по всему округу (экран поиска) ───
   Партийный бюллетень Госдумы одинаков для всех 116 участков, поэтому его видно
   сразу, без поиска улицы: «кто победил» спрашивают чаще, чем «что было у меня». */
.el-overall {
    --b-accent: var(--el-blue);
    --b-tint: var(--el-paper);
    margin-bottom: 14px;
    border: 1px solid var(--el-line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}
.dark .el-overall { background: #1c2431; border-color: #374151; }
.el-overall-head { padding: 13px 16px 0; }
.el-overall-kicker {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--el-red);
}
.el-overall-title {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--el-blue-ink);
}
.dark .el-overall-title { color: #eef2f8; }
/* Какая именно комиссия. Мелко, но на месте: без этого «итоги» читаются как
   итоги всего округа ГД, а это протокол одной территории. */
.el-overall-where { display: block; margin-top: 3px; font-size: 11.5px; opacity: 0.55; }
.el-overall .el-res-meta { margin-top: 10px; border-top: 1px solid var(--el-line); }
.dark .el-overall .el-res-meta { border-top-color: #374151; }
/* Свёрнуто — первая пятёрка: дальше идут доли меньше двух процентов, ради
   которых не стоит отодвигать поле поиска на экран вниз. */
.el-overall-rows .el-res-rows > .el-res-row:nth-child(n+6) { display: none; }
.el-overall-rows.is-open .el-res-rows > .el-res-row:nth-child(n+6) { display: flex; }
.el-overall-more {
    display: block;
    width: 100%;
    padding: 11px 16px;
    border-top: 1px solid #eef1f6;
    text-align: left;
}
.dark .el-overall-more { border-top-color: #2b3444; }

/* Пункт нижнего меню использует общий стиль .nav-item img из schedule.css —
   отдельных правил не нужно, флаг ведёт себя как соседние иконки. */

/* ─── Ввод с клавиатуры ───
   Пока курсор в поле раздела, нижнее меню уезжает вниз: иначе при открытой
   клавиатуре оно встаёт её верхним краем ровно на список подсказок (см. комментарий
   в elections.js). Трансформ, а не display: none — у fixed-элемента он не трогает
   раскладку, и тап по подсказке не промахивается.
   Правило лежит здесь, а не в schedule.css: класс ставит только этот раздел, и при
   выключенном модуле файл в страницу не подключается вовсе. */
body.el-typing .bottom-nav {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}
.bottom-nav { transition: transform 0.18s ease-out, opacity 0.18s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .bottom-nav { transition: none; }
}

/* ─── Состояния загрузки ─── */
.el-loading,
.el-error {
    padding: 28px 12px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.75;
}