/* City Live — карта на весь экран + панели как gdebenz.ru */

.city-live-page{
  --cl-ok:#16a34a;
  --cl-queue:#2563eb;
  --cl-warn:#d97706;
  --cl-bad:#dc2626;
  --cl-muted:#94a3b8;
  --cl-panel:#fff;
  --cl-shadow:0 12px 40px rgba(15,23,42,.14);
  font-family:var(--site-font, var(--site-header-font, "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif));
  margin-left:calc(-1 * (var(--gutter, 16px) + var(--safe-area-inset-x, 0px)));
  margin-right:calc(-1 * (var(--gutter, 16px) + var(--safe-area-inset-x, 0px)));
  width:calc(100% + 2 * (var(--gutter, 16px) + var(--safe-area-inset-x, 0px)));
  max-width:none;
  padding-bottom:0;
}

.city-live-app{
  position:relative;
  height:clamp(540px, calc(100vh - 168px), 920px);
  min-height:540px;
  overflow:hidden;
  border-radius:0;
  background:#e2e8f0;
}

.city-live-map-full{
  position:absolute;
  inset:0;
  z-index:1;
}

.city-live-map-full .ymaps-2-1-79-map,
.city-live-map-full [class*="ymaps-2-1"][class*="-map"]{
  width:100% !important;
  height:100% !important;
}

.city-live-map-legend{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:450;
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  font-size:11px;
  color:#475569;
  box-shadow:0 2px 10px rgba(15,23,42,.1);
  pointer-events:none;
}

.city-live-map-legend .dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:4px;
}

.dot.is-ok{ background:var(--cl-ok); }
.dot.is-queue{ background:var(--cl-queue); }
.dot.is-warn{ background:var(--cl-warn); }
.dot.is-bad{ background:var(--cl-bad); }
.dot.is-muted{ background:var(--cl-muted); }

.city-live-toast{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:800;
  max-width:min(520px, calc(100% - 24px));
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;
  box-shadow:var(--cl-shadow);
}

.city-live-toast--ok{ background:#ecfdf5; color:#166534; border:1px solid #bbf7d0; }
.city-live-toast--err{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

.city-live-dock{
  position:absolute;
  top:12px;
  left:12px;
  bottom:12px;
  z-index:500;
  display:flex;
  gap:10px;
  align-items:stretch;
  max-width:calc(100% - 24px);
  pointer-events:none;
}

.city-live-panel{
  pointer-events:auto;
  display:flex;
  flex-direction:column;
  width:min(360px, calc(100vw - 24px));
  max-height:100%;
  background:var(--cl-panel);
  border-radius:18px;
  box-shadow:var(--cl-shadow);
  border:1px solid rgba(148,163,184,.22);
  overflow:hidden;
}

.city-live-panel--detail{
  width:min(340px, calc(100vw - 24px));
}

.city-live-panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(148,163,184,.16);
  flex-shrink:0;
}

.city-live-panel__title{
  margin:0;
  font-size:18px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
}

.city-live-panel__sub{
  margin:4px 0 0;
  font-size:12px;
  color:#64748b;
}

.city-live-panel__actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.city-live-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid rgba(148,163,184,.3);
  border-radius:12px;
  background:#f8fafc;
  font-size:16px;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
}

.city-live-icon-btn--primary{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

.city-live-filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 14px;
  border-bottom:1px solid rgba(148,163,184,.12);
  flex-shrink:0;
}

.city-live-chip{
  border:1px solid rgba(148,163,184,.35);
  background:#f8fafc;
  color:#334155;
  border-radius:999px;
  padding:6px 11px;
  font-size:11px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
}

.city-live-chip.is-active{
  background:#dbeafe;
  border-color:#93c5fd;
  color:#1d4ed8;
}

.city-live-panel__list{
  flex:1;
  overflow:auto;
  padding:8px;
  -webkit-overflow-scrolling:touch;
}

.city-live-panel__list-label{
  padding:4px 8px 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#94a3b8;
}

.city-live-item{
  display:flex;
  gap:10px;
  width:100%;
  text-align:left;
  border:1px solid transparent;
  border-radius:14px;
  background:#fff;
  padding:10px;
  margin-bottom:6px;
  cursor:pointer;
  font-family:inherit;
  color:inherit;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.city-live-item:hover{
  background:#f8fafc;
}

.city-live-item.is-active{
  border-color:#93c5fd;
  background:#eff6ff;
  box-shadow:0 0 0 1px rgba(37,99,235,.12);
}

.city-live-item.is-hidden{ display:none; }
.city-live-item.is-stale{ opacity:.75; }

.city-live-item__icon{
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#f1f5f9;
  font-size:18px;
}

.city-live-item__main{
  flex:1;
  min-width:0;
}

.city-live-item__top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-bottom:2px;
}

.city-live-item__badge{
  display:inline-flex;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  background:#f1f5f9;
  color:#64748b;
}

.city-live-item__badge.is-ok{ background:#dcfce7; color:#166534; }
.city-live-item__badge.is-queue{ background:#dbeafe; color:#1d4ed8; }
.city-live-item__badge.is-warn{ background:#fef3c7; color:#92400e; }
.city-live-item__badge.is-bad{ background:#fee2e2; color:#991b1b; }

.city-live-item__name{
  font-size:14px;
  font-weight:700;
  color:#0f172a;
}

.city-live-item__addr{
  display:block;
  font-size:11px;
  color:#64748b;
  margin-bottom:4px;
}

.city-live-item__meta{
  display:block;
  font-size:11px;
  color:#94a3b8;
}

.city-live-item__fuels{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:6px;
}

.city-live-pill{
  font-size:10px;
  font-weight:700;
  padding:3px 7px;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
}

.city-live-pill.is-ok{ background:#dcfce7; color:#166534; }
.city-live-pill.is-queue{ background:#dbeafe; color:#1d4ed8; }
.city-live-pill.is-warn{ background:#fef3c7; color:#92400e; }
.city-live-pill.is-bad{ background:#fee2e2; color:#991b1b; }

.city-live-about--compact{
  flex-shrink:0;
  margin:0;
  padding:8px 14px 12px;
  font-size:12px;
  color:#64748b;
  border-top:1px solid rgba(148,163,184,.12);
}

.city-live-about--compact summary{
  cursor:pointer;
  font-weight:600;
}

.city-live-about--compact ul{
  margin:8px 0 0;
  padding-left:18px;
}

.city-live-empty{
  padding:20px;
  text-align:center;
  color:#64748b;
}

/* Detail panel */
.city-live-detail__head{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(148,163,184,.16);
  flex-shrink:0;
}

.city-live-detail__head-main{ min-width:0; }

.city-live-detail__badge{
  display:inline-flex;
  margin-bottom:6px;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:#f1f5f9;
  color:#64748b;
}

.city-live-detail__badge.is-ok{ background:#dcfce7; color:#166534; }
.city-live-detail__badge.is-queue{ background:#dbeafe; color:#1d4ed8; }
.city-live-detail__badge.is-warn{ background:#fef3c7; color:#92400e; }
.city-live-detail__badge.is-bad{ background:#fee2e2; color:#991b1b; }

.city-live-detail__title{
  margin:0;
  font-size:17px;
  font-weight:800;
  line-height:1.2;
}

.city-live-detail__addr{
  margin:4px 0 0;
  font-size:12px;
  color:#64748b;
}

.city-live-panel--detail{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.city-live-detail__status-card{
  margin:12px 14px;
  padding:16px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.2);
  text-align:center;
}

.city-live-detail__status-icon{
  font-size:36px;
  line-height:1;
  margin-bottom:8px;
}

.city-live-detail__status-text{
  font-size:20px;
  font-weight:800;
  line-height:1.2;
}

.city-live-detail__updated{
  margin-top:6px;
  font-size:12px;
  color:#64748b;
}

.city-live-detail__confidence{
  margin:0 14px 12px;
}

.city-live-detail__confidence-label{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#64748b;
  margin-bottom:6px;
}

.city-live-detail__confidence-bar{
  height:8px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}

.city-live-detail__confidence-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#16a34a);
  width:0;
  transition:width .25s ease;
}

.city-live-detail__fuels{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0 14px 12px;
}

.city-live-detail__fuel{
  padding:10px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.18);
}

.city-live-detail__fuel-label{
  font-size:11px;
  color:#64748b;
}

.city-live-detail__fuel-value{
  font-size:14px;
  font-weight:700;
  margin-top:2px;
}

.city-live-detail__extras{
  margin:0 14px 10px;
  font-size:13px;
  color:#475569;
}

.city-live-detail__note{
  margin:0 14px 12px;
  padding:10px 12px;
  border-radius:12px;
  background:#fffbeb;
  font-size:13px;
  color:#78350f;
}

.city-live-detail__votes{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 14px 12px;
  padding:12px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:14px;
  background:#f8fafc;
}
.city-live-detail__votes-title{
  margin:0;
  font-size:13px;
  font-weight:700;
  color:#334155;
}
.city-live-detail__votes-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.city-live-detail__votes-row form{
  margin:0;
  min-width:0;
}
.city-live-detail__votes-row .city-live-vote-btn{
  width:100%;
  min-width:0;
}

.city-live-vote-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid rgba(148,163,184,.3);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-align:center;
  line-height:1.25;
}

.city-live-vote-btn--confirm{
  border-color:#86efac;
  background:#f0fdf4;
  color:#166534;
}
.city-live-vote-btn--dispute{
  border-color:#fecaca;
  background:#fff;
  color:#991b1b;
}

.city-live-detail__actions{
  padding:0 14px 14px;
  margin-top:auto;
}

.city-live-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  border:0;
  border-radius:12px;
  padding:13px 16px;
  font:inherit;
  font-size:15px;
  font-weight:700;
  color:#fff;
  cursor:pointer;
  background:#2563eb;
}

.city-live-mobile-bar{
  display:none;
}

/* Map markers */
.city-live-marker-wrap{ background:transparent; border:0; }

.city-live-marker{
  display:block;
  width:18px;
  height:18px;
  border-radius:50%;
  border:3px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  transition:transform .15s ease;
}

.city-live-marker.is-active{
  transform:scale(1.35);
  box-shadow:0 0 0 4px rgba(37,99,235,.35), 0 2px 8px rgba(0,0,0,.35);
}

.city-live-marker--ferry{
  width:auto;
  height:auto;
  min-width:30px;
  min-height:30px;
  padding:4px 6px;
  border-radius:10px;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Modal (report) */
.city-live-modal[hidden]{ display:none !important; }

.city-live-modal{
  position:fixed;
  inset:0;
  z-index:12000;
  font-family:inherit;
}

.city-live-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(2px);
}

.city-live-modal__sheet{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:20px 20px 0 0;
  padding:8px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(15,23,42,.18);
}

.city-live-modal__handle{
  width:40px;
  height:4px;
  margin:0 auto 10px;
  border-radius:999px;
  background:rgba(148,163,184,.5);
}

.city-live-modal__close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border:0;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.city-live-modal__hero{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:16px;
  padding-right:36px;
}

.city-live-modal__hero-icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  border-radius:12px;
  background:#eff6ff;
}

.city-live-modal__title{
  margin:0;
  font-size:20px;
  font-weight:800;
}

.city-live-modal__sub,
.city-live-modal__fine{
  margin:4px 0 0;
  font-size:13px;
  color:#64748b;
}

.city-live-modal__form{ display:grid; gap:12px; }

.city-live-modal__section{
  padding:14px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.2);
}

.city-live-field-label{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  font-weight:700;
  color:#334155;
}

.city-live-select-wrap{ position:relative; }

.city-live-select-wrap::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:7px;
  height:7px;
  border-right:2px solid #64748b;
  border-bottom:2px solid #64748b;
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}

.city-live-select,
.city-live-input,
.city-live-textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(148,163,184,.35);
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font:inherit;
  font-size:15px;
}

.city-live-select{
  appearance:none;
  padding:12px 36px 12px 14px;
  font-weight:600;
}

.city-live-input{ padding:11px 14px; }

.city-live-textarea{
  padding:11px 14px;
  resize:vertical;
  min-height:72px;
}

.city-live-quick__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.city-live-quick__btn{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:76px;
  border:2px solid rgba(148,163,184,.28);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  font-family:inherit;
}

.city-live-quick__btn input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.city-live-quick__btn:has(input:checked){
  border-color:#2563eb;
  background:#eff6ff;
}

.city-live-fuel-picks{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.city-live-fuel-toggle input{
  position:absolute;
  opacity:0;
}

.city-live-fuel-toggle span{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  border:2px solid rgba(148,163,184,.28);
  font-size:13px;
  font-weight:700;
}

.city-live-fuel-toggle:has(input:checked) span{
  border-color:#2563eb;
  background:#2563eb;
  color:#fff;
}

.city-live-modal__footer{ padding-top:4px; }

.city-live-modal__fine{
  margin-top:10px;
  text-align:center;
  font-size:11px;
}

@media (min-width:1100px){
  .city-live-app{
    height:clamp(600px, calc(100vh - 150px), 960px);
  }

  .city-live-dock{
    left:16px;
    top:16px;
    bottom:16px;
  }
}

@media (max-width:900px){
  .city-live-app{
    height:calc(100vh - 130px);
    min-height:480px;
  }

  .city-live-dock{
    top:auto;
    left:0;
    right:0;
    bottom:0;
    max-width:100%;
    flex-direction:column;
    gap:0;
    pointer-events:none;
  }

  .city-live-panel{
    width:100%;
    max-height:52vh;
    border-radius:18px 18px 0 0;
    box-shadow:0 -8px 30px rgba(15,23,42,.15);
    transform:translateY(110%);
    transition:transform .28s cubic-bezier(.22,1,.36,1);
    pointer-events:auto;
  }

  .city-live-panel--list.is-mobile-open{
    transform:translateY(0);
  }

  .city-live-panel--detail[hidden]{
    display:none !important;
  }

  .city-live-panel--detail{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:600;
    max-height:70vh;
    transform:translateY(110%);
  }

  .city-live-panel--detail:not([hidden]){
    transform:translateY(0);
  }

  .city-live-mobile-bar{
    display:flex;
    position:absolute;
    left:50%;
    bottom:12px;
    transform:translateX(-50%);
    z-index:550;
    gap:4px;
    padding:4px;
    border-radius:999px;
    background:rgba(255,255,255,.95);
    box-shadow:0 4px 20px rgba(15,23,42,.15);
    pointer-events:auto;
  }

  .city-live-mobile-bar__btn{
    border:0;
    background:transparent;
    padding:8px 14px;
    border-radius:999px;
    font:inherit;
    font-size:13px;
    font-weight:700;
    color:#64748b;
    cursor:pointer;
  }

  .city-live-mobile-bar__btn.is-active{
    background:#2563eb;
    color:#fff;
  }

  .city-live-app.is-list-mode .city-live-map-legend{
    bottom:calc(52vh + 56px);
  }

  .city-live-app.is-detail-open .city-live-mobile-bar{
    display:none;
  }

  .city-live-map-legend{
    bottom:56px;
  }
}

@media (min-width:768px){
  .city-live-modal__sheet{
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:min(480px, calc(100% - 32px));
    border-radius:20px;
    bottom:28px;
    max-height:calc(100vh - 56px);
  }

  .city-live-modal__handle{ display:none; }
}

@media (max-width:480px){
  .city-live-panel__title{ font-size:16px; }
}