.coverage-page{--white:var(--surface);--mut:var(--muted);max-width:74rem;margin:0 auto;padding:clamp(1.25rem,3vw,3rem) max(1rem,env(safe-area-inset-left)) 3rem}
.coverage-page h1{margin:0;font-size:clamp(2.1rem,6vw,4rem);line-height:.98;letter-spacing:-.055em}
.coverage-page .lede{max-width:44rem;margin:1rem 0 1.35rem;color:var(--muted);font-size:1rem}
.coverage-page .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:1px;margin:0 0 1.6rem;border:1px solid var(--line);border-radius:.7rem;overflow:hidden;background:var(--line)}
.coverage-page .stats div{padding:.85rem .95rem;background:var(--surface)}
.coverage-page .stats b{display:block;font-size:1.4rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.coverage-page .stats span{display:block;margin-top:.1rem;color:var(--muted);font-size:.76rem;line-height:1.25}
.coverage-page .note{padding:1rem 1.15rem;border:1px solid var(--line);border-radius:.7rem;background:var(--surface);color:var(--muted);font-size:.84rem;line-height:1.5}
.coverage-page .coverage-footer{margin:2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}
.compact-state-list{display:none}
@media(max-width:700px){
  .coverage-page .mapwrap svg{width:calc(100% + 1rem);margin-left:-.5rem}
  .coverage-page .lab.out{display:none}
  .compact-state-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin:.65rem 0 1rem}
  .compact-state-list a{display:grid;gap:.08rem;padding:.55rem .6rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface);color:var(--ink);text-decoration:none}
  .compact-state-list strong{font-size:.82rem;line-height:1.15}
  .compact-state-list span{color:var(--muted);font-size:.72rem}
  .compact-state-list .market-count{color:var(--lime-deep);font-size:.9rem}
}
.mapwrap{position:relative;margin:1.4rem 0 1rem}
.mapwrap svg{display:block;width:100%;height:auto}
.st{fill:var(--white);stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.st.on{fill:var(--ink);stroke:var(--paper);cursor:pointer}
.st.on:hover,.st.on.hot{fill:#1b2f42}
.lab{pointer-events:all}
.lab .ab{font:700 15px Inter,system-ui,sans-serif;fill:var(--paper);text-anchor:middle}
.lab .n{font:800 15px Inter,system-ui,sans-serif;fill:var(--lime);text-anchor:middle;
  font-variant-numeric:tabular-nums}
.lab.out .ab{fill:var(--ink);text-anchor:start}
.lab.out .n{fill:var(--lime-deep);text-anchor:start}
.lab.out line{stroke:var(--line);stroke-width:1}
.lab.out circle{fill:var(--ink)}
/* The state's market list. Opens on hover and on keyboard focus; the position
   is computed in script from the shape's place on the map, because an SVG shape
   cannot be the parent of an HTML block. */
.pop{position:absolute;z-index:5;min-width:15rem;padding:.75rem .85rem;background:var(--white);
  color:var(--ink);border:1px solid var(--line);border-radius:.55rem;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none}
.pop.show{opacity:1;visibility:visible}
.pop strong{display:block;font-size:.92rem}
.pop .sum{display:block;margin:.1rem 0 .5rem;color:var(--mut);font-size:.76rem}
.pop ul{list-style:none;margin:0;padding:0}
.pop li{display:flex;justify-content:space-between;gap:1rem;padding:.15rem 0;font-size:.82rem;
  border-top:1px solid var(--line)}
.pop li b{font-variant-numeric:tabular-nums;color:var(--mut);font-weight:600}
/* Строка «and N more» — не рынок, а остаток списка: отделена чертой
   и приглушена, чтобы её не читали как ещё один рынок. */
.pop li.more{margin-top:.25rem;padding-top:.35rem;border-top:1px solid var(--line);color:var(--mut);font-style:italic}
.legend{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;color:var(--mut);font-size:.82rem}
.legend i{display:inline-block;width:.85rem;height:.85rem;border-radius:.2rem;vertical-align:-1px;
  margin-right:.4rem;border:1px solid var(--line)}
@media(max-width:700px){.lab .ab,.lab .n{font-size:19px}
  .pop{position:fixed;left:1rem;right:1rem;bottom:1rem;min-width:0}}
/* Панель штата: открывается по клику под картой. Отдельная от всплывающей
   подсказки намеренно — подсказка отвечает «сколько», панель «что именно», и
   смешивать их значит делать подсказку нечитаемой у Нью-Джерси со 146
   муниципалитетами. */
/* Панель показывается адресом страницы, а не скриптом: /coverage#p-TX
   открывает Техас сразу, работает без JS и чинит кнопку «назад». */
.panel{display:none;margin:1.25rem 0 0;border:1px solid var(--line);
  border-radius:.6rem;background:var(--white);overflow:hidden;
  animation:panel .18s ease-out}
.panel:target{display:block}
/* Подсветка выбранного штата — тоже без скрипта. */
.mapwrap:has(+ .panel:target) .st.on{opacity:.55}
svg a{cursor:pointer}svg a:focus-visible .st{outline:none;stroke:var(--ink);stroke-width:2}
svg a:focus-visible .lab .ab,svg a:focus-visible .lab .n{text-decoration:underline}
@keyframes panel{from{opacity:0;transform:translateY(-.35rem)}to{opacity:1;transform:none}}
.panel header{display:flex;align-items:baseline;gap:.75rem;padding:.85rem 1rem;
  border-bottom:1px solid var(--line)}
.panel h3{margin:0;font-size:1.02rem}
.panel header p{margin:0;color:var(--mut);font-size:.8rem;flex:1}
.panel .close{margin-left:auto;border:0;background:none;cursor:pointer;
  font-size:1.35rem;line-height:1;color:var(--mut);padding:0 .25rem;
  text-decoration:none}
.panel .close:hover{color:var(--ink)}
/* Высота ограничена: у Нью-Джерси 146 строк, и без прокрутки панель выталкивает
   карту за экран, а человек теряет то, по чему кликнул. */
.panel .scroll{max-height:22rem;overflow:auto}
.panel table{width:100%;border-collapse:collapse;font-size:.83rem}
.panel th{position:sticky;top:0;background:var(--white);text-align:left;
  padding:.5rem 1rem;border-bottom:1px solid var(--line);font-size:.74rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.panel td{padding:.42rem 1rem;border-bottom:1px solid var(--line)}
/* Выравнивание задаётся ПО СТОЛБЦУ, а не по типу ячейки: сначала заголовки
   стояли слева, а числа справа, и столбцы визуально разъезжались. Ширины тоже
   фиксированы — иначе браузер раздаёт их по содержимому, и у штата с одним
   рынком таблица выглядит иначе, чем у штата со 146. */
.panel table{table-layout:fixed}
.panel th:nth-child(1),.panel td:nth-child(1){width:auto}
.panel th:nth-child(2),.panel td:nth-child(2){width:7.5rem}
.panel th:nth-child(3),.panel td:nth-child(3){width:8rem;text-align:right}
.panel th:nth-child(4),.panel td:nth-child(4){width:9.5rem;text-align:right}
.panel td:nth-child(2),.panel td:nth-child(3),.panel td:nth-child(4){
  font-variant-numeric:tabular-nums;white-space:nowrap}
.panel td:nth-child(4){color:var(--mut)}
.panel td:nth-child(1){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel tbody tr:hover{background:var(--bg)}
.panel tr.nocards td:first-child{color:var(--mut)}
.panel td i{font-style:normal;opacity:.6}
.panel .foot{margin:0;padding:.6rem 1rem;border-top:1px solid var(--line);
  color:var(--mut);font-size:.74rem}
.st.pinned{stroke:var(--ink);stroke-width:2}