/* ═══ Тепловая карта рынка ═══
   Общие переменные, шапка, кнопки и подвал — из styles.css. */

.hm-main{padding-block:0 clamp(30px,4vw,50px)}

.hm-head{padding-block:0 clamp(16px,2vw,22px);
  background:linear-gradient(180deg,#f7fbf9,var(--card) 70%)}
.hm-main h1{font-size:clamp(28px,3.6vw,42px);line-height:1.15;
  letter-spacing:-.03em;font-weight:800;margin:0 0 12px}
.hm-lede{font-size:14.5px;line-height:1.6;color:var(--ink-soft);
  max-width:70ch;margin:0 0 clamp(14px,1.8vw,20px)}
.hm-when{color:var(--ink-faint)}

/* ── Настройки ── */
.hm-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hm-tools select{padding:9px 12px;font:inherit;font-size:14px;
  border:1px solid var(--line-2);border-radius:11px;background:var(--card);
  color:var(--ink);cursor:pointer}
.hm-tools select:focus{outline:0;border-color:var(--green)}
.hm-per{display:flex;flex-wrap:wrap;gap:6px}
.hm-p{padding:8px 13px;font:inherit;font-size:13px;font-weight:600;
  border-radius:9px;border:1px solid var(--line-2);background:var(--card);
  color:var(--ink-soft);cursor:pointer;transition:.15s}
.hm-p:hover{border-color:var(--green);color:var(--green-deep)}
.hm-p.on{background:var(--green);border-color:var(--green);color:#fff}

/* ── Полотно ── */
.hm-wrap{position:relative;margin-block-start:clamp(16px,2vw,22px);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--bg-2);box-shadow:var(--shadow-sm)}
.hm-box{position:relative;width:100%;height:clamp(420px,58vh,720px)}

/* Плитка: площадь — капитализация, цвет — изменение. Рамка белая, чтобы
   соседние плитки не сливались в одно пятно. */
.hm-tile{position:absolute;overflow:hidden;border:1.5px solid var(--card);
  border-radius:5px;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-decoration:none;text-align:center;padding:2px;
  transition:filter .12s}
.hm-tile:hover{filter:brightness(1.08)}
.hm-tile b{display:block;font-weight:700;line-height:1.1;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.25)}
.hm-tile span{display:block;line-height:1.15;color:rgba(255,255,255,.92);
  font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.25)}
/* На светлых плитках белый текст не читается — там переключаемся на тёмный. */
.hm-tile.pale b,.hm-tile.pale span{color:var(--ink);text-shadow:none}

.hm-tip{position:fixed;z-index:80;pointer-events:none;display:none;
  background:var(--ink-band);color:#fff;border-radius:10px;padding:9px 12px;
  font-size:12.5px;line-height:1.55;box-shadow:0 12px 28px -12px rgba(0,0,0,.5);
  white-space:nowrap}
.hm-tip b{color:#8fe3c0}

.hm-scale{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-block-start:12px;font-size:12px;color:var(--ink-faint)}
.hm-scale i{display:block;height:9px;width:160px;border-radius:99px;
  background:linear-gradient(90deg,#c0392b,#e0483a,#eceef1,#3fbf8a,#0a7a54)}

.hm-note{max-width:80ch;margin:clamp(16px,2vw,24px) 0 0;font-size:12.5px;
  line-height:1.6;color:var(--ink-faint)}
.hm-empty{display:grid;place-items:center;height:100%;color:var(--ink-faint);
  font-size:14px;padding:20px;text-align:center}

@media (max-width:700px){
  .hm-box{height:clamp(360px,64vh,560px)}
  .hm-tools select,.hm-per{flex:1 1 100%}
}