/* ============================================================
   Wrab — раздел «Связь».

   Сюжет раздела — страна на чёрном: никакого тайлового фона, только контуры субъектов,
   которые светятся ровно там, где люди что-то отметили. Пустая карта не выглядит поломкой,
   она выглядит как выключенный прибор — и это честно: данных ещё нет.

   Сигнатура — «полоса страны» под картой: 85 засечек с запада на восток, цвет = статус,
   высота = сколько отметок за сутки. Одновременно легенда, сводка и навигация.
   ============================================================ */

.view-link{display:flex;flex-direction:column;background:var(--bg)}

/* ---------------- операторы ---------------- */
.op-rail{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:0 0 auto;
  padding:10px max(14px,env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--line)}
.op-rail::-webkit-scrollbar{display:none}
.op{flex:0 0 auto;padding:7px 13px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);transition:.15s}
.op:hover{color:var(--text);border-color:var(--line-2)}
.op[aria-checked="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ---------------- сцена карты ---------------- */
.ru-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  background-image:var(--glow)}
.ru-map{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.ru-map.zoomed{cursor:move}
.ru-map:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ru-map.ru-failed{display:none}

/* Цвет несёт контур, а не заливка: залитый прозрачным цветом чёрный даёт грязный
   оттенок (жёлтый становится болотным), а яркая линия по краю читается на любом фоне
   и не спорит с соседним регионом. */
.ru-reg{
  fill:#141416;
  stroke:var(--color-border-strong);
  stroke-width:.75;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  transition:fill .25s var(--ease),stroke .25s var(--ease);
  cursor:pointer;
}
.ru-reg[data-st="ok"]{fill:rgba(61,217,214,.14);stroke:#3dd9d6;stroke-width:1.1}
.ru-reg[data-st="throttled"]{fill:rgba(251,191,36,.13);stroke:#fbbf24;stroke-width:1.1}
.ru-reg[data-st="down"]{fill:rgba(239,68,68,.2);stroke:#ef4444;stroke-width:1.2}
/* свечение появляется только там, где есть данные: чем больше отметок в стране,
   тем «живее» выглядит карта — это и есть награда за участие */
.ru-reg:not([data-st="nodata"]){filter:drop-shadow(0 0 5px currentColor)}
.ru-reg[data-st="ok"]{color:rgba(61,217,214,.55)}
.ru-reg[data-st="throttled"]{color:rgba(251,191,36,.45)}
.ru-reg[data-st="down"]{color:rgba(239,68,68,.6)}
.ru-reg.hot{fill:#1f2023}
.ru-reg.hot[data-st="ok"]{fill:rgba(61,217,214,.3)}
.ru-reg.hot[data-st="throttled"]{fill:rgba(251,191,36,.28)}
.ru-reg.hot[data-st="down"]{fill:rgba(239,68,68,.38)}
.ru-reg.on{stroke:var(--text);stroke-width:1.8}
.ru-reg:focus{outline:none;stroke:var(--accent);stroke-width:1.8}
.ru-reg.flash{animation:regFlash 1.1s var(--ease)}
@keyframes regFlash{
  0%{stroke:var(--accent);stroke-width:3}
  100%{stroke-width:.6}
}
html[data-theme="light"] .ru-reg{fill:#ececed;stroke:#c9cacb}
html[data-theme="light"] .ru-reg[data-st="ok"]{fill:rgba(15,141,138,.2);stroke:#0b6e6c}
html[data-theme="light"] .ru-reg[data-st="throttled"]{fill:rgba(138,90,0,.2);stroke:#8a5a00}
html[data-theme="light"] .ru-reg[data-st="down"]{fill:rgba(192,38,38,.2);stroke:#c02626}
html[data-theme="light"] .ru-reg:not([data-st="nodata"]){filter:none}

.ru-zoom{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:3}
.ru-zoom button{width:34px;height:34px;border-radius:var(--r-sm);background:var(--surface);
  border:1px solid var(--line);color:var(--text-2);font-family:var(--fm);font-size:15px;
  display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.ru-zoom button:hover{color:var(--text);border-color:var(--line-2)}
.ru-zoom svg{width:15px;height:15px;fill:currentColor}

.ru-tip{position:absolute;z-index:4;transform:translateX(-50%);pointer-events:none;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:6px 10px;box-shadow:var(--shadow-sm);white-space:nowrap;
  display:flex;flex-direction:column;gap:1px;line-height:1.25}
.ru-tip b{font-size:13px;font-weight:700}
.ru-tip span{font-family:var(--fm);font-size:10.5px;color:var(--text-3)}
.ru-tip span[data-st="ok"]{color:var(--st-yes)}
.ru-tip span[data-st="throttled"]{color:var(--st-low)}
.ru-tip span[data-st="down"]{color:var(--st-no)}

/* ---------------- пустое состояние ---------------- */
.blank{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,calc(100% - 32px));text-align:center;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;
  box-shadow:var(--shadow);backdrop-filter:blur(8px)}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.blank{background:var(--surface)}}
.blank h2{font-size:22px;font-weight:800;letter-spacing:-.035em;margin:0 0 10px}
.blank-text{color:var(--text-2);font-size:13.5px;line-height:1.5;margin:0 0 18px}
.blank-acts{display:flex;flex-direction:column;gap:8px}

/* ============================================================
   СИГНАТУРА: полоса страны
   ============================================================ */
.pulse{flex:0 0 auto;border-top:1px solid var(--line);background:var(--surface);
  padding:10px max(14px,env(safe-area-inset-left,0px)) calc(10px + var(--safe-b))}
.pulse-head{display:flex;align-items:baseline;gap:10px;min-height:18px}
.pulse-head .eyebrow{margin:0;flex:0 0 auto}
.pulse-name{flex:1;min-width:0;font-size:12.5px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.pulse-name em{font-style:normal;font-family:var(--fm);font-weight:400;font-size:11px;color:var(--text-3)}
.pulse-find{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;
  border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);
  font-size:11.5px;font-weight:600;color:var(--text-2)}
.pulse-find svg{width:12px;height:12px;fill:currentColor}
.pulse-find:hover{color:var(--text);border-color:var(--line-2)}

/* засечки: одна на субъект, без прокрутки — вся страна помещается в экран */
.pulse-strip{display:flex;align-items:flex-end;gap:2px;height:44px;margin:8px 0 6px;
  touch-action:pan-y}
.tick{flex:1 1 0;min-width:2px;height:100%;padding:0;background:none;border:0;
  display:flex;align-items:flex-end;position:relative}
/* сама засечка тонкая (это прибор, а не столбчатая диаграмма), а кнопка вокруг неё
   во всю ширину и высоту полосы — чтобы в неё можно было попасть пальцем */
.tick::after{content:"";display:block;width:min(100%,5px);margin:0 auto;border-radius:1px;
  background:var(--st-nodata);opacity:.5;
  height:var(--h,5px);
  animation:tickRise .5s var(--ease) both;animation-delay:calc(var(--i) * 6ms)}
.tick[data-lvl="0"]{--h:5px}
.tick[data-lvl="1"]{--h:12px}
.tick[data-lvl="2"]{--h:20px}
.tick[data-lvl="3"]{--h:30px}
.tick[data-lvl="4"]{--h:40px}
.tick[data-st="ok"]::after{background:var(--st-yes);opacity:1;box-shadow:0 0 8px rgba(61,217,214,.6)}
.tick[data-st="throttled"]::after{background:var(--st-low);opacity:1;box-shadow:0 0 8px rgba(251,191,36,.5)}
.tick[data-st="down"]::after{background:var(--st-no);opacity:1;box-shadow:0 0 9px rgba(239,68,68,.6)}
.tick.on::after{background:var(--text);opacity:1;box-shadow:none}
.tick.on::before{content:"";position:absolute;left:50%;top:0;width:1px;height:100%;
  margin-left:-.5px;background:var(--line-2)}
.tick:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:2px}
@keyframes tickRise{from{height:0}}
html[data-theme="light"] .tick[data-st="ok"]::after,
html[data-theme="light"] .tick[data-st="throttled"]::after,
html[data-theme="light"] .tick[data-st="down"]::after{box-shadow:none}

.pulse-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--fm);font-size:10.5px;color:var(--text-3)}
.pulse-legend .lg{display:inline-flex;align-items:center;gap:5px}
.pulse-legend .lg i{width:7px;height:7px;border-radius:2px;background:var(--st-nodata)}
.pulse-legend .lg[data-st="ok"] i{background:var(--st-yes)}
.pulse-legend .lg[data-st="throttled"] i{background:var(--st-low)}
.pulse-legend .lg[data-st="down"] i{background:var(--st-no)}
.pulse-legend .lg b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.pulse-legend .lg-mute{opacity:.7}
.pulse-legend .lg-scale{margin-left:auto;letter-spacing:.1em}
@media (max-width:520px){
  .pulse-legend{gap:9px;font-size:10px}
  .pulse-legend .lg-scale{display:none}
}

/* строка проблемных регионов — текстовый ответ на «где сейчас плохо» */
.pulse-hot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.hot-label{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;color:var(--text-3);
  margin-right:2px;flex:0 0 auto}
.hot-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:600;
  color:var(--text);transition:.15s}
.hot-chip::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--st-nodata);flex:0 0 auto}
.hot-chip[data-st="throttled"]::before{background:var(--st-low)}
.hot-chip[data-st="down"]::before{background:var(--st-no)}
.hot-chip:hover{border-color:var(--line-2)}
.hot-chip[data-st="down"]:hover{border-color:var(--st-no)}
.hot-chip[data-st="throttled"]:hover{border-color:var(--st-low)}

/* ============================================================
   ПАНЕЛЬ РЕГИОНА
   ============================================================ */
.rg-head .eyebrow{margin-bottom:4px}
.rg-head h2{margin:0 34px .2em 0}
.rg-load{color:var(--text-3);font-size:13px;padding:24px 0;text-align:center}
.rg-stat{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--fm);font-size:11.5px;
  color:var(--text-3);margin:0 0 14px}
.rg-stat b{color:var(--text);font-size:13px;margin-right:5px}

.rg-ops{display:flex;flex-direction:column;gap:6px}
.rg-op{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;
  padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px solid var(--line);text-align:left;transition:.15s;
  border-left:3px solid var(--st-nodata)}
.rg-op:hover{border-color:var(--line-2);border-left-color:var(--st-nodata)}
.rg-op[data-st="ok"]{border-left-color:var(--st-yes)}
.rg-op[data-st="throttled"]{border-left-color:var(--st-low)}
.rg-op[data-st="down"]{border-left-color:var(--st-no)}
.rg-op-name{font-size:14px;font-weight:700}
.rg-op-st{font-size:12.5px;font-weight:700;color:var(--st-nodata);text-align:right}
.rg-op[data-st="ok"] .rg-op-st{color:var(--st-yes)}
.rg-op[data-st="throttled"] .rg-op-st{color:var(--st-low)}
.rg-op[data-st="down"] .rg-op-st{color:var(--st-no)}
.rg-op-meta{grid-column:1/-1;font-family:var(--fm);font-size:10.5px;color:var(--text-3)}
.rg-pend{color:var(--text-2)}
.rg-report{margin-top:14px}
.rg-sec{margin:20px 0 8px}
.rg-empty{color:var(--text-3);font-size:13px;line-height:1.5;margin:0;padding:6px 0}
.rg-feed{display:flex;flex-direction:column;gap:6px}

.rp{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);
  animation:rowIn .26s var(--ease) both;animation-delay:calc(var(--i) * 35ms)}
