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

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

   Цвета статусов — только через токены app.css (--st-ok / --st-throttled /
   --st-down / --st-nodata): обе темы получают свои оттенки сами, hex здесь нет.

   Сигнатура раздела — «полоса страны» под картой: 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-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--line);scroll-padding:14px}
.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:color .15s,border-color .15s,background .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)}
@media (max-width:640px){
  /* хвост рейла уходит за край — край гаснет, чтобы было видно, что там ещё есть */
  .op-rail{mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);padding-right:40px}
}

/* ---------------- сцена карты ---------------- */
.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;user-select:none;
  -webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.ru-map.zoomed{cursor:move}
.ru-map.gesturing{cursor:grabbing}
.ru-map:focus{outline:none}
.ru-map:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ru-map.ru-failed{display:none}
#ruLayer{will-change:transform}

/* Цвет несёт контур, заливка — лёгкая примесь того же цвета: яркая линия по краю
   читается на любом фоне и не спорит с соседним регионом. */
.ru-reg{
  fill:var(--surface-2);
  fill-rule:evenodd;          /* дырка (Адыгея в Кубани, Москва в области) — дырка при любом обходе колец */
  stroke:var(--line-2);
  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"]{stroke:var(--st-ok);stroke-width:1.1;fill:color-mix(in srgb,var(--st-ok) 16%,var(--surface-2))}
.ru-reg[data-st="throttled"]{stroke:var(--st-throttled);stroke-width:1.1;fill:color-mix(in srgb,var(--st-throttled) 16%,var(--surface-2))}
.ru-reg[data-st="down"]{stroke:var(--st-down);stroke-width:1.2;fill:color-mix(in srgb,var(--st-down) 22%,var(--surface-2))}
.ru-reg.hot{fill:var(--surface-3)}
.ru-reg.hot[data-st="ok"]{fill:color-mix(in srgb,var(--st-ok) 30%,var(--surface-2))}
.ru-reg.hot[data-st="throttled"]{fill:color-mix(in srgb,var(--st-throttled) 30%,var(--surface-2))}
.ru-reg.hot[data-st="down"]{fill:color-mix(in srgb,var(--st-down) 38%,var(--surface-2))}
@supports not (fill:color-mix(in srgb,red 50%,blue)){
  .ru-reg[data-st="ok"]{fill:rgba(61,217,214,.15)}
  .ru-reg[data-st="throttled"]{fill:rgba(251,191,36,.14)}
  .ru-reg[data-st="down"]{fill:rgba(239,68,68,.2)}
  .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)}
}
/* свечение — только у регионов с данными, только в тёмной теме и не во время жеста:
   растровый фильтр на каждом кадре панорамы — самое дорогое, что есть на экране */
html[data-theme="dark"] .ru-map:not(.gesturing) .ru-reg[data-st="ok"]{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--st-ok) 55%,transparent))}
html[data-theme="dark"] .ru-map:not(.gesturing) .ru-reg[data-st="throttled"]{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--st-throttled) 45%,transparent))}
html[data-theme="dark"] .ru-map:not(.gesturing) .ru-reg[data-st="down"]{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--st-down) 60%,transparent))}
.ru-map.gesturing .ru-reg{transition:none}
.ru-reg.on{stroke:var(--text);stroke-width:1.8}
.ru-reg.flash{animation:regFlash 1.2s var(--ease)}
@keyframes regFlash{
  0%{stroke:var(--accent);stroke-width:3.5}
  100%{stroke-width:.75}
}

/* кольца-счётчики: постоянный экранный размер (масштаб задаёт JS), цвета из токенов */
#ruMarks{pointer-events:none}
.ru-mark-bg{fill:var(--surface);stroke:var(--line-2);stroke-width:1}
.ru-seg{fill:none;stroke-width:3;stroke-linecap:butt;transform:rotate(-90deg);transform-box:fill-box;transform-origin:center}
.ru-seg[data-st="ok"]{stroke:var(--st-ok)}
.ru-seg[data-st="throttled"]{stroke:var(--st-throttled)}
.ru-seg[data-st="down"]{stroke:var(--st-down)}
.ru-mark-n{fill:var(--text);font-family:var(--fm);font-size:10px;font-weight:800;text-anchor:middle;dominant-baseline:central;letter-spacing:-.02em}
@media (prefers-reduced-motion:no-preference){
  .ru-mark{animation:markIn .28s var(--ease) both;transform-box:fill-box;transform-origin:center}
  @keyframes markIn{from{opacity:0}}
}

