/* brestobl.com - очередь на границе (/border/): блоки border-now,
 * border-charts, border-week, border-sponsor.
 * Подключается после siteall.css и берёт его переменные (--rule, --accent...).
 * siteall.css не переопределяет: всё под .bn, .bc, .bw и .bsp.
 * Блок h-border-queue главной сюда не относится - у него свой <style>. */

/* ── общие блоки сайта на этой странице ──
 * m-steps, m-faq и sec-head печатают свой .wrap с отступами по 24px:
 * внутри колонки статьи они вставали со сдвигом относительно текста и
 * графиков. Только здесь - этот файл подключает одна /border/. */
.stream > .m-steps > .wrap,
.stream > .m-faq > .wrap,
.stream > section.wrap{padding-left: 0; padding-right: 0}

/* ── сейчас ── */
.bn{margin: 4px 0 26px}
.bn-upd{margin: 0 0 8px; font-family:"IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .04em; color: var(--muted)}
.bn-upd time{color: var(--ink-2)}
.bn-cards{display:grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule)}
.bn-card{min-width:0; padding: 14px 18px 16px}
.bn-card + .bn-card{border-left: 1px solid var(--rule-soft)}
.bn-h{margin: 0 0 12px; font-family:"IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink)}
.bn-h span{color: var(--muted); font-weight: 500}
.bn-vals{display:flex; flex-wrap: wrap; gap: 14px 36px}
.bn-v{min-width: 0}
.bn-v strong{display:block; font-family:"IBM Plex Sans", sans-serif; font-weight: 600; font-size: 40px; line-height: 1; color: var(--ink); white-space: nowrap}
.bn-l{display:block; margin-top: 5px; font-size: 13px; color: var(--muted)}
.bn-lv{display:inline-flex; align-items:center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2)}
.bn-lv::before{content:""; width: 9px; height: 9px; border-radius: 50%; background: #a99f91; flex: none}
.bn-lv-none::before, .bn-lv-low::before{background: var(--ok)}
.bn-lv-high::before{background: var(--accent)}
.bn-note{margin: 14px 0 0; padding-top: 10px; border-top: 1px dotted var(--rule); font-size: 13.5px; color: var(--ink-2)}
.bn-stale{margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--warn)}
.bn-empty{margin: 0; padding: 14px 16px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); background: var(--paper)}
.bn-foot{margin: 8px 0 0; font-size: 12.5px; color: var(--muted)}

@media (max-width: 640px){
  .bn-cards{grid-template-columns: 1fr}
  .bn-card + .bn-card{border-left: none; border-top: 1px solid var(--rule-soft)}
  .bn-card{padding: 12px 4px 14px}
  .bn-v strong{font-size: 34px}
}

