/* ═══════════ Стили ревью ═══════════

   ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ <style> В СТРАНИЦЕ. В «Картокруте» страница
   самодостаточна, и это правильно: её открывают и через Flask, и как file://.
   Здесь другое ограничение — заголовок Content-Security-Policy со `style-src
   'self'`, поставленный ради чужого текста в комментариях. Под ним inline-стиль
   просто не применится. Файл рядом со страницей — цена этой защиты.

   ЯЗЫК ОФОРМЛЕНИЯ — ИЗ web/kartokrut.html И web/routes.html, один в один:
   те же токены (--hx*), тот же топбар 34 px, те же вкладки 26 px, те же чипы
   3 px, тот же шрифт Union Sans. Три инструмента одного проекта не имеют права
   выглядеть по-разному: человек, привыкший к панели «Картокрута», не должен
   заново искать, где здесь кнопка.

   СВЕТЛАЯ ТЕМА — БАЗОВАЯ, ТЁМНАЯ — ПЕРЕОПРЕДЕЛЕНИЕ. В «Картокруте» наоборот, и
   там это верно: он открыт весь день в тёмной студии. Здесь ссылку открывает
   заказчик с телефона на улице, а подложка по умолчанию светлая («беленькая»
   CARTO). Тёмная панель поверх светлой карты читается как ошибка вёрстки, и
   поэтому тема связана с подложкой (см. static/board.js).

   КАРТА ВО ВЕСЬ ЭКРАН. Панель не отнимает у карты место, а лежит поверх неё
   справа и убирается одной кнопкой. Разница видна на телефоне: карта, ужатая
   до половины экрана, перестаёт быть картой — по ней невозможно понять, где
   ты, и «поставить точку» превращается в угадывание.
*/

@font-face{
  font-family:'Union Sans';
  src:url('UnionSansV76VF.woff2') format('woff2-variations');
  font-weight:200 800;
  font-display:swap;
}

:root{
  --hxPanel:#F5F4F7; --hxPanel2:#E9E7EF; --hxHair:#DFDCE6;
  --hxTxt:#3B3844; --hxMut:#8A8599; --hxMut2:#6E6A7C; --hxInk:#191720;
  --hxBar:#EFEDF4; --hxAcc:#008EFF;
  --hxFloat:#FFFFFF; --hxFloat2:#ECEAF0;
  --hxFIco:#4A4656; --hxFInk:#191720; --hxFTxt:#3B3844; --hxFMut:#7B7689;
  --stOpen:#E5484D; --stWork:#F5A623; --stFixed:#2FA84F; --stRej:#8A8599;
  --hxShadow:0 4px 20px rgba(0,0,0,.14);
  --hxWarn:#8E2C22;
  /* Ширина панели ОДНИМ ЧИСЛОМ. Она стоит в трёх местах — у самой панели, у
     правой колонки Leaflet и у ручки — и разъехалась ровно так, как и должна
     была: панель стала шире под четвёртый язык, а зум и атрибуция остались под
     ней. Атрибуция под панелью — это ещё и нарушение условий тайлов. */
  --panelW:460px;
}
/* Тёмная тема объявлена ДВАЖДЫ, и это не дубль.
   Первый блок — «как в системе»: он работает, пока человек ничего не выбирал.
   Второй — «выбрал тёмную руками», и он обязан побеждать светлую систему.
   Условие `:root:not([data-theme="light"])` на первом нужно, чтобы выбранная
   руками СВЕТЛАЯ тема не перебивалась системной тёмной: без него переключатель
   работает в одну сторону, и это выглядит как «кнопка сломалась». */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --hxPanel:#2B2931; --hxPanel2:#27252E; --hxHair:#3A3743;
    --hxTxt:#B6B4BC; --hxMut:#716C85; --hxMut2:#9B97A8; --hxInk:#fff;
    --hxBar:#222127; --hxFloat:#222127; --hxFloat2:#3a3743;
    --hxFIco:#D9D9D9; --hxFInk:#fff; --hxFTxt:#C9C6D0; --hxFMut:#8D89A0;
    --stOpen:#FF6369; --stWork:#FFB454; --stFixed:#4CC66B; --stRej:#8B86A0;
    --hxShadow:0 4px 20px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --hxPanel:#2B2931; --hxPanel2:#27252E; --hxHair:#3A3743;
  --hxTxt:#B6B4BC; --hxMut:#716C85; --hxMut2:#9B97A8; --hxInk:#fff;
  --hxBar:#222127; --hxFloat:#222127; --hxFloat2:#3a3743;
  --hxFIco:#D9D9D9; --hxFInk:#fff; --hxFTxt:#C9C6D0; --hxFMut:#8D89A0;
  --stOpen:#FF6369; --stWork:#FFB454; --stFixed:#4CC66B; --stRej:#8B86A0;
  --hxShadow:0 4px 20px rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font:400 12px/1.4 'Union Sans','Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--hxPanel);color:var(--hxTxt);-webkit-font-smoothing:antialiased}
body.app{overflow:hidden}
h1,h2,h3,h4{font-weight:600;color:var(--hxInk)}
a{color:var(--hxAcc);text-decoration:none}
.hidden{display:none!important}
.sp{flex:1;min-width:0}

/* ── топбар 34, как в «Картокруте» ───────────────────────────────────────── */
#top{height:34px;flex:0 0 34px;background:var(--hxBar);display:flex;align-items:center;
  gap:2px;padding:0 8px;border-bottom:1px solid var(--hxHair);position:relative;z-index:60}
#top .logo{display:flex;align-items:center;gap:7px;margin-right:10px;font-weight:600;
  font-size:12px;color:var(--hxInk);white-space:nowrap;max-width:34vw;overflow:hidden;
  text-overflow:ellipsis}
#top .logo i{width:17px;height:17px;border-radius:50%;background:var(--hxAcc);display:block;
  flex:0 0 17px}
#top .who{font-size:11px;color:var(--hxMut);margin:0 6px;white-space:nowrap}
/* Значок источника данных. Точка слева — состояние связи; цвет её единственная
   работа, поэтому она и рисуется кружком, а не словом: слово в шапке 34 px
   пришлось бы сокращать до нечитаемого. Само слово живёт в подсказке. */
