/* brestobl.com - погода (/weather/): блоки weather-map и weather-table.
 * Подключается после siteall.css и берёт его переменные (--rule, --accent...).
 * siteall.css не переопределяет: всё под .wm, .wt и .wx. */

/* ── значки ── */
.wx-sprite{position:absolute; width:0; height:0; overflow:hidden}
.wx{display:inline-block; width:1.7em; height:1.7em; flex:none; vertical-align:middle}

/* ── карта ── */
.wm{margin: 4px 0 24px}

/* Радиокнопки отрезков спрятаны, но остаются в порядке табуляции:
   стрелки переключают отрезки с клавиатуры */
.wm-r{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none}

.wm-bar{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.wm-bar label{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width: 92px; padding: 6px 10px; line-height: 1.2;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  cursor: pointer; user-select: none;
}
.wm-bar label b{font-weight:600; font-size:12.5px}
.wm-bar label span{font-size:12px; color: var(--muted)}
.wm-bar label small{font-size:10.5px; color: var(--muted); margin-top:1px}
.wm-bar label:hover{border-color: var(--ink-2)}

.wm-r0:checked ~ .wm-bar label[for="wm-s0"],
.wm-r1:checked ~ .wm-bar label[for="wm-s1"],
.wm-r2:checked ~ .wm-bar label[for="wm-s2"],
.wm-r3:checked ~ .wm-bar label[for="wm-s3"],
.wm-r4:checked ~ .wm-bar label[for="wm-s4"],
.wm-r5:checked ~ .wm-bar label[for="wm-s5"],
.wm-r6:checked ~ .wm-bar label[for="wm-s6"],
.wm-r7:checked ~ .wm-bar label[for="wm-s7"]{background: var(--ink); border-color: var(--ink); color: var(--paper)}

.wm-r0:checked ~ .wm-bar label[for="wm-s0"] span,
.wm-r1:checked ~ .wm-bar label[for="wm-s1"] span,
.wm-r2:checked ~ .wm-bar label[for="wm-s2"] span,
.wm-r3:checked ~ .wm-bar label[for="wm-s3"] span,
.wm-r4:checked ~ .wm-bar label[for="wm-s4"] span,
.wm-r5:checked ~ .wm-bar label[for="wm-s5"] span,
.wm-r6:checked ~ .wm-bar label[for="wm-s6"] span,
.wm-r7:checked ~ .wm-bar label[for="wm-s7"] span,
.wm-r0:checked ~ .wm-bar label[for="wm-s0"] small,
.wm-r1:checked ~ .wm-bar label[for="wm-s1"] small,
.wm-r2:checked ~ .wm-bar label[for="wm-s2"] small,
.wm-r3:checked ~ .wm-bar label[for="wm-s3"] small,
.wm-r4:checked ~ .wm-bar label[for="wm-s4"] small,
.wm-r5:checked ~ .wm-bar label[for="wm-s5"] small,
.wm-r6:checked ~ .wm-bar label[for="wm-s6"] small,
.wm-r7:checked ~ .wm-bar label[for="wm-s7"] small{color: var(--rule-soft)}

.wm-r0:focus-visible ~ .wm-bar label[for="wm-s0"],
.wm-r1:focus-visible ~ .wm-bar label[for="wm-s1"],
.wm-r2:focus-visible ~ .wm-bar label[for="wm-s2"],
.wm-r3:focus-visible ~ .wm-bar label[for="wm-s3"],
.wm-r4:focus-visible ~ .wm-bar label[for="wm-s4"],
.wm-r5:focus-visible ~ .wm-bar label[for="wm-s5"],
.wm-r6:focus-visible ~ .wm-bar label[for="wm-s6"],
.wm-r7:focus-visible ~ .wm-bar label[for="wm-s7"]{outline: 2px solid var(--accent); outline-offset: 2px}

.wm-map{position:relative; container-type: inline-size; border: 1px solid var(--rule); background: #efe8db; overflow:hidden}
.wm-map img{display:block; width:100%; height:auto}

/* Точка - нулевого размера в месте города; подпись отходит от неё
   в сторону side (wm-at-r / -l / -b). Размер подписей идёт от ширины
   карты, чтобы на узком экране они не налезали друг на друга */
.wm-pt{position:absolute; width:0; height:0; font-size: clamp(9px, 1.08cqi, 13.5px)}
.wm-dot{
  position:absolute; left:-.32em; top:-.32em; width:.64em; height:.64em; border-radius:50%;
  background: var(--accent); box-shadow: 0 0 0 2px rgba(251,248,241,.9);
}
.wm-lab{
  position:absolute; display:flex; flex-direction:column; white-space:nowrap; line-height:1.1;
  padding: .22em .45em .28em; border-radius: 3px;
  background: rgba(251,248,241,.88); border: 1px solid rgba(201,192,173,.95);
  box-shadow: 0 1px 2px rgba(28,24,20,.12);
}
.wm-at-r .wm-lab{left:.75em; top:0; transform: translateY(-50%)}
.wm-at-l .wm-lab{right:.75em; top:0; transform: translateY(-50%); align-items:flex-end}
.wm-at-b .wm-lab{left:0; top:.75em; transform: translateX(-50%); align-items:center}

.wm-name{font-size:.92em; font-weight:500; color: var(--ink-2)}
.wm-v{display:none; align-items:center; gap:.2em}
.wm-v .wx{width:1.75em; height:1.75em}
.wm-v b{font-size:1.32em; font-weight:600; color: var(--ink)}

.wm-r0:checked ~ .wm-map .wm-v0,
.wm-r1:checked ~ .wm-map .wm-v1,
.wm-r2:checked ~ .wm-map .wm-v2,
.wm-r3:checked ~ .wm-map .wm-v3,
.wm-r4:checked ~ .wm-map .wm-v4,
.wm-r5:checked ~ .wm-map .wm-v5,
.wm-r6:checked ~ .wm-map .wm-v6,
.wm-r7:checked ~ .wm-map .wm-v7{display:inline-flex}

/* Узкая карта: подписи без названий, только значок и температура -
   названия городов есть в таблице ниже */
@container (max-width: 640px){
  .wm-name{display:none}
  .wm-lab{padding: .1em .3em .12em}
}

/* Телефон: только температура, без значка, и без точек, которые
   стоят вплотную к соседним (wm-minor) - всё это есть в таблице */
@container (max-width: 480px){
  .wm-minor{display:none}
  .wm-v .wx{display:none}
  .wm-v b{font-size:1.15em}
  .wm-at-r .wm-lab{left:.55em}
  .wm-at-l .wm-lab{right:.55em}
}
@container (max-width: 300px){
  .wm-pt{font-size: 8px}
}

@media (max-width: 640px){
  .wm-bar{display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:4px}
  .wm-bar label{min-width:0; padding: 5px 4px}
}

/* ── таблица ── */
.wt-h{font-family:"PT Serif", serif; font-weight:700; font-size:22px; line-height:1.2; margin: 22px 0 4px}
.wt{margin: 10px 0 22px; border: 1px solid var(--rule); background: var(--paper); overflow-x:auto}
.wt:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px}
.wt table{width:100%; min-width: 880px; border-collapse: separate; border-spacing: 0; font-size: 13px}
.wt th, .wt td{padding: 7px 8px; border-bottom: 1px solid var(--rule-soft); text-align:center; vertical-align:top}
.wt tbody tr:last-child th, .wt tbody tr:last-child td{border-bottom:none}
.wt thead th{background: var(--bg-2); font-weight:600; font-size:12.5px; color: var(--ink-2); vertical-align:top}
.wt thead small{display:block; font-weight:400; font-size:11.5px; color: var(--muted)}
.wt thead .wt-day{text-align:left; border-left: 1px solid var(--rule)}
.wt thead .wt-day:nth-child(2){border-left:none}
.wt .wt-d{border-left: 1px solid var(--rule)}

.wt .wt-city{
  position: sticky; left:0; z-index:1; text-align:left; white-space:nowrap;
  background: var(--paper); font-weight:600; color: var(--ink); border-right: 1px solid var(--rule);
}
.wt thead .wt-city{background: var(--bg-2); z-index:2}
.wt tbody tr:hover td, .wt tbody tr:hover th{background: #f6f0e4}

.wt-t{display:flex; align-items:center; justify-content:center; gap:3px; font-size:15px; font-weight:600; white-space:nowrap}
.wt-t .wx{width:24px; height:24px}
.wt-p{display:block; margin-top:1px; font-size:12px; color: var(--muted); white-space:nowrap}
.wt-p.wet{color:#2e66a3; font-weight:500}
.wt-w{display:block; font-size:11.5px; line-height:1.3; color: var(--muted); white-space:nowrap}
.wt .wt-sun{font-family:"IBM Plex Mono", monospace; font-size:12px; color: var(--ink-2); white-space:nowrap; border-left: 1px solid var(--rule)}
.wt thead .wt-sun{font-family: inherit; white-space: normal; min-width: 72px}

/* ── полоска города (страницы /region/) ── */
.wst{margin: 22px 0 18px; border: 1px solid var(--rule); background: var(--paper)}
.wst-head{display:flex; align-items:baseline; justify-content:space-between; gap: 6px 12px; flex-wrap:wrap;
  padding: 9px 12px; border-bottom: 1px solid var(--rule-soft); background: var(--bg-2)}
.wst-head h3{margin:0; font-family:"PT Serif", serif; font-size:17px; font-weight:700; line-height:1.25}
.wst-head a{font-size:12.5px; color: var(--accent); white-space:nowrap}
.wst-head a:hover{text-decoration: underline}
.wst-row{display:grid; grid-template-columns: repeat(8, minmax(0, 1fr))}
.wst-c{padding: 8px 4px 9px; text-align:center; border-left: 1px solid var(--rule-soft); min-width:0}
.wst-c:first-child{border-left:none}
.wst-c.wst-d{border-left-color: var(--rule)}
.wst-when{display:block; font-size:11.5px; line-height:1.25; color: var(--muted); margin-bottom:3px}
.wst-when b{display:block; font-weight:600; color: var(--ink-2)}
.wst .wt-t{font-size:14.5px}
.wst .wt-p, .wst .wt-w{white-space: normal}

/* Узкая колонка: два ряда по четыре отрезка */
@media (max-width: 760px){
  .wst-row{grid-template-columns: repeat(4, minmax(0, 1fr))}
  .wst-c:nth-child(4n+1){border-left:none}
  .wst-c:nth-child(n+5){border-top: 1px solid var(--rule-soft)}
}