/* Витрина «Стройка ВОЛС». Наследует палитру app.css, добавляет карту,
   стадии прогресса и плашку демо-режима. */
.banner {
  font-size: 12px; line-height: 1.35; padding: 7px 10px; margin-bottom: 8px;
  border-radius: 10px; background: rgba(128,128,128,.16); color: var(--muted);
}
.banner.demo { background: rgba(215,38,61,.14); color: var(--danger); font-weight: 600; }
.switch {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 4px;
  font-size: 14px; color: var(--muted);
}
.switch button {
  border: 0; border-radius: 14px; padding: 6px 12px; font-size: 13px;
  background: var(--card); color: var(--fg);
}
.switch button.on { background: var(--accent); color: #fff; }

.stage { margin-bottom: 12px; }
.stage .head { display: flex; justify-content: space-between; font-size: 14px; }
.stage .head .num { color: var(--muted); font-variant-numeric: tabular-nums; }
.stage .bar { margin-top: 6px; height: 8px; border-radius: 4px; }
.stage .bar span { background: var(--accent); }
.stage.done .bar span { background: var(--ok); }
.stage .note { color: var(--muted); font-size: 12px; margin-top: 4px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.grid .kpi { margin: 0; }
.grid .kpi .value { font-size: 20px; }

#map { height: 62vh; border-radius: 14px; margin-top: 6px; }
.leaflet-container { background: var(--card); font: inherit; }
.legend {
  color: var(--muted); font-size: 12px; margin-top: 8px; display: flex;
  gap: 14px; flex-wrap: wrap;
}
.legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle;
  margin-right: 5px; border-radius: 2px; }

table.plain { width: 100%; border-collapse: collapse; font-size: 13px; }
table.plain th, table.plain td { text-align: left; padding: 6px 4px;
  border-bottom: 1px solid rgba(128,128,128,.2); }
table.plain th { color: var(--muted); font-weight: 500; }
table.plain td.num, table.plain th.num { text-align: right;
  font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); font-size: 13px; }

/* Сроки включения и отчёты бригады. */
.caption { margin: 2px 0 10px; }
.cards { display: flex; gap: 8px; margin: 8px 0 4px; }
.cards .card {
  flex: 1; background: var(--card); border-radius: 12px; padding: 10px 8px;
  font-size: 12px; color: var(--muted); text-align: center;
}
.cards .card b { display: block; font-size: 20px; color: var(--fg); }
.cards .card.red b { color: var(--danger); }
.cards .card.amber b { color: #c98a00; }

.tag.red { background: rgba(215,38,61,.16); color: var(--danger); }
.tag.amber { background: rgba(201,138,0,.18); color: #c98a00; }
.tag.green { background: rgba(31,157,85,.16); color: #1f9d55; }

table.plain tr.me td { font-weight: 600; }

.rep { background: var(--card); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.rep .head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.rep .head .num { color: var(--muted); }
.rep table.plain { margin-top: 6px; }
.rep .note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.rep .note.warn { color: var(--danger); }
.rep .raw {
  white-space: pre-wrap; word-break: break-word; font-size: 11px;
  color: var(--muted); margin: 6px 0 0; max-height: 180px; overflow: auto;
}

/* Кнопка повтора под сообщением о неудачной загрузке. */
.retry { text-align: center; padding-bottom: 24px; }
.retry button { border: 0; border-radius: 10px; padding: 10px 18px; font: inherit;
  background: var(--accent); color: #fff; }

/* Подпись под картой: сколько в работе и как читать выполненный отрезок. */
.mapnote { margin: 8px 0 0; }
/* Пятёрка по районам — шесть колонок на ширине телефона. */
table.plain.dist { font-size: 12px; }
table.plain.dist th, table.plain.dist td { padding: 6px 2px; }