#top .src{height:22px;display:flex;align-items:center;gap:5px;padding:0 8px;
  border-radius:11px;border:1px solid var(--hxHair);background:transparent;
  font:inherit;font-size:11px;color:var(--hxMut);cursor:pointer;white-space:nowrap}
#top .src:hover{background:var(--hxPanel2);color:var(--hxInk)}
#top .src .n{color:var(--hxMut2)}
#top .src i{width:7px;height:7px;border-radius:50%;background:var(--hxMut);
  display:block;flex:0 0 7px}
#top .src.s-live i{background:var(--stFixed)}
#top .src.s-off i{background:var(--hxMut)}
#top .src.s-bad i{background:var(--stOpen)}
#top .src.s-unknown i{background:var(--stWork)}
#top .meta{font-size:11px;color:var(--hxMut);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-right:8px}
.tabs{display:flex;gap:2px;min-width:0;overflow-x:auto}
.tab{height:26px;padding:0 11px;border-radius:3px;display:flex;align-items:center;
  font-size:12px;font-weight:500;color:var(--hxTxt);cursor:pointer;user-select:none;
  background:none;border:0;font-family:inherit;white-space:nowrap}
.tab:hover{background:var(--hxPanel2);color:var(--hxInk)}
.tab.act{background:var(--hxAcc);color:#fff}
.tab .n{font-size:10px;margin-left:5px;opacity:.75;font-variant-numeric:tabular-nums}
.ico{height:26px;min-width:26px;padding:0 7px;border-radius:3px;display:flex;
  align-items:center;justify-content:center;color:var(--hxTxt);cursor:pointer;
  background:none;border:0;font-weight:500;font-size:11.5px;line-height:1;
  font-family:inherit;white-space:nowrap}
.ico:hover{background:var(--hxPanel2);color:var(--hxInk)}
.ico.on{background:var(--hxAcc);color:#fff}

button{font-family:inherit}
.btn{height:26px;padding:0 11px;border:1px solid var(--hxHair);border-radius:3px;
  background:var(--hxFloat);color:var(--hxTxt);font-weight:500;font-size:12px;
  line-height:24px;font-family:inherit;cursor:pointer;
  white-space:nowrap}
.btn:hover{background:var(--hxFloat2);color:var(--hxInk)}
.btn.pri{background:var(--hxAcc);border-color:var(--hxAcc);color:#fff}
.btn.pri:hover{filter:brightness(1.08)}
.btn.on{background:var(--hxAcc);border-color:var(--hxAcc);color:#fff}
.btn[disabled]{opacity:.4;cursor:default}
.btn.sm{height:22px;padding:0 8px;font-size:11px;line-height:20px}
.btn.warn{color:#E2685C}

/* ПОЧЕМУ ЗДЕСЬ НЕ СОКРАЩЁННОЕ `font:`. В сокращении `font` слово `inherit`
   допустимо только как ЕДИНСТВЕННОЕ значение: `font:400 12px/1.35 inherit`
   браузер считает ошибкой и выбрасывает объявление целиком. У поля ввода при
   этом остаётся шрифт браузера — моноширинный, — и замечание заказчика
   набиралось им, хотя вся остальная страница шла Union Sans. Ровно этот
   дефект и был здесь. */
input[type=text],input[type=password],input[type=search],textarea,select{
  width:100%;background:var(--hxPanel2);border:1px solid transparent;border-radius:3px;
  color:var(--hxTxt);font-weight:400;font-size:12px;line-height:1.35;
  font-family:inherit;padding:4px 7px;outline:none}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 1.5px var(--hxAcc)}
textarea{resize:vertical;min-height:58px}
input[dir=rtl]{text-align:right}
label{display:block;font-size:11px;color:var(--hxMut);margin-bottom:3px}

/* ── сцена: карта во весь экран, панель поверх неё ────────────────────────── */
.app{display:flex;flex-direction:column}
#stage{position:relative;flex:1;min-height:0;overflow:hidden}
/* `z-index:0` НЕ УКРАШЕНИЕ. Без него `#map` не создаёт своего контекста
   наложения, и внутренние слои Leaflet (маркеры — 600, контролы — 800) спорят
   за порядок напрямую с нашими плавающими панелями: значки объектов рисовались
   ПОВЕРХ карточки объекта, прямо по её заголовку. С контекстом вся карта
   целиком уходит под любую нашу панель с z-index ≥ 1. */
#map{position:absolute;inset:0;background:var(--hxPanel2);z-index:0}
#stage.adding #map{cursor:crosshair}

/* Панель лежит ПОВЕРХ карты, а не рядом: карта во весь экран — это требование,
   и панель, отъедающая треть ширины, его отменяет. Тень отделяет её от карты
   лучше рамки: на спутнике рамка теряется. */
/* 460 px, а не 340: во вкладке «Названия» в строке стоят ЧЕТЫРЕ поля (иврит,
   английский, арабский и русский), и на 340 в каждое влезало по десять знаков —
   названия обрывались ровно там, где их надо сравнивать. Четвёртое поле
   добавило ширины; больше 460 брать нельзя — панель лежит поверх карты, и на
   ноутбуке она начинает закрывать то, ради чего её открыли. */
#panel{position:absolute;right:0;top:0;bottom:0;width:var(--panelW);max-width:100%;
  background:var(--hxPanel);border-left:1px solid var(--hxHair);
  box-shadow:var(--hxShadow);display:flex;flex-direction:column;z-index:30;
  transition:transform .16s ease}
#panel.off{transform:translateX(100%)}
.phead{height:35px;flex:0 0 35px;display:flex;align-items:center;gap:8px;padding:0 10px;
  font-size:13px;font-weight:600;color:var(--hxInk);border-bottom:1px solid var(--hxHair)}
.pbody{flex:1;overflow-y:auto;min-height:0}
/* Управление картой (зум, выбор подложки, масштаб и АТРИБУЦИЯ) стоит справа, а
   панель лежит поверх карты — значит правый край карты у панели отнят. Сдвигаем
   всю правую колонку Leaflet на ширину панели. Это не косметика: под панелью
   оказывалась атрибуция подложек, а её показ — условие использования тайлов у
   CARTO, OpenStreetMap и Esri. */
#stage.pon .leaflet-right{right:var(--panelW)}
.leaflet-right{transition:right .16s ease}

/* Ручка панели — ПО ЦЕНТРУ по высоте, а не сверху: сверху справа стоят зум и
   переключатель подложек, и наверху она садилась ровно на кнопку «+». */
#panelToggle{position:absolute;right:var(--panelW);top:50%;margin-top:-13px;z-index:31;
  height:26px;width:22px;
  border:1px solid var(--hxHair);border-right:0;border-radius:3px 0 0 3px;
  background:var(--hxFloat);color:var(--hxFIco);cursor:pointer;font-weight:600;
  font-size:12px;line-height:1;font-family:inherit;
  box-shadow:var(--hxShadow);transition:right .16s ease}
#panel.off + #panelToggle,#panelToggle.off{right:0}

.sec{display:flex;align-items:baseline;gap:8px;padding:9px 10px 4px;font-size:11px;
  font-weight:600;color:var(--hxMut);letter-spacing:.02em;text-transform:uppercase}
.sec>span{flex:1 1 auto;min-width:0;text-align:right;font-weight:400;text-transform:none;
  letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row{display:flex;align-items:center;gap:8px}
.row.wrap{flex-wrap:wrap}
.pad{padding:8px 10px}
.hint{font-size:11.5px;color:var(--hxMut);padding:8px 10px;line-height:1.5}
.meta{font-size:11px;color:var(--hxMut)}
.ttl{font-weight:500;color:var(--hxInk);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.num{font-weight:600;font-size:12px;line-height:1;font-family:inherit;
  color:var(--hxInk);font-variant-numeric:tabular-nums}
.card{background:var(--hxFloat);border:1px solid var(--hxHair);border-radius:5px;
  margin:8px 10px}
.card>h3{padding:8px 10px;font-size:12px;border-bottom:1px solid var(--hxHair);
  display:flex;align-items:center;gap:8px}
.card .body{padding:10px}

/* поиск в панели — прилипший, потому что список под ним длинный */
/* `flex-wrap` обязателен: рядом с полем поиска стоят кнопки («выгрузить CSV»,
   «залить CSV», «все зоны»), и в одну строку они не влезают ни при какой ширине
   панели — последняя кнопка уезжала за край и была не нажимаема. */
.search{position:sticky;top:0;z-index:2;background:var(--hxPanel);padding:8px 10px;
  border-bottom:1px solid var(--hxHair);display:flex;gap:6px;align-items:center;
  flex-wrap:wrap}
.search input{flex:1 1 140px;min-width:0}

.chip{display:inline-block;height:18px;padding:0 7px;border-radius:9px;
  font-weight:600;font-size:10.5px;line-height:18px;font-family:inherit;color:#fff;
  white-space:nowrap;text-transform:uppercase;
  letter-spacing:.02em}
.chip.st-open{background:var(--stOpen)}
.chip.st-in_work{background:var(--stWork)}
.chip.st-fixed{background:var(--stFixed)}
.chip.st-rejected{background:var(--stRej)}
/* «Закрыто автором» — не то же, что «мы отклонили»: цвет решённого, не серый. */
.chip.st-closed{background:var(--stFixed)}
.chip.st-new{background:var(--hxAcc)}
.chip.st-accepted{background:var(--stFixed)}
.chip.st-applied{background:var(--hxMut2)}
.chip.st-added{background:var(--stFixed)}
.chip.st-removed{background:var(--stOpen)}
.chip.st-changed{background:var(--hxAcc)}
.chip.st-returned{background:var(--stWork)}
.chip.st-comment{background:var(--hxMut2)}
.chip.q{background:var(--hxPanel2);color:var(--hxMut2)}
/* Источник зоны. Цвет несёт смысл: синяя — пачка станций (перепишется при
   следующем «подтянуть»), серая — кадр, зелёная — рука владельца, которую
   пачка не тронет. */
.chip.zk-station{background:var(--hxAcc)}
.chip.zk-frame{background:var(--hxMut2)}
.chip.zk-custom{background:var(--stFixed)}

/* ── лист карты на проверку ──────────────────────────────────────────────
   Лежит ПОВЕРХ карты и ПОД панелью: панель остаётся рабочей, пока лист открыт —
   именно в ней пишут текст замечания, поставленного по листу.

   Фон непрозрачный: печатный лист прозрачен в местах, где ничего не нарисовано,
   и просвечивающая сквозь него тайловая карта читается как второй слой той же
   карты — то есть ровно как дефект, про который заказчик и пишет. */
#sheet{position:absolute;inset:0;z-index:25;display:flex;flex-direction:column;
  background:var(--hxPanel2)}
#stage.pon #sheet{right:var(--panelW)}
#sheet.hidden{display:none}
.sheethead{height:34px;flex:0 0 34px;display:flex;align-items:center;gap:8px;
  padding:0 8px;background:var(--hxBar);border-bottom:1px solid var(--hxHair);
  font-size:13px;color:var(--hxInk)}
.sheethead .sp{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.sheethead .meta{font-size:11px;color:var(--hxMut);white-space:nowrap}
.sheethead .x{width:22px;height:22px;border:0;background:none;color:var(--hxMut);
  cursor:pointer;font-size:15px;border-radius:3px;line-height:1}
.sheethead .x:hover{background:var(--hxPanel2);color:var(--hxInk)}
/* `overflow:hidden` и своя система координат: лист двигают трансформацией, а не
   прокруткой. Прокрутка не умеет масштаб вокруг указателя, а без него то, что
   разглядывают, уезжает из-под курсора на каждом щелчке колеса. */
.sheetstage{flex:1;position:relative;overflow:hidden;cursor:grab;min-height:0}
.sheetstage:active{cursor:grabbing}
#sheet.adding .sheetstage{cursor:crosshair}
.sheetcanvas{position:absolute;left:0;top:0;transform-origin:0 0;background:#fff;
  box-shadow:0 2px 18px rgba(0,0,0,.25)}
.sheetimg{display:block;user-select:none;-webkit-user-drag:none}
/* Точка на листе НЕ масштабируется вместе с ним: она не часть рисунка, а метка
   поверх. Иначе на мелком масштабе её было бы не поймать, а на крупном она
   закрыла бы то, про что написана. */
.sheetpin{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);
  color:#fff;font:600 11px/16px inherit;display:flex;align-items:center;
  justify-content:center;cursor:pointer;padding:0}
.sheetpin.sel{outline:2px solid var(--hxAcc);outline-offset:2px}
.sheetpin.new{background:var(--hxAcc)}

.mapcard{border-bottom:1px solid var(--hxHair);padding:8px 10px;cursor:pointer}
.mapcard:last-child{border-bottom:0}
.mapcard:hover{background:var(--hxPanel2)}
.mapcard.on{background:var(--hxPanel2);box-shadow:inset 2px 0 0 var(--hxAcc)}
.mapcard .row{display:flex;align-items:center;gap:7px}
.mapcard .ttl{font-size:12.5px;font-weight:600;color:var(--hxInk);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── плавающие панели поверх карты ───────────────────────────────────────── */
#tools{position:absolute;left:12px;top:12px;z-index:20;display:flex;flex-direction:column;
  gap:6px;align-items:flex-start}
#tools .btn{box-shadow:var(--hxShadow)}
/* Приглушение подложки. Отдельной плашкой, а не строкой кнопок: у него есть
   состояние (сколько процентов), и его надо ВИДЕТЬ, не наводя мышь. */
.dimbox{background:var(--hxFloat);border-radius:5px;box-shadow:var(--hxShadow);
  padding:7px 9px 8px;display:flex;flex-direction:column;gap:5px;width:186px}
.dimbox .row{display:flex;align-items:center;gap:6px;font-size:11px;
  color:var(--hxFMut);text-transform:uppercase;letter-spacing:.02em;font-weight:600}
.dimbox .row .n{color:var(--hxFInk);text-transform:none}
.dimbox .sp{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dimr{width:100%;margin:0;accent-color:var(--hxAcc);cursor:pointer}
.dimbox .tone{flex:1 1 0}
#ctx{position:absolute;left:12px;bottom:12px;z-index:20;background:var(--hxFloat);
  border-radius:5px;box-shadow:var(--hxShadow);max-width:min(70vw,620px);
  max-height:46vh;overflow-y:auto}
#ctx .chead{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:11px;
  color:var(--hxFMut);text-transform:uppercase;letter-spacing:.02em;font-weight:600;
  position:sticky;top:0;background:var(--hxFloat);cursor:pointer;user-select:none}
#ctx .chead:hover{color:var(--hxFInk)}
#ctx .cbody{padding:0 8px 8px;display:flex;flex-wrap:wrap;gap:4px}
/* РАДИУС 3 px, А НЕ ТАБЛЕТКА. Внутри чипа квадратный значок с квадратной
   плашкой, и круглая обёртка вокруг квадрата читается как чужая: у «Картокрута»
   и «Маршрутов» всё скруглено на 3 px — вкладки, кнопки, поля. Таблетка была
   единственным местом, выпадавшим из этого языка. */
.iconchip{display:flex;align-items:center;gap:5px;height:26px;padding:0 8px 0 4px;
  border-radius:3px;background:var(--hxPanel2);color:var(--hxFTxt);border:1px solid transparent;
  font-weight:500;font-size:11px;line-height:1;font-family:inherit;cursor:pointer;
  white-space:nowrap}
.iconchip:hover{border-color:var(--hxHair)}
.iconchip.on{background:var(--hxAcc);color:#fff;border-color:var(--hxAcc)}
.iconchip i{width:18px;height:18px;border-radius:2px;display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:rgba(128,128,128,.18);flex:0 0 18px}
.iconchip img{width:16px;height:16px;display:block}
.iconchip b{font-weight:600;font-variant-numeric:tabular-nums;opacity:.8}

#netnote{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:40;
  max-width:min(92vw,520px);background:var(--hxWarn);color:#fff;border-radius:5px;
  box-shadow:var(--hxShadow);padding:10px 12px;font-size:11.5px;line-height:1.5}
#netnote b{display:block;font-size:12.5px;margin-bottom:3px;color:#fff}
#netnote button{margin-top:7px;height:22px;border:1px solid rgba(255,255,255,.5);
  background:none;color:#fff;border-radius:3px;font-weight:500;font-size:11px;
  font-family:inherit;padding:0 9px;
  cursor:pointer}

/* Карточка объекта — СНИЗУ справа, а не сверху. Сверху уже занято: там баннер
   «подложка не грузится», зум и переключатель подложек, и карточка ложилась
   ровно на них. Снизу свободно: фильтр значков стоит слева, масштаб и атрибуция
   — ниже и правее. */
/* ПРАВЫЙ КРАЙ СЧИТАЕТСЯ ОТ ПАНЕЛИ, А НЕ ЧИСЛОМ. Было `right:412px` под панель
   в 400 — панель выросла до 460 под четвёртый язык, и карточка стала налезать
   на неё краем. Числа, повторяющие друг друга, расходятся; здесь их больше нет.

   Ширина 436 — не «покрасивее»: в карточке стоит тот же ряд из четырёх полей,
   что и в панели, и на 340 русское поле переносилось на свою строку. Ряд из
   четырёх полей по 96 с зазорами и отступами — это 419; 436 даёт запас. */
#objcard{position:absolute;right:calc(var(--panelW) + 12px);bottom:44px;z-index:35;
  width:436px;max-width:92vw;
  max-height:66vh;overflow-y:auto;
  background:var(--hxFloat);border:1px solid var(--hxHair);border-radius:6px;
  box-shadow:var(--hxShadow)}