.rp-bar{width:3px;align-self:stretch;border-radius:2px;background:var(--st-nodata);flex:0 0 auto}
.rp[data-st="ok"] .rp-bar{background:var(--st-yes)}
.rp[data-st="throttled"] .rp-bar{background:var(--st-low)}
.rp[data-st="down"] .rp-bar{background:var(--st-no)}
.rp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rp-main b{font-size:13px;font-weight:700}
.rp-main span{font-size:11.5px;color:var(--text-2)}
.rp-at{flex:0 0 auto;font-size:10.5px;color:var(--text-3)}
.rp-votes{display:flex;gap:5px;flex:0 0 auto}
.rp-vote{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px;
  border-radius:var(--r-sm);background:var(--surface-3);border:1px solid var(--line);
  color:var(--text-2);font-family:var(--fm);font-size:11px}
.rp-vote svg{width:12px;height:12px;fill:currentColor}
.rp-vote:hover{color:var(--text);border-color:var(--line-2)}
.rp-vote.up:hover{color:var(--st-yes);border-color:var(--st-yes)}
.rp-vote.down:hover{color:var(--st-no);border-color:var(--st-no)}
.rp-vote:disabled{opacity:.55}
.rp-own{font-family:var(--fm);font-size:10.5px;color:var(--text-3)}
.rp-voted{border-color:var(--line-2)}