/* кнопки масштаба: 44 px там, где тыкают пальцем */
.ru-zoom{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:3}
.ru-zoom button{width:36px;height:36px;border-radius:var(--r-sm);background:var(--surface);
  border:1px solid var(--line);color:var(--text-2);font-family:var(--fm);font-size:16px;line-height:1;
  display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:color .15s,border-color .15s}
.ru-zoom button:hover{color:var(--text);border-color:var(--line-2)}
.ru-zoom button:disabled{opacity:.4;cursor:default}
.ru-zoom svg{width:16px;height:16px;fill:currentColor}
@media (pointer:coarse){.ru-zoom button{width:44px;height:44px}}

/* подсказка над картой — чисто визуальная, скринридер слышит aria-label региона */
.ru-tip{position:absolute;left:0;top:0;z-index:4;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;max-width:min(320px,calc(100vw - 24px))}
.ru-tip b{font-size:13px;font-weight:700}
.ru-tip span{font-family:var(--fm);font-size:10.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis}
.ru-tip span[data-st="ok"]{color:var(--st-ok)}
.ru-tip span[data-st="throttled"]{color:var(--st-throttled)}
.ru-tip span[data-st="down"]{color:var(--st-down)}

/* карта не загрузилась — отдельное честное состояние с повтором */
.ru-fail{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.ru-fail div{max-width:360px}
.ru-fail h2{font-size:20px;font-weight:800;letter-spacing:-.03em;margin:0 0 8px}
.ru-fail p{color:var(--text-2);font-size:13.5px;line-height:1.5;margin:0 0 14px}

/* ---------------- баннер состояния ----------------
   На широком экране — карточка у нижнего края по центру: страна в проекции Альберса — дуга,
   и под её серединой (южнее Алтая и Тувы) при k=1 действительно пусто. У верхнего края под
   карточкой стояли Мурманск, Карелия, Архангельск, Таймыр, Якутия и Чукотка — они не кликались.
   Ширина оставляет место кнопкам масштаба справа. Контейнер прозрачен для указателя,
   кликается только карточка.
   На телефоне баннер стоит в потоке над картой: карта чуть меньше, зато ничего не прячет. */
.link-banner{position:absolute;z-index:5;top:auto;bottom:14px;left:50%;transform:translateX(-50%);
  width:min(640px,calc(100% - 132px));pointer-events:none;
  display:flex;flex-direction:column;gap:6px;align-items:center}
.lb-card{pointer-events:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  max-width:100%;padding:12px 14px;border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);animation:lbIn .28s var(--ease)}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.lb-card{background:var(--surface)}}
@keyframes lbIn{from{opacity:0;transform:translateY(6px)}}
.lb-text{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.lb-text .eyebrow{margin:0 0 2px}
.lb-text b{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.lb-text span{font-size:12.5px;line-height:1.45;color:var(--text-2)}
.lb-acts{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.lb-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:var(--r);
  font-size:13px;font-weight:700;border:1px solid transparent;transition:.15s;white-space:nowrap}
.lb-accent{background:var(--accent);color:var(--accent-fg)}
.lb-accent:hover{background:var(--accent-strong)}
.lb-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.lb-ghost:hover{border-color:var(--text-3)}
.lb-link{padding:4px 8px;font-size:12.5px;color:var(--accent-ink);background:transparent}
.lb-link:hover{text-decoration:underline}
.lb-btn:disabled{opacity:.5;cursor:default}
.link-banner[data-kind="error"] .lb-card,.link-banner[data-kind="error-soft"] .lb-card{border-color:color-mix(in srgb,var(--st-down) 45%,var(--line))}
.link-banner[data-kind="offline"] .lb-card,.link-banner[data-kind="offline-soft"] .lb-card{border-color:color-mix(in srgb,var(--st-throttled) 45%,var(--line))}
.link-banner[data-kind$="-soft"] .lb-card{padding:8px 12px;border-radius:var(--r);gap:10px}
.link-banner[data-kind$="-soft"] .lb-text b{font-size:13px}
.link-banner[data-kind$="-soft"] .lb-text span{font-size:11.5px;font-family:var(--fm)}
.lb-note{pointer-events:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  font-size:12.5px;line-height:1.4;color:var(--text-2);max-width:min(640px,100%);box-shadow:var(--shadow-sm)}
.lb-note::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--st-throttled);flex:0 0 auto}
@media (max-width:699px){
  .ru-stage{display:flex;flex-direction:column}
  .ru-map{flex:1 1 0;min-height:0;height:auto}
  .link-banner{position:static;transform:none;width:auto;order:-1;flex:0 0 auto;
    padding:8px 8px 0;align-items:stretch}
  .lb-card{padding:11px 12px;gap:8px;animation:none}
  .lb-text b{font-size:14.5px}
  .lb-acts{width:100%}
  .lb-acts .lb-btn{flex:1 1 auto;padding:9px 10px;font-size:12.5px}
  .lb-note{max-width:none}
}