#objcard.wide{right:12px}
#objcard .ohead{position:sticky;top:0;background:var(--hxFloat);z-index:1}
#objcard .ohead{display:flex;align-items:center;gap:8px;padding:9px 10px;
  border-bottom:1px solid var(--hxHair)}
#objcard .ohead b{font-size:13px;color:var(--hxFInk);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#objcard .obody{padding:9px 10px}
#objcard .x{width:22px;height:22px;border:0;background:none;color:var(--hxMut);
  cursor:pointer;font-size:15px;border-radius:3px;line-height:1}
#objcard .x:hover{background:var(--hxPanel2);color:var(--hxInk)}

#toast{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;
  max-width:min(92vw,520px)}
#toast .err{color:#fff;background:var(--stOpen);border-radius:4px;padding:7px 11px;
  font-size:12px;box-shadow:var(--hxShadow)}
#toast .ok{color:var(--hxFTxt);background:var(--hxFloat);border-radius:4px;
  padding:7px 11px;font-size:12px;box-shadow:var(--hxShadow)}

/* ── списки в панели ─────────────────────────────────────────────────────── */
ul.list{list-style:none}
ul.list>li{border-bottom:1px solid var(--hxHair);padding:7px 10px;cursor:pointer}
ul.list>li:last-child{border-bottom:0}
ul.list>li:hover{background:var(--hxPanel2)}
ul.list>li.sel{background:var(--hxPanel2);box-shadow:inset 2px 0 0 var(--hxAcc)}
ul.list>li.dim{opacity:.55}