/* мягкая воронка: одна строка, только там, где сеть уже режут */
.funnel{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:12px 14px;
  border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface-2);
  transition:border-color .15s}
.funnel:hover{border-color:var(--accent)}
.funnel-text{flex:1;min-width:0;font-size:13px;line-height:1.4;color:var(--text)}
.funnel-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;
  font-size:12.5px;font-weight:700;color:var(--accent-ink)}
.funnel-go svg{width:13px;height:13px;fill:currentColor}

/* поиск региона */
.rg-find input{width:100%;height:44px;padding:0 14px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-size:16px;outline:none}
.rg-find input:focus-visible{border-color:var(--accent)}
.rg-list{display:flex;flex-direction:column;gap:2px;margin-top:10px;max-height:52vh;overflow-y:auto}
.rg-item{display:flex;align-items:center;gap:10px;padding:11px 8px;border-radius:var(--r-sm);
  border-bottom:1px solid var(--line);text-align:left}
.rg-item:hover{background:var(--surface-2)}
.rg-item i{width:8px;height:8px;border-radius:2px;background:var(--st-nodata);flex:0 0 auto}
.rg-item i[data-st="ok"]{background:var(--st-yes)}
.rg-item i[data-st="throttled"]{background:var(--st-low)}
.rg-item i[data-st="down"]{background:var(--st-no)}
.rg-item b{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-item span{flex:0 0 auto;font-family:var(--fm);font-size:10.5px;color:var(--text-3)}

/* ============================================================
   ФОРМА ОТМЕТКИ
   ============================================================ */
.rr-sec{margin:18px 0 8px}
.rr-ops{display:flex;flex-wrap:wrap;gap:7px}
.rr-op{padding:9px 14px;border-radius:var(--r-pill);background:var(--surface-2);
  border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--text-2);transition:.15s}