/* ============================================================
   СИГНАТУРА: полоса страны
   ============================================================ */
.pulse{flex:0 0 auto;border-top:1px solid var(--line);background:var(--surface);
  padding:9px max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px))}
.pulse-head{display:flex;align-items:center;gap:10px;min-height:28px}
.pulse-head .eyebrow{margin:0;flex:0 0 auto}
.pulse-meta{flex:1;min-width:0;font-family:var(--fm);font-size:10.5px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pulse-find{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:6px 11px;
  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);transition:.15s}
.pulse-find svg{width:12px;height:12px;fill:currentColor}
.pulse-find:hover{color:var(--text);border-color:var(--line-2)}

/* имя региона под курсором/пальцем — кнопка на всю ширину, открывает регион */
.pulse-name{display:flex;align-items:baseline;gap:8px;width:100%;min-height:24px;margin:4px 0 0;
  padding:2px 0;text-align:left;border-radius:var(--r-sm);color:var(--text);cursor:pointer}
.pulse-name:disabled{cursor:default}
.pulse-name b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.pulse-name em{font-style:normal;font-family:var(--fm);font-size:11px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.pulse-name em[data-st="ok"]{color:var(--st-ok)}
.pulse-name em[data-st="throttled"]{color:var(--st-throttled)}
.pulse-name em[data-st="down"]{color:var(--st-down)}
.pulse-name i{font-style:normal;color:var(--text-3);flex:0 0 auto;transition:transform .15s}
.pulse-name:not(:disabled):hover i{color:var(--accent-ink);transform:translateX(2px)}
.pn-hint{font-family:var(--fm);font-size:10.5px;letter-spacing:.04em;color:var(--text-3)}

/* засечки: одна на субъект, без прокрутки — вся страна помещается в экран */
.pulse-strip{display:flex;align-items:flex-end;gap:2px;height:46px;margin:6px 0 6px;touch-action:pan-y;
  -webkit-tap-highlight-color:transparent}
.tick{flex:1 1 0;min-width:2px;height:100%;padding:0;background:none;border:0;
  display:flex;align-items:flex-end;position:relative;cursor:pointer}
/* засечка тонкая (это прибор, а не столбчатая диаграмма), а кнопка вокруг неё —
   во всю ширину и высоту полосы, чтобы попадать пальцем */
.tick::after{content:"";display:block;width:min(100%,5px);margin:0 auto;border-radius:1.5px;
  background:var(--st-nodata);opacity:.45;height:var(--h,5px);
  transition:height .3s var(--ease),background .25s,opacity .25s}
.pulse-strip.first .tick::after{animation:tickRise .5s var(--ease) both;animation-delay:calc(var(--i) * 5ms)}
.tick[data-lvl="0"]{--h:5px}
.tick[data-lvl="1"]{--h:13px}
.tick[data-lvl="2"]{--h:22px}
.tick[data-lvl="3"]{--h:32px}
.tick[data-lvl="4"]{--h:42px}
.tick[data-st="ok"]::after{background:var(--st-ok);opacity:1}
.tick[data-st="throttled"]::after{background:var(--st-throttled);opacity:1}
.tick[data-st="down"]::after{background:var(--st-down);opacity:1}
html[data-theme="dark"] .tick[data-st="ok"]::after{box-shadow:0 0 8px color-mix(in srgb,var(--st-ok) 60%,transparent)}
html[data-theme="dark"] .tick[data-st="throttled"]::after{box-shadow:0 0 8px color-mix(in srgb,var(--st-throttled) 50%,transparent)}
html[data-theme="dark"] .tick[data-st="down"]::after{box-shadow:0 0 9px color-mix(in srgb,var(--st-down) 60%,transparent)}
.tick.hov::after{opacity:1;background:var(--text-2)}
.tick.hov[data-st="ok"]::after,.tick.hov[data-st="throttled"]::after,.tick.hov[data-st="down"]::after{filter:brightness(1.25)}
.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}}

