/* brestobl.com - запреты на посещение лесов (/forest-ban/): блоки forest-map,
 * forest-list, forest-changes.
 * Подключается после siteall.css и берёт его переменные (--rule, --accent...).
 * siteall.css не переопределяет: всё под .fb, .fb-list, .fb-changes. */

.fb{
  --fb-ban: #b3342a;
  --fb-ban-fill: rgba(196,52,38,.30);
  --fb-ban-line: rgba(150,28,20,.42);
  --fb-res: #d99528;
  --fb-res-fill: rgba(226,158,40,.25);
  --fb-ok: #4f7a45;
  --fb-edge: rgba(74,62,42,.62);
  margin: 4px 0 26px;
}
.fb-list, .fb-changes{
  --fb-ban: #b3342a;
  --fb-res: #d99528;
  --fb-ok: #4f7a45;
}

/* -- легенда -- */
.fb-legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 10px; padding:0; list-style:none; font-size:13.5px; color: var(--ink-2)}
.fb-legend li{display:inline-flex; align-items:center; gap:7px}
.fb-legend b{font-weight:700; color: var(--ink)}
.fb-legend i{display:inline-block; width:22px; height:14px; border-radius:2px; border:1px solid var(--fb-edge)}
.fb-legend .fb-s-banned i{background: repeating-linear-gradient(45deg, rgba(150,28,20,.55) 0 3px, rgba(196,52,38,.32) 3px 7px)}
.fb-legend .fb-s-restricted i{background: var(--fb-res-fill)}
.fb-legend .fb-s-allowed i{background: transparent}