.rr-op:hover{color:var(--text);border-color:var(--line-2)}
.rr-op[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.rr-tiles{display:flex;flex-direction:column;gap:8px}
.rr-tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:14px 16px;border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--line);border-left:3px solid var(--st-nodata);
  text-align:left;transition:.15s}
.rr-tile:hover:not(:disabled){border-color:var(--line-2);transform:translateY(-1px)}
.rr-tile:disabled{opacity:.45;cursor:not-allowed}
.rr-tile[data-st="ok"]{border-left-color:var(--st-yes)}
.rr-tile[data-st="throttled"]{border-left-color:var(--st-low)}
.rr-tile[data-st="down"]{border-left-color:var(--st-no)}
.rr-tile-label{font-size:16px;font-weight:800;letter-spacing:-.02em}
.rr-tile[data-st="ok"] .rr-tile-label{color:var(--st-yes)}
.rr-tile[data-st="throttled"] .rr-tile-label{color:var(--st-low)}
.rr-tile[data-st="down"] .rr-tile-label{color:var(--st-no)}
.rr-tile-hint{font-size:12.5px;color:var(--text-2);line-height:1.35}
.rr-tile.sending{opacity:.6}
.rr-note{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--text-3)}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (min-width:1024px){
  .op-rail{padding:12px 24px}
  .pulse{padding:12px 24px calc(12px + var(--safe-b))}
  .pulse-strip{height:56px;gap:3px}
  .tick[data-lvl="0"]{--h:6px}
  .tick[data-lvl="1"]{--h:16px}
  .tick[data-lvl="2"]{--h:27px}
  .tick[data-lvl="3"]{--h:40px}
  .tick[data-lvl="4"]{--h:52px}
  .ru-zoom{right:24px;bottom:24px}
}
/* Портрет: страна — фигура широкая, в вертикальный экран она вписывается по ширине и
   оставляет сверху и снизу пустую черноту. Поэтому на телефоне сцена ограничена по высоте,
   а освободившееся место занимает то, что на маленьком экране полезнее карты: полоса
   покрупнее и список регионов, где сейчас плохо. */
@media (orientation:portrait) and (max-width:700px){
  .pulse{max-height:52%;overflow-y:auto}
  .pulse-strip{height:60px}
  .tick[data-lvl="1"]{--h:16px}
  .tick[data-lvl="2"]{--h:28px}
  .tick[data-lvl="3"]{--h:42px}
  .tick[data-lvl="4"]{--h:56px}
}
@media (max-width:390px){
  .op{padding:7px 11px;font-size:12.5px}
  .pulse-strip{height:52px;margin:6px 0 5px}
  .tick[data-lvl="3"]{--h:36px}
  .tick[data-lvl="4"]{--h:48px}
}

/* ---------- гео-распределение: кольца отметок по субъектам ---------- */
#ruDots{pointer-events:none}
.ru-dot{pointer-events:auto;cursor:pointer}
.ru-dot-bg{fill:#0a0a0a;stroke:#242527;stroke-width:1}
.ru-seg{fill:none;stroke-width:3.2;stroke-linecap:butt;
  transform-box:fill-box;transform-origin:center;transform:rotate(-90deg)}
.ru-dot-n{fill:#fafafa;font-family:var(--fm,ui-monospace,monospace);font-size:9px;font-weight:800;
  text-anchor:middle;dominant-baseline:central;pointer-events:none}
.ru-dot:hover .ru-dot-bg,.ru-dot:focus-visible .ru-dot-bg{stroke:#3dd9d6}
.ru-dot:hover{filter:drop-shadow(0 0 6px rgba(61,217,214,.5))}
@media (prefers-reduced-motion:no-preference){
  .ru-dot{animation:dotIn .35s ease-out both}
  @keyframes dotIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
}