/* brestobl.com - датчики скорости (/speed-cameras/): блоки speed-map,
 * speed-list, speed-often и врезка speed-cameras на /border/.
 * Подключается после siteall.css и берёт его переменные (--rule, --accent...).
 * siteall.css не переопределяет: всё под .sc, .sc-list, .sc-often, .sc-border. */

/* -- карты -- */
.sc{margin: 4px 0 26px}

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

.sc-bar{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.sc-bar label{
  padding: 7px 14px; font-size:13px; font-weight:600; line-height:1.2;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  cursor:pointer; user-select:none;
}
.sc-bar label:hover{border-color: var(--ink-2)}
.sc-r-today:checked ~ .sc-bar label[for="sc-l-today"],
.sc-r-often:checked ~ .sc-bar label[for="sc-l-often"]{background: var(--ink); border-color: var(--ink); color: var(--paper)}
.sc-r-today:focus-visible ~ .sc-bar label[for="sc-l-today"],
.sc-r-often:focus-visible ~ .sc-bar label[for="sc-l-often"]{outline: 2px solid var(--accent); outline-offset: 2px}

.sc-r-today:checked ~ .sc-maps .sc-L-often,
.sc-r-often:checked ~ .sc-maps .sc-L-today{display:none}

.sc-maps{display:grid; gap:18px}
.sc-map{margin:0}
.sc-frame{position:relative; container-type: inline-size; border: 1px solid var(--rule); background:#f3ecdf; overflow:hidden}
.sc-frame img{display:block; width:100%; height:auto}
.sc-map figcaption{margin-top:6px; font-size:12.5px; color: var(--muted)}

/* Точка - нулевого размера в месте датчика, значок центрируется на ней.
   Размер идёт от ширины карты: на телефоне номера не налезают друг на друга */
.sc-pt{position:absolute; transform: translate(-50%, -50%); font-size: clamp(9px, 1.25cqi, 14px); line-height:1; text-decoration:none}

.sc-num{
  display:flex; align-items:center; justify-content:center;
  min-width:1.9em; height:1.9em; padding:0 .25em; border-radius:999px;
  background: var(--accent); color:#fff; font-weight:700;
  box-shadow: 0 0 0 .18em rgba(251,248,241,.95), 0 1px 3px rgba(28,24,20,.35);
}
.sc-num b{font-size:1em}

.sc-cluster{
  display:block; white-space:nowrap; padding:.45em .7em; border-radius:999px;
  background: var(--ink); color: var(--paper); font-weight:600;
  box-shadow: 0 0 0 .18em rgba(251,248,241,.95), 0 1px 3px rgba(28,24,20,.35);
}
.sc-cluster:hover{background: var(--accent); color:#fff}

.sc-dot{display:block; border-radius:50%; background: rgba(138,44,39,.72); box-shadow: 0 0 0 .14em rgba(251,248,241,.9)}
.sc-s1{width:.75em; height:.75em}
.sc-s2{width:1.05em; height:1.05em}
.sc-s3{width:1.4em; height:1.4em}
.sc-s4{width:1.8em; height:1.8em}

@container (max-width: 480px){
  .sc-pt{font-size: 9px}
}

/* -- список на день -- */
.sc-list{margin: 6px 0 26px}
.sc-list h2, .sc-often h2{font-family:"PT Serif", serif; font-weight:700; font-size:22px; line-height:1.2; margin: 0 0 4px}
.sc-note{margin: 0 0 12px; font-size:13px; color: var(--muted)}

.sc-items{list-style:none; margin:0; padding:0; border-top: 2px solid var(--ink)}
.sc-item{display:grid; grid-template-columns: 2.4em 1fr; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--rule-soft)}
.sc-n{
  display:flex; align-items:center; justify-content:center; width:2em; height:2em; border-radius:999px;
  background: var(--accent); color:#fff; font-weight:700; font-size:14px;
}
.sc-n-none{background: var(--rule-soft)}
.sc-body h3{display:inline; margin:0; font-size:16px; font-weight:600; color: var(--ink)}
.sc-where{margin-left:8px; font-size:13px; color: var(--muted)}
.sc-meta{margin: 3px 0 0; display:flex; flex-wrap:wrap; gap: 4px 10px; align-items:center; font-size:13.5px}
.sc-hours{font-family:"IBM Plex Mono", monospace; color: var(--ink-2)}
.sc-live{
  padding: 1px 7px; border-radius: 3px; font-size:11.5px; font-weight:600; letter-spacing:.02em;
  background: #fbe9e6; color: var(--accent); border: 1px solid #e9c1bb;
}
.sc-limits{margin: 3px 0 0; font-size:13px; color: var(--muted)}

/* -- где ставят чаще -- */
.sc-often{margin: 6px 0 26px}
.sc-table{border: 1px solid var(--rule); background: var(--paper); overflow-x:auto}
.sc-table:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px}
.sc-table table{width:100%; min-width: 520px; border-collapse:collapse; font-size:13.5px}
.sc-table th, .sc-table td{padding: 8px 10px; border-bottom: 1px solid var(--rule-soft); text-align:left; vertical-align:top}
.sc-table tbody tr:last-child th, .sc-table tbody tr:last-child td{border-bottom:none}
.sc-table thead th{background: var(--bg-2); font-size:12.5px; font-weight:600; color: var(--ink-2)}
.sc-table tbody th{font-weight:600; color: var(--ink)}
.sc-table tbody th small{display:block; font-weight:400; font-size:12px; color: var(--muted)}
.sc-table td:nth-child(2){min-width:150px}
.sc-count{display:inline-block; min-width:2em; font-weight:600}
.sc-share{display:inline-block; height:7px; margin-left:6px; max-width:110px; vertical-align:middle; background: rgba(138,44,39,.55); border-radius:2px}

/* -- врезка на /border/ -- */
.sc-border{margin: 8px 0 24px; padding: 12px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--accent); background: var(--paper)}
.sc-border h2{margin:0 0 6px; font-family:"PT Serif", serif; font-size:18px; line-height:1.25}
.sc-border ul{margin:0; padding:0 0 0 18px; font-size:14px}
.sc-border li{margin: 2px 0}
.sc-border li small{color: var(--muted)}
.sc-border p{margin: 8px 0 0; font-size:13px}
.sc-border a{color: var(--accent)}
.sc-border a:hover{text-decoration:underline}

@media (max-width: 640px){
  .sc-table table{min-width:0; font-size:13px}
  .sc-table th, .sc-table td{padding: 7px 8px}
  .sc-table td:nth-child(2){min-width:0; white-space:nowrap}
  .sc-share{max-width:40px}
  .sc-item{grid-template-columns: 2.1em 1fr; gap:10px}
  .sc-body h3{display:block; font-size:15px}
  .sc-where{display:block; margin-left:0}
}