/* -- карта -- */
.fb-map{margin:0}
.fb-frame{position:relative; container-type: inline-size; border: 1px solid var(--rule); background:#f2eadf; overflow:hidden}
.fb-frame img{display:block; width:100%; height:auto}
.fb-map figcaption{margin-top:6px; font-size:12.5px; color: var(--muted)}

.fb-svg{position:absolute; inset:0; width:100%; height:100%; mix-blend-mode: multiply}
.fb-d{outline:none}
.fb-d path{
  fill: transparent; stroke: var(--fb-edge); stroke-width: 1.1px; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; pointer-events: all; cursor: pointer;
  transition: fill .15s, stroke-width .15s;
}
.fb-d.fb-s-restricted path{fill: var(--fb-res-fill)}
.fb-d.fb-s-banned path{fill: url(#fb-hatch)}
.fb-hatch-bg{fill: var(--fb-ban-fill)}
.fb-hatch-ln{fill: var(--fb-ban-line)}

.fb-d:hover path, .fb-d:focus-visible path, .fb-d.is-on path{stroke: var(--ink); stroke-width: 2.6px}
.fb-d.fb-s-allowed:hover path, .fb-d.fb-s-allowed.is-on path,
.fb-d.fb-s-none:hover path, .fb-d.fb-s-none.is-on path{fill: rgba(79,122,69,.14)}
.fb-d.fb-s-restricted:hover path, .fb-d.fb-s-restricted.is-on path{fill: rgba(226,158,40,.42)}

/* Города областного подчинения: своих сведений нет - серая подложка, не статус */
.fb-city{fill: rgba(110,103,89,.16);stroke: var(--fb-edge); stroke-width: 1px; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; pointer-events:none}
.fb-region{fill:none; stroke:#4a3d2a; stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events:none}

/* Подпись - нулевой точкой в «глубине» района, плашка центрируется на ней.
   Размер идёт от ширины карты; мышь проходит сквозь подпись к району */
.fb-lbl{
  position:absolute; transform: translate(-50%, -50%);
  display:inline-flex; align-items:center; gap:.32em; white-space:nowrap;
  font-size: clamp(9px, 1.02cqi, 13px); line-height:1.1; font-weight:500; color: var(--ink-2);
  padding: .2em .45em .24em; border-radius:3px;
  background: rgba(251,248,241,.9); border: 1px solid rgba(201,192,173,.95);
  box-shadow: 0 1px 2px rgba(28,24,20,.12); pointer-events:none;
}
.fb-lbl i{flex:none; width:.62em; height:.62em; border-radius:50%; background: var(--rule)}
.fb-lbl.fb-s-banned i{background: var(--fb-ban)}
.fb-lbl.fb-s-restricted i{background: var(--fb-res)}
.fb-lbl.fb-s-allowed i{background: var(--fb-ok)}
.fb-lbl.is-on{background: var(--ink); border-color: var(--ink); color: var(--paper)}

/* Карточка района - её показывает forest-ban.js над подписью района */
.fb-card{
  position:absolute; z-index:2; width: max-content; max-width: min(270px, 70%);
  transform: translate(-50%, calc(-100% - 16px));
  padding: 9px 12px 10px; border-radius:4px; font-size:13px; line-height:1.35; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 4px 14px rgba(28,24,20,.18);
  pointer-events:none;
}
.fb-card[hidden]{display:none}
.fb-card.below{transform: translate(-50%, 16px)}
.fb-card h4{margin:0 0 5px; font-family:"PT Serif", serif; font-size:15.5px; line-height:1.2; color: var(--ink)}
.fb-card p{margin:3px 0 0}
.fb-card .fb-badge{margin-right:6px}

@container (max-width: 560px){
  .fb-lbl{display:none}
  .fb-card, .fb-card.below{left:8px !important; right:8px; top:auto !important; bottom:8px; max-width:none; width:auto; transform:none}
}

/* -- плашка статуса (таблица и карточка) -- */
.fb-badge{
  display:inline-block; padding: 2px 8px; border-radius:3px; white-space:nowrap;
  font-size:12px; font-weight:600; letter-spacing:.02em; line-height:1.5;
  background: var(--rule-soft); color: var(--ink-2);
}
.fb-s-banned .fb-badge, .fb-badge.fb-s-banned{background: var(--fb-ban); color:#fff}
.fb-s-restricted .fb-badge, .fb-badge.fb-s-restricted{background: var(--fb-res); color: var(--ink)}
.fb-s-allowed .fb-badge, .fb-badge.fb-s-allowed{background:#e3ead9; color:#33502b}

/* -- таблица районов -- */
.fb-list{margin: 6px 0 26px}
.fb-list h2, .fb-changes h2{font-family:"PT Serif", serif; font-weight:700; font-size:22px; line-height:1.2; margin: 0 0 4px}
.fb-note{margin: 0 0 12px; font-size:13px; color: var(--muted)}

.fb-rows{list-style:none; margin:0; padding:0; border-top: 2px solid var(--ink)}
.fb-row{display:grid; grid-template-columns: 7.6em 1fr; gap: 12px; align-items:start; padding: 10px 2px; border-bottom: 1px solid var(--rule-soft); scroll-margin-top: 80px}
.fb-row .fb-badge{justify-self:start; margin-top:1px}
.fb-row.is-on, .fb-row:target{background: #f4eee2}
.fb-body h3{margin:0; font-size:16px; font-weight:600; color: var(--ink)}
.fb-meta{margin: 2px 0 0; font-size:13.5px; color: var(--ink-2)}
.fb-since{font-weight:600}
.fb-sep{color: var(--muted)}
.fb-decision{margin: 2px 0 0; font-size:12.5px; color: var(--muted)}

/* -- последние изменения -- */
.fb-changes{margin: 6px 0 26px}
.fb-log{list-style:none; margin:0; padding:0; border-top: 1px solid var(--rule); font-size:14px}
.fb-log li{padding: 7px 2px; border-bottom: 1px solid var(--rule-soft)}
.fb-log time{display:inline-block; min-width: 6.5em; font-family:"IBM Plex Mono", monospace; font-size:12.5px; color: var(--muted)}
.fb-log b{font-weight:600; color: var(--ink)}
.fb-log em{font-style:normal; font-weight:600}
.fb-log .fb-s-banned em, .fb-log li.fb-s-banned em{color: var(--fb-ban)}
.fb-log li.fb-s-restricted em{color:#9a6510}
.fb-log li.fb-s-allowed em{color: var(--fb-ok)}

.fb-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap}

@media (max-width: 640px){
  .fb-row{grid-template-columns: 1fr; gap: 4px}
  .fb-log time{display:block; min-width:0}
}