.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-ok)}
.pulse-legend .lg[data-st="throttled"] i{background:var(--st-throttled)}
.pulse-legend .lg[data-st="down"] i{background:var(--st-down)}
.pulse-legend .lg b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.pulse-legend .lg-mute{opacity:.75}
.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:9px;
  padding-top:9px;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-throttled)}
.hot-chip[data-st="down"]::before{background:var(--st-down)}
.hot-chip[data-st="ok"]::before{background:var(--st-ok)}
.hot-chip em{font-style:normal;font-family:var(--fm);font-size:10.5px;font-weight:400;color:var(--text-3)}
.hot-chip:hover{border-color:var(--line-2)}
.hot-chip[data-st="down"]:hover{border-color:var(--st-down)}
.hot-chip[data-st="throttled"]:hover{border-color:var(--st-throttled)}

/* ============================================================
   ШИТ РЕГИОНА
   ============================================================ */
.rg-head .eyebrow{margin-bottom:4px}
.rg-head h2{margin:0 34px .15em 0;outline:none}
.rg-head h2:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
/* шит открыт тапом (link.js ставит data-input): программный фокус на заголовке и первом контроле
   не рисует рамку — она для клавиатуры, и при первом же keydown атрибут переключается в "key" */
.sheet[data-input="touch"] :is(.rg-head h2,.rg-op,.rr-tile,.rr-op,.rg-find input):focus-visible{outline:none}
.rg-sum{margin:0 0 14px;font-size:13px;line-height:1.45;color:var(--text-2)}
.rg-sum span{font-weight:700;color:var(--text)}
.rg-sum span[data-st="ok"]{color:var(--st-ok)}
.rg-sum span[data-st="throttled"]{color:var(--st-throttled)}
.rg-sum span[data-st="down"]{color:var(--st-down)}
.rg-mine{margin:0 0 12px;padding:9px 12px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.45;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--st-throttled)}
.rg-load{color:var(--text-3);font-size:13px;padding:18px 0;text-align:center}
.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);border-left:3px solid var(--st-nodata);text-align:left;transition:.15s}
.rg-op:hover{border-color:var(--line-2)}
.rg-op[data-st="ok"]{border-left-color:var(--st-ok)}
.rg-op[data-st="throttled"]{border-left-color:var(--st-throttled)}
.rg-op[data-st="down"]{border-left-color:var(--st-down)}
.rg-op.hl{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.rg-op-name{font-size:14px;font-weight:700}
.rg-op-st{font-size:12.5px;font-weight:700;color:var(--text-3);text-align:right}
.rg-op[data-st="ok"] .rg-op-st{color:var(--st-ok)}
.rg-op[data-st="throttled"] .rg-op-st{color:var(--st-throttled)}
.rg-op[data-st="down"] .rg-op-st{color:var(--st-down)}
.rg-op-meta{font-family:var(--fm);font-size:10.5px;color:var(--text-3);min-width:0}
.rg-op-go{font-size:11.5px;font-weight:600;color:var(--accent-ink);text-align:right;opacity:.85}
.rg-op:hover .rg-op-go{opacity:1}
.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:rpIn .26s var(--ease) both;animation-delay:calc(var(--i) * 35ms)}
@keyframes rpIn{from{opacity:0;transform:translateY(4px)}}
.rp-mine{border-color:var(--line-2)}
.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-ok)}
.rp[data-st="throttled"] .rp-bar{background:var(--st-throttled)}
.rp[data-st="down"] .rp-bar{background:var(--st-down)}
.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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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:30px;padding:0 9px;
  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-ok);border-color:var(--st-ok)}