/* ── место спонсора ── */
.bsp{display:grid; gap: 4px; margin: 0 0 24px; padding: 12px 16px 14px; border: 1px solid var(--rule); background: var(--paper)}
.bsp-k{font-family:"IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted)}
.bsp-n{font-size: 16px; color: var(--ink)}
.bsp-t{margin: 0; font-size: 14px; color: var(--ink-2)}
.bsp-a{justify-self: start; font-size: 14px; font-weight: 500; color: var(--accent)}
.bsp-a:hover{text-decoration: underline}

/* ── графики ── */
.bc-h{font-family:"PT Serif", serif; font-weight:700; font-size:22px; line-height:1.2; margin: 26px 0 10px}
.bcs{position: relative}

/* Радиокнопки периода спрятаны, но остаются в порядке табуляции */
.bc-r{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none}
.bc-bar{display:flex; gap:6px; margin-bottom: 12px}
.bc-bar label{
  padding: 6px 14px; font-size: 13px; font-weight: 500; line-height: 1.2;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  cursor: pointer; user-select: none;
}
.bc-bar label:hover{border-color: var(--ink-2)}
.bc-r0:checked ~ .bc-bar label[for="bc-w0"],
.bc-r1:checked ~ .bc-bar label[for="bc-w1"]{background: var(--ink); border-color: var(--ink); color: var(--paper)}
.bc-r0:focus-visible ~ .bc-bar label[for="bc-w0"],
.bc-r1:focus-visible ~ .bc-bar label[for="bc-w1"]{outline: 2px solid var(--accent); outline-offset: 2px}

.bc-w{display:none}
.bc-r0:checked ~ .bc-w0,
.bc-r1:checked ~ .bc-w1{display:grid; grid-template-columns: 1fr 1fr; gap: 0 28px}

.bc{position: relative; margin: 0; min-width: 0; padding: 10px 0 4px; border-top: 1px solid var(--rule)}
.bc-head{margin-bottom: 4px; font-size: 13px; color: var(--muted)}
.bc-head b{font-size: 14.5px; font-weight: 600; color: var(--ink)}
.bc-body{position: relative; outline: none}
.bc-body:focus-visible{outline: 2px solid var(--accent); outline-offset: 4px}
.bc-none{margin: 12px 0; font-size: 14px; color: var(--muted)}

.bc-panel{display:grid; grid-template-columns: 48px 1fr; margin-top: 10px}
.bc-yax{position: relative}
.bc-yax span{
  position:absolute; right: 7px; transform: translateY(-50%);
  font-family:"IBM Plex Mono", monospace; font-size: 10.5px; line-height: 1; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bc-plot{position: relative; height: 170px}
.bc-mid .bc-plot{height: 110px}
.bc-short .bc-plot{height: 56px}
.bc-plot svg{position:absolute; inset: 0; width: 100%; height: 100%; overflow: visible}

.bc-we{fill: var(--bg-2); opacity: .6}
.bc-grid{stroke: #e6dfd0; stroke-width: 1; vector-effect: non-scaling-stroke}
.bc-day{stroke: #d6cdb9; stroke-width: 1; vector-effect: non-scaling-stroke}
.bc-base{stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke}
.bc-area{fill: var(--accent); opacity: .1}
.bc-line{fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke}

.bc-name{
  position:absolute; top: 2px; left: 6px; padding: 0 4px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: rgba(251,248,241,.85);
}
.bc-end{position:absolute; width:0; height:0}
.bc-end i{position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper)}
.bc-end b{
  position:absolute; right: 10px; top: -9px; padding: 0 4px;
  font-size: 12.5px; font-weight: 600; line-height: 18px; color: var(--ink); white-space: nowrap;
  background: rgba(251,248,241,.9);
}
.bc-cross{position:absolute; top:0; bottom:0; width:0; border-left: 1px solid var(--ink-2); opacity: .55; pointer-events:none}
.bc-dot{position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper); pointer-events:none}
.bc-body:hover .bc-end, .bc-body.bc-on .bc-end{opacity: .25}

.bc-xax{position: relative; height: 22px; margin-left: 48px}
.bc-xax span{
  position:absolute; top: 5px; transform: translateX(-50%);
  font-size: 11.5px; line-height: 1; color: var(--muted); white-space: nowrap;
}
.bc-xax .bc-xwe{color: var(--ink-2)}

.bc-tip{
  position:absolute; z-index: 5; min-width: 150px; padding: 8px 10px; pointer-events:none;
  background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.35;
  box-shadow: 0 4px 14px rgba(28,24,20,.2);
}
.bc-tip[hidden]{display:none}
.bc-tip .bc-tt{display:block; margin-bottom: 4px; font-size: 11.5px; color: #cfc6b8}
.bc-tip .bc-tr{display:flex; align-items: baseline; gap: 6px}
.bc-tip .bc-tr i{flex: none; width: 12px; border-top: 2px solid #e09a8f; transform: translateY(-3px)}
.bc-tip .bc-tr b{font-size: 14px; font-weight: 600}
.bc-tip .bc-tr span{color: #cfc6b8}

.bc-note{margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted)}

.bc-tbl{margin: 12px 0 8px; border-top: 1px solid var(--rule-soft)}
.bc-tbl summary{padding: 8px 0; font-size: 13.5px; font-weight: 500; color: var(--accent); cursor: pointer}
.bc-tbl-in{overflow-x: auto}
.bc-tbl table{width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13px}
.bc-tbl th, .bc-tbl td{padding: 5px 8px; border-bottom: 1px solid var(--rule-soft); text-align: left; white-space: nowrap}
.bc-tbl td{font-variant-numeric: tabular-nums}
.bc-tbl thead th{font-weight: 600; font-size: 12px; color: var(--ink-2); background: var(--bg-2)}
.bc-tbl tbody th{font-weight: 500}

@media (max-width: 900px){
  .bc-r0:checked ~ .bc-w0,
  .bc-r1:checked ~ .bc-w1{grid-template-columns: 1fr}
  .bc + .bc{margin-top: 10px}
}
@media (max-width: 640px){
  .bc-plot{height: 140px}
  .bc-mid .bc-plot{height: 96px}
  .bc-panel{grid-template-columns: 40px 1fr}
  .bc-xax{margin-left: 40px}
  .bc-w1 .bc-alt{display: none}
  .bc-xax span{font-size: 11px}
}

/* ── прогноз на неделю ── */
.bw{position: relative; margin: 30px 0 10px}
.bw-sub{margin: -4px 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2)}
/* Легковые / автобусы: радиокнопки bw-r* перед таблицами, как у графиков */
.bw-k{display:none}
.bw-r0:checked ~ .bw-k0,
.bw-r1:checked ~ .bw-k1{display:block}
.bw-r0:checked ~ .bc-bar label[for="bw-k0"],
.bw-r1:checked ~ .bc-bar label[for="bw-k1"]{background: var(--ink); border-color: var(--ink); color: var(--paper)}
.bw-r0:focus-visible ~ .bc-bar label[for="bw-k0"],
.bw-r1:focus-visible ~ .bc-bar label[for="bw-k1"]{outline: 2px solid var(--accent); outline-offset: 2px}

.bw-scroll{overflow-x: auto}
.bw-scroll:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px}
.bw-t{width: 100%; min-width: 420px; table-layout: fixed; border-collapse: separate; border-spacing: 2px}
.bw-t caption{caption-side: bottom; padding-top: 6px; text-align: left; font-size: 12px; color: var(--muted)}
.bw-t thead th{
  padding: 0 0 4px; font-family:"IBM Plex Mono", monospace; font-size: 11px; font-weight: 400;
  color: var(--muted); text-align: center; white-space: nowrap;
}
.bw-t thead td{width: 118px}
.bw-t tbody th{padding: 0 8px 0 0; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap}
.bw-t tbody th small{display:block; font-size: 11.5px; font-weight: 400; color: var(--muted)}
.bw-we th small{color: var(--ink-2)}
.bw-c{
  height: 36px; padding: 0; border-radius: 3px; text-align: center;
  font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink); cursor: default;
}
.bw-c:hover{box-shadow: 0 0 0 1px var(--ink)}
.bw-b0{background: #f1e2d6}
.bw-b1{background: #e4c0aa}
.bw-b2{background: #d4987d}
.bw-b3{background: #bd6c53}
.bw-b4{background: #9c4234; color: #fff}
.bw-b5{background: #6e2420; color: #fff}
.bw-past{opacity: .35}
.bw-best{font-weight: 700; box-shadow: 0 0 0 2px var(--ink)}
.bw-best:hover{box-shadow: 0 0 0 2px var(--ink)}
.bw-na{color: var(--muted); background: transparent}

.bw-legend{display:flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; font-size: 12px; color: var(--muted)}
.bw-legend span{display:inline-flex; align-items:center; gap: 5px}
.bw-legend .bw-lt{color: var(--ink-2)}
.bw-legend i{display:inline-block; width: 14px; height: 14px; border-radius: 3px}
.bw-legend .bw-ib{background: transparent; box-shadow: inset 0 0 0 2px var(--ink)}

.bw-h3{margin: 18px 0 6px; font-family:"PT Serif", serif; font-size: 17px; font-weight: 700}
.bw-best-list{margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; font-size: 14px; line-height: 1.45; color: var(--ink-2)}
.bw-best-list li{break-inside: avoid; padding: 3px 0; border-bottom: 1px dotted var(--rule-soft)}

@media (max-width: 720px){
  .bw-to, .bw-mon{display: none}
  .bw-t{min-width: 0}
  .bw-t thead td{width: 50px}
  .bw-t thead th{font-size: 10px}
  .bw-c{height: 30px; font-size: 10px; letter-spacing: -.02em}
  .bw-t tbody th{font-size: 12px; padding-right: 4px}
  .bw-t tbody th small{display: none}
  .bw-best-list{columns: 1}
}