/* нитка переписки */
.thread{max-height:40vh;overflow-y:auto;border-top:1px solid var(--hxHair)}
.ev{padding:7px 10px;border-bottom:1px solid var(--hxHair)}
.ev .head{display:flex;gap:6px;align-items:baseline;font-size:11px;color:var(--hxMut);
  flex-wrap:wrap}
.ev .head b{color:var(--hxInk);font-size:11.5px}
.ev .text{white-space:pre-wrap;word-break:break-word;margin-top:2px}
.ev.editor{background:var(--hxPanel2)}

/* ── названия: три языка В ОДНОЙ СТРОКЕ ──────────────────────────────────── */
/* РАНЬШЕ ЯЗЫКИ СТОЯЛИ СТОЛБИКОМ, и это было нечитаемо: ивритское название
   уезжало вправо (dir=rtl), английское стояло слева, и сравнить их глазом было
   невозможно — а сравнение и есть вся работа на этой вкладке. Теперь три поля
   рядом, одной карточкой, с подписью языка над полем. */
.nameobj{border-bottom:1px solid var(--hxHair);padding:8px 10px}
.nameobj:last-child{border-bottom:0}
.nameobj.dim{opacity:.6}
.nameobj>.row{margin-bottom:5px}
.nameobj .kicon{width:20px;height:20px;flex:0 0 20px;border-radius:3px;
  background:var(--hxPanel2);display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.nameobj .kicon img{width:17px;height:17px;display:block}
/* Плашка-КНОПКА: та же геометрия, что у неподвижной плашки, — иначе строка
   заголовка дёргалась бы на пиксель между улицей (плашки нет) и объектом. */
.kicon.pick{border:1px solid transparent;padding:0;cursor:pointer;font:inherit}
.kicon.pick:hover{border-color:var(--hxAcc)}
.kicon.pick.on{border-color:var(--hxAcc);background:var(--hxAcc)}
.kicon.pick .q{font-size:12px;font-weight:600;color:var(--hxMut)}
.kicon.pick.on .q{color:#fff}
.ihead{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.ihead .kicon{width:20px;height:20px;flex:0 0 20px;border-radius:3px;
  background:var(--hxPanel2);display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.ihead .kicon img{width:17px;height:17px;display:block}

/* Каталог значков сеткой. Сетка, а не список с подписями: выбирают КАРТИНКУ,
   и шестьдесят строк текста рядом с ней — это шестьдесят строк, которые надо
   прочитать вместо того, чтобы узнать значок в лицо. Имя живёт в подсказке. */
.iconpick{margin:5px 0 7px;padding:7px;border:1px solid var(--hxHair);border-radius:4px;
  background:var(--hxPanel2)}
.iconpick .hint{padding:0 0 6px}
.iconpick input[type=search]{width:100%;margin-bottom:6px}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:4px;
  max-height:186px;overflow-y:auto}
.ipick{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:3px;background:var(--hxFloat);
  cursor:pointer;padding:0}
.ipick:hover{border-color:var(--hxAcc)}
.ipick.on{border-color:var(--hxAcc);background:var(--hxAcc)}
.ipick img{width:20px;height:20px;display:block}
.iconwas{display:flex;align-items:center;gap:5px}
.iconwas img{width:16px;height:16px;display:block}
/* ЧЕТЫРЕ ПОЛЯ В СТРОКЕ переносятся на узком экране в две пары, а не сжимаются
   в четыре щёлки по десять знаков. `flex-basis: 46%` — это и есть «две в ряд»:
   на панели в 460 px они встают все четыре, на телефоне — попарно. */
.namerow{display:flex;gap:5px;align-items:flex-end;flex-wrap:wrap}
.namerow .f{flex:1 1 96px;min-width:0;display:flex;flex-direction:column;gap:2px}
.namerow .f>span{font-size:9.5px;color:var(--hxMut);text-transform:uppercase;
  letter-spacing:.03em;line-height:1}
.namerow .f>input{width:100%;height:24px;font-size:12px}
.namerow .f>input.ed{box-shadow:inset 0 0 0 1.5px var(--hxAcc)}
.nameact{display:flex;gap:6px;align-items:center;margin-top:6px}
.sugline{font-size:11px;color:var(--hxMut2);padding:3px 0;word-break:break-word;
  display:flex;gap:5px;align-items:baseline;flex-wrap:wrap}
.sugline b{color:var(--hxInk)}
/* Причина в строке предложения занимает ВСЮ ширину: она длиннее всего
   остального в строке, и втиснутая между автором и кнопками ломала бы их в
   столбик. `flex-basis: 100%` переносит её на свою строку, не заводя второго
   узла. */
.sugline .why{flex:0 0 100%;color:var(--hxInk);font-style:italic}
/* «на 158.6 м» НЕ ЛОМАЕТСЯ ПО БУКВАМ. У строки стоит `word-break:break-word` —
   он нужен длинным названиям, — но короткое число, зажатое между кнопками,
   он разбирал в столбик по одному знаку. Читать вертикальное «1 5 8 . 6» —
   это не «плотно», это нечитаемо. */
.sugline .keep{white-space:nowrap}

/* ── история одного объекта ──────────────────────────────────────────────
   Свёрнутая — одна строка: карточек в списке семьсот шестьдесят три, и
   развёрнутые истории превратили бы список в ленту. Развёрнутая отделена
   линией слева: она отвечает на другой вопрос, чем всё остальное в карточке
   («что было»), и должна читаться как приписка, а не как ещё одно поле. */
/* Складка коротких имён. Поля те же, что у полных, только бледнее: они
   ДОПОЛНЕНИЕ к названию, а не второй его комплект, и одинаковый вес двух
   рядов заставлял бы каждый раз читать подписи языков, чтобы понять, где
   какой. */
.shorthead{margin-top:6px;color:var(--hxMut2)}
.shortrow{margin-top:4px;opacity:.85}
.shortrow .f>input{font-size:11px}
.whyrow{margin-top:6px}
.whyrow>input{width:100%;height:24px;font-size:12px}
.whyrow.hidden{display:none}
.histhead{margin-top:6px;color:var(--hxMut2)}
.histbox{margin:4px 0 2px;padding-left:9px;border-left:2px solid var(--hxHair)}
.histrow{font-size:11px;color:var(--hxMut2);padding:4px 0;
  border-bottom:1px solid var(--hxHair)}
.histrow:last-child{border-bottom:0}
.histrow .row{gap:5px;align-items:baseline;flex-wrap:wrap}
.histrow b{color:var(--hxInk)}
.histrow .why{color:var(--hxInk);padding:2px 0 0;font-style:italic}

/* ── зоны ────────────────────────────────────────────────────────────────── */
.zone{border-bottom:1px solid var(--hxHair);padding:8px 10px}
.zone:last-child{border-bottom:0}
.zone.on{background:var(--hxPanel2);box-shadow:inset 2px 0 0 var(--hxAcc)}
.zone .row{margin-bottom:4px}
.zone .sw{width:26px;height:16px;border-radius:8px;background:var(--hxHair);position:relative;
  flex:0 0 26px;cursor:pointer;border:0;padding:0}
.zone .sw:after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;
  border-radius:50%;background:var(--hxFloat);transition:left .12s ease}
.zone.on .sw{background:var(--hxAcc)}
.zone.on .sw:after{left:12px}
.zone input[type=range]{width:100%}

/* ── история ─────────────────────────────────────────────────────────────── */
.hrow{display:flex;gap:8px;align-items:baseline;padding:6px 10px;font-size:11.5px;
  border-bottom:1px solid var(--hxHair);cursor:pointer}
.hrow:hover{background:var(--hxPanel2)}
.hrow .t{color:var(--hxMut);font-variant-numeric:tabular-nums;font-size:10.5px;
  flex:0 0 auto}
.hrow .w{flex:1;min-width:0;word-break:break-word}
.hrow .w b{color:var(--hxInk)}
.hrow.dim{opacity:.6}

/* ── подписи и значки на карте ───────────────────────────────────────────── */
/* Номер внутри точки — постоянная подпись Leaflet, а не иконка-картинка:
   circleMarker рисуется как SVG, файлов не требует и одинаково виден в обеих
   темах. Оформление подписи целиком снимаем: рамка и фон превратили бы номер в
   плашку поверх точки. !important здесь по делу — правила .leaflet-tooltip ниже
   тоже с !important, и без него они выиграли бы по порядку. */
.pinNum{background:none!important;border:0!important;box-shadow:none!important;
  padding:0!important;font:600 11px/1 'Union Sans',sans-serif!important;color:#fff!important;
  pointer-events:none!important;text-shadow:0 1px 2px rgba(0,0,0,.65)}
.pinNum:before{display:none!important}
/* Подпись улицы. Она читается ПОВЕРХ карты, поэтому обводка, а не плашка:
   плашки на каждой улице сливаются в белый ковёр и прячут саму карту. */
.stName{background:none!important;border:0!important;box-shadow:none!important;
  padding:0!important;color:var(--hxInk)!important;
  font:600 11px/1.15 'Union Sans',sans-serif!important;white-space:nowrap;
  text-shadow:0 0 3px var(--hxFloat),0 0 3px var(--hxFloat),0 0 3px var(--hxFloat)}
.stName:before{display:none!important}
.objIcon{background:none!important;border:0!important}
/* Значок объекта на карте. Размер приходит РАЗМЕТКОЙ (три размера, см.
   board.js), а не задаётся здесь: он свойство объекта из банка города, а не
   оформления. CSS отвечает только за то, как значок и подпись стоят рядом. */
.objIcon{background:none;border:0}
.objmark{position:relative;display:block;width:100%;height:100%}
.objmark img{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
/* Подпись НЕ РАСТЯГИВАЕТ значок: она вылезает из его коробки наружу, иначе
   Leaflet считал бы якорь по ширине текста и значок уезжал бы от своего места.

   ПОЧЕМУ ЗДЕСЬ БЫЛ nowrap И ПОЧЕМУ ЕГО БОЛЬШЕ НЕТ. Коробка значка — 22
   пикселя, и абсолютно позиционированная подпись переносилась ПО НЕЙ: «Yakirei
   Yerushalayim Yeshiva» вставало столбиком по слову. Запрет переноса это чинил,
   но заодно запрещал перенос вообще, и длинное имя уезжало через полкарты.
   Настоящая причина была не в переносе, а в ОТСУТСТВИИ СВОЕЙ ШИРИНЫ: коробка
   брала её у значка. `width:max-content` даёт короткому имени его собственную
   ширину, `max-width` переносит длинное там, где мы решили, а не там, где
   кончился значок.

   `top` остаётся: без него подпись начиналась от ВЕРХА коробки и росла вниз, и
   соседние подписи разной длины расползались лесенкой. */
.objmark .oname{position:absolute;left:100%;margin-left:4px;top:50%;
  transform:translateY(-50%);
  white-space:normal;width:max-content;max-width:112px;line-height:1.2;
  font-size:11px;font-weight:600;color:var(--hxInk);
  text-shadow:0 0 3px var(--hxFloat),0 0 3px var(--hxFloat),0 0 3px var(--hxFloat)}
.objmark.s-small .oname{font-size:10px;font-weight:500}

/* ЧЕТЫРЕ УГЛА — РЕШЕНИЕ КАРТОГРАФА, А НЕ НАШЕ. `poi.label_place` в подоснове
   говорит, с какой стороны от значка стоит подпись: он уже развёл их так, чтобы
   они не налезали на дороги и друг на друга. Первая буква — низ или верх,
   вторая — сторона; при `T` подпись стоит НАД значком, поэтому вертикальный
   сдвиг снимается и коробка цепляется нижним краем за середину значка. */
.objmark .oname.p-br{left:100%;right:auto;margin-left:4px;margin-right:0;
  top:50%;bottom:auto;transform:none;text-align:left}
.objmark .oname.p-bl{right:100%;left:auto;margin-right:4px;margin-left:0;
  top:50%;bottom:auto;transform:none;text-align:right}
.objmark .oname.p-tr{left:100%;right:auto;margin-left:4px;margin-right:0;
  bottom:50%;top:auto;transform:none;text-align:left}
.objmark .oname.p-tl{right:100%;left:auto;margin-right:4px;margin-left:0;
  bottom:50%;top:auto;transform:none;text-align:right}

/* ── выбор размера значка ────────────────────────────────────────────────
   Три ступени показаны и словом, и КРУЖКОМ соответствующего размера: «half» и
   «tiny» словами различимы плохо, а разница между ними — это ровно разница
   двух точек на экране. Кружок отвечает на вопрос без чтения. */
.sizerow{gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.szpick{display:inline-flex;align-items:center;gap:5px}
.szdot{display:inline-block;border-radius:2px;background:currentColor;flex:none}
.szdot.sz-main{width:11px;height:11px}
.szdot.sz-small{width:7px;height:7px}
.szdot.sz-tiny{width:4px;height:4px}

/* ── улица линией, площадь точкой ─────────────────────────────────────────
   Подпись улицы лежит ВДОЛЬ её оси: поворот считает board.js по самому длинному
   отрезку на экране. Поворот стоит на ВНУТРЕННЕМ узле, а не на самой иконке
   Leaflet: её `transform` занят — им она ставится на место. */
.stLabel{background:none;border:0;width:0!important;height:0!important}
.stwrap{position:absolute;left:0;top:0;display:block}
/* Сдвиг на половину коробки и поворот — ОДНИМ `transform`, который ставит
   board.js. Двумя свойствами (`translate` + `transform`) их разводить нельзя:
   порядок применения разный в разных браузерах, и подпись уезжает от своей
   точки на пол-надписи. */
.stname{position:absolute;left:0;top:0;transform-origin:center;display:block;
  font-size:11px;font-weight:600;line-height:1;color:var(--hxInk);
  white-space:nowrap;pointer-events:auto;cursor:pointer;
  text-shadow:0 0 3px var(--hxFloat),0 0 3px var(--hxFloat),
              0 0 3px var(--hxFloat),0 0 3px var(--hxFloat)}
/* Подпись площади СБОКУ от её точки: `transform-origin` у неё левый край, а не
   центр, иначе сдвиг вправо считался бы от середины надписи и длинное имя
   уползало бы обратно на точку. */
.stname.aside{transform-origin:left center}
/* ПЕРЕНОС — ТОЛЬКО У ГОРИЗОНТАЛЬНЫХ ПОДПИСЕЙ: район, парк, площадь. Улица
   пишется ВДОЛЬ своей оси, и вторая строка у повёрнутой надписи легла бы
   поперёк квартала — там перенос не нужен, там имя укорачивается или уходит
   (см. `labelFor`). Ширина в 132 пикселя выбрана по длине настоящих имён:
   «Ramat Denya» помещается в строку, «Kiryat HaYovel» переносится надвое. */
.stname.wrap{white-space:normal;width:max-content;max-width:132px;
  line-height:1.15;text-align:center}
.stname.wrap.aside{text-align:left}

/* Атрибуция подложек. Её НЕЛЬЗЯ прятать: показывать её — условие использования
   тайлов у CARTO, OpenStreetMap и Esri. Поэтому здесь только контраст под тему,
   и ни одного display:none. */
.leaflet-control-attribution{background:var(--hxFloat)!important;color:var(--hxMut)!important;
  font-size:10.5px!important;padding:1px 6px!important}
.leaflet-control-attribution a{color:var(--hxAcc)!important}
/* Кнопка языка названий у зума. Ширина как у «+» и «−»: три кнопки в столбик
   читаются как один орган управления, а разноширокие — как случайный набор. */
.langctl button{display:block;width:30px;height:30px;padding:0;border:0;
  background:transparent;color:var(--hxTxt);font:600 11px/30px var(--hxFont,inherit);
  letter-spacing:.03em;cursor:pointer;text-align:center}
.langctl button:hover{background:var(--hxHover,rgba(0,0,0,.06))}
.leaflet-control-layers,.leaflet-bar{background:var(--hxFloat)!important;
  border:1px solid var(--hxHair)!important;box-shadow:var(--hxShadow)!important}
.leaflet-control-layers-expanded{color:var(--hxTxt)!important;padding:8px 10px!important}
.leaflet-control-layers label{color:var(--hxTxt)!important;text-transform:none;
  font-size:12px;margin:0}
.leaflet-bar a{background:var(--hxFloat)!important;color:var(--hxTxt)!important;
  border-bottom-color:var(--hxHair)!important}
.leaflet-bar a:hover{background:var(--hxFloat2)!important;color:var(--hxInk)!important}
.leaflet-tooltip{background:var(--hxFloat)!important;color:var(--hxTxt)!important;
  border:1px solid var(--hxHair)!important;box-shadow:var(--hxShadow)!important}
.leaflet-tooltip:before{border-top-color:var(--hxHair)!important}
.leaflet-container{font-family:'Union Sans','Inter',-apple-system,sans-serif}

/* ── вход и список проектов: обычные страницы, без полноэкранной карты ───── */
.login{max-width:340px;margin:12vh auto;padding:18px}
.login .card{padding:16px;margin:0}
.login h1{font-size:16px;margin-bottom:4px}
.login p.sub{font-size:12px;color:var(--hxMut);margin-bottom:14px;line-height:1.5}
.login .fld{margin-bottom:10px}
.login .row{margin-top:4px}
#toast.plain{position:static;transform:none;max-width:none;margin-bottom:10px}
.err{color:#fff;background:var(--stOpen);border-radius:3px;padding:6px 8px;font-size:12px}
.ok{color:var(--hxMut);font-size:12px}
.projects{max-width:820px;margin:16px auto;padding:0 12px}
.projects .card{margin:0 0 10px}
.projects .card .body{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── узкий экран: панель становится нижним листом ────────────────────────── */
@media (max-width:760px){
  /* Шапка переносится на две строки. В одну она на телефоне не влезает никак:
     название проекта, пять вкладок, счётчики и пять кнопок — и первым из неё
     выдавливались ВКЛАДКИ, то есть единственный способ перейти на «названия».
     Счётчики и подпись «редактор: Имя» на телефоне прячем: место они занимают,
     а сказать могут ровно то же, что вкладки со своими числами. */
  #top{height:auto;flex:0 0 auto;flex-wrap:wrap;padding:4px 8px;gap:4px}
  #top .logo{max-width:60vw;margin-right:4px}
  #top .who{display:none}
  .tabs{order:9;width:100%;padding-top:2px}
  /* На узком экране панель — нижний лист, и отнимает она НИЗ, а не право.
     Значит и Leaflet двигаем вверх, а не влево. */
  #stage.pon .leaflet-right{right:0}
  #stage.pon .leaflet-bottom{bottom:52%}
  #panel{left:0;right:0;top:auto;bottom:0;width:auto;height:52%;border-left:0;
    border-top:1px solid var(--hxHair)}
  #panel.off{transform:translateY(100%)}
  #panelToggle{right:10px;top:auto;margin-top:0;bottom:calc(52% + 8px);border-radius:3px;
    border-right:1px solid var(--hxHair);transition:bottom .16s ease}
  #panel.off + #panelToggle,#panelToggle.off{right:10px;bottom:10px}
  #objcard{right:10px;left:10px;width:auto;bottom:calc(52% + 8px);max-height:34vh}
  #ctx{max-width:calc(100vw - 24px);max-height:34vh}
  #top .meta{display:none}
  /* На телефоне из значка источника остаётся только точка состояния: ревизия и
     время не влезают в шапку рядом с вкладками, а цвет — влезает и отвечает на
     главный вопрос «свежее ли то, что я вижу». */
  #top .src span{display:none}
  #top .src{padding:0 6px}
}

/* ── вопрос конкретному человеку ──────────────────────────────────────────
   Вопрос выделен ОДНИМ цветом и в трёх местах сразу: счётчик в шапке, плашка в
   списке, строка в карточке. Один цвет на всё — чтобы «вам вопрос» узнавался
   не читая, как узнаётся красная точка замечания. */
.qbtn{border:0;background:none;font:inherit;color:var(--hxInk);cursor:pointer;
  padding:0 4px;border-radius:5px}
/* Токены берём ТОЛЬКО существующие — или с запасным значением, как строчкой
   выше у переключателя языка. Несуществующая переменная в CSS не ругается и не
   подсвечивается: свойство выбрасывается целиком и молча, ровно как в своё
   время сокращение `font:`. Здесь это стоило бы кнопки без наведения. */
.qbtn:hover{background:var(--hxFloat2,rgba(0,0,0,.06))}
.chip.q{background:#7A3BE0;color:#fff;border-color:#7A3BE0}
li.q{box-shadow:inset 3px 0 0 #7A3BE0}
.meta.q{color:#7A3BE0;font-weight:600}
.askrow{display:flex;align-items:center;gap:6px;margin-top:6px}
.askrow select.ask{font:inherit;font-size:12px;padding:2px 4px;border-radius:5px;
  border:1px solid var(--hxHair,#DFDCE6);background:var(--hxFloat);color:var(--hxInk);
  max-width:210px}

/* ── форма «завести объект» ───────────────────────────────────────────────
   Четыре поля имён СЕТКОЙ, а не столбиком: иврит и арабский пишутся справа
   налево, и в столбик подписи разъезжаются. Сетка держит подпись слева от
   поля, а поле — одной ширины на всех языках. */
.mkobj{border-top:1px solid var(--hxHair,#DFDCE6);margin-top:8px;padding-top:8px}
.nmgrid{display:grid;gap:4px;margin-top:6px}
.nmrow{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:6px}
.nmrow input{font:inherit;font-size:12px;padding:3px 5px;border-radius:5px;
  border:1px solid var(--hxHair,#DFDCE6);background:var(--hxFloat);color:var(--hxInk)}

/* ── перенос объекта ──────────────────────────────────────────────────────
   Курсор-перекрестье над картой — единственный признак, по которому видно,
   что следующий щелчок значит не «поставить замечание», а «вот сюда». Тот же
   приём, что у режима замечаний (`.adding`), и намеренно тот же: два разных
   режима щелчка должны выглядеть одинаково узнаваемо. */
#stage.moving .leaflet-container{cursor:crosshair}
.moverow{border-top:1px solid var(--hxHair,#DFDCE6);margin-top:8px;padding-top:8px}
.moverow input{width:100%;font:inherit;font-size:12px;padding:3px 5px;margin-top:4px;
  border-radius:5px;border:1px solid var(--hxHair,#DFDCE6);
  background:var(--hxFloat);color:var(--hxInk)}
/* Стрелка от старого места к новому и кружок будущей точки. Пунктиром: это
   ещё не факт карты, а предложение. */
.movehint{stroke:#7A3BE0;stroke-width:2;stroke-dasharray:4 3;fill:none}