.rp-vote.down:hover{color:var(--st-down);border-color:var(--st-down)}
.rp-vote:disabled{opacity:.55}
.rp-own{font-family:var(--fm);font-size:10.5px;color:var(--accent-ink)}
.rp-voted{border-color:var(--line-2)}
/* отметки старше суток: в сводку не входят, голосовать по ним нельзя — приглушены и под своей подписью */
.rg-old{margin:10px 0 2px}
.rp-old{opacity:.6}
.rp-old .rp-bar{opacity:.5}

/* поиск региона */
.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-ok)}
.rg-item i[data-st="throttled"]{background:var(--st-throttled)}
.rg-item i[data-st="down"]{background:var(--st-down)}
.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 1 auto;min-width:0;font-family:var(--fm);font-size:10.5px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}

/* ============================================================
   ФОРМА ОТМЕТКИ
   ============================================================ */
.rr-back{display:inline-flex;align-items:center;gap:4px;margin:2px 0 6px;padding:4px 8px 4px 0;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.04em;color:var(--text-3);border-radius:var(--r-sm)}
.rr-back:hover{color:var(--accent-ink)}
.rr-sec{margin:16px 0 8px}
.rr-ops{display:flex;flex-wrap:wrap;gap:7px;border-radius:var(--r);transition:box-shadow .2s}
.rr-ops.nudge{animation:nudge .5s var(--ease);box-shadow:0 0 0 2px var(--accent)}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.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-checked="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.rr-hint{margin:14px 0 8px;font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--text-3)}
.rr-hint.warn{color:var(--st-throttled)}
.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:.5;cursor:progress}
.rr-tile[data-st="ok"]{border-left-color:var(--st-ok)}
.rr-tile[data-st="throttled"]{border-left-color:var(--st-throttled)}
.rr-tile[data-st="down"]{border-left-color:var(--st-down)}
.rr-tile-label{font-size:16px;font-weight:800;letter-spacing:-.02em}
.rr-tile[data-st="ok"] .rr-tile-label{color:var(--st-ok)}
.rr-tile[data-st="throttled"] .rr-tile-label{color:var(--st-throttled)}
.rr-tile[data-st="down"] .rr-tile-label{color:var(--st-down)}
.rr-tile-hint{font-size:12.5px;color:var(--text-2);line-height:1.35}
.rr-tile.sending{opacity:.8;border-color:var(--accent)}
.rr-geo{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:14px 0 0;font-size:12px;line-height:1.45;color:var(--text-3)}
.rr-geo .lb-link{padding:2px 0}
.rr-geo-ok{color:var(--accent-ink)}
.rr-note{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--text-3)}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (min-width:1024px){
  .op-rail{padding:12px 24px}
  .pulse{padding:10px 24px 12px}
  .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}
  .link-banner{bottom:18px}
}
/* Портрет: страна — широкая фигура, в вертикальный экран она вписывается по ширине.
   Стартовый вид на телефоне — европейская часть (это делает JS), а полоса и список
   «где плохо» — главные инструменты навигации; сцене отдано всё, что осталось. */
@media (orientation:portrait) and (max-width:700px){
  .pulse{max-height:46%;overflow-y:auto}
  .pulse-strip{height:56px}
  .tick[data-lvl="1"]{--h:15px}
  .tick[data-lvl="2"]{--h:26px}
  .tick[data-lvl="3"]{--h:38px}
  .tick[data-lvl="4"]{--h:52px}
}
@media (max-width:390px){
  .op{padding:7px 11px;font-size:12.5px}
  .pulse-strip{height:50px;margin:5px 0 5px}
  .tick[data-lvl="3"]{--h:34px}
  .tick[data-lvl="4"]{--h:46px}
}
/* 320–374 px: 85 засечек по 2 px с зазором 2 px — это 338 px, а полосе доступно 292–332.
   Уже засечки и зазор, чуть уже поля — Дальний Восток не вылезает за край и codeAt() не промахивается */
@media (max-width:374px){
  .pulse{padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}
  .pulse-strip{gap:1px}
  .tick{min-width:1.5px}
}
@media (prefers-reduced-motion:reduce){
  .ru-reg,.tick::after{transition:none}
  .pulse-strip.first .tick::after,.ru-mark,.lb-card,.rp{animation:none}
}