/* ═══ «Часы и дни недели» ═══
   Общие переменные, шапка, кнопки и подвал — из styles.css. */

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

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

.hr-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.hr-field{display:flex;flex-direction:column;gap:6px}
.hr-field label{font-size:12.5px;color:var(--ink-faint)}
.hr-field select{padding:10px 13px;font:inherit;font-size:15px;
  border:1px solid var(--line-2);border-radius:11px;background:var(--card);
  color:var(--ink);cursor:pointer;min-width:240px}
.hr-field select:focus{outline:0;border-color:var(--green)}
.hr-meta{font-size:12.5px;color:var(--ink-faint);padding-block-end:11px}

/* ── Выводы словами ── */
.hr-facts{display:grid;gap:12px;grid-template-columns:repeat(4,1fr);
  margin-block:clamp(18px,2.2vw,26px) 14px}
.hr-fact{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;box-shadow:var(--shadow-sm)}
.hr-fact span{display:block;font-size:12.5px;color:var(--ink-faint);
  margin-block-end:6px}
.hr-fact b{display:block;font-size:clamp(18px,2vw,23px);font-weight:800;
  letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.hr-fact i{display:block;font-style:normal;font-size:12.5px;
  color:var(--ink-soft);margin-block-start:5px}

/* ── Карта 7×24 ── */
.hr-box{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:clamp(16px,2vw,22px);box-shadow:var(--shadow-sm);
  margin-block-end:14px}
.hr-box-head{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:10px;margin-block-end:6px}
.hr-box h2{font-size:16px;font-weight:700;margin:0}
.hr-box p.hint{font-size:12.5px;line-height:1.55;color:var(--ink-faint);
  margin:0 0 14px;max-width:78ch}

.hr-map{display:grid;grid-template-columns:auto repeat(24,1fr);gap:3px;
  min-width:0}
.hr-map .lbl{font-size:11px;color:var(--ink-faint);display:flex;
  align-items:center;justify-content:flex-end;padding-inline-end:8px;
  white-space:nowrap}
.hr-map .top{font-size:10.5px;color:var(--ink-faint);text-align:center;
  padding-block-end:2px}
.hr-cell{aspect-ratio:1;border-radius:4px;background:var(--bg-3);
  position:relative;cursor:default}
.hr-cell.na{background:repeating-linear-gradient(45deg,var(--bg-2),
  var(--bg-2) 3px,var(--bg-3) 3px,var(--bg-3) 6px)}

/* Подсказка над клеткой: без неё карта красивая, но нечитаемая. */
.hr-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.5;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.5);white-space:nowrap}
.hr-tip b{color:#8fe3c0}

.hr-scale{display:flex;align-items:center;gap:8px;margin-block-start:12px;
  font-size:11.5px;color:var(--ink-faint)}
.hr-scale i{display:block;height:8px;width:110px;border-radius:99px;
  background:linear-gradient(90deg,#eef6f2,#0d9668)}

/* ── Столбики по часам и дням ── */
.hr-two{display:grid;gap:14px;grid-template-columns:1.6fr 1fr}
.hr-bars{display:grid;gap:3px;grid-auto-flow:column;align-items:end;
  height:190px;margin-block-start:8px}
.hr-bar{background:var(--green-wash);border-radius:4px 4px 0 0;position:relative;
  min-height:2px}
.hr-bar.top{background:var(--green)}
.hr-bar span{position:absolute;inset-block-end:-19px;inset-inline:0;
  text-align:center;font-size:10px;color:var(--ink-faint)}
.hr-bars-wrap{padding-block-end:22px}

.hr-note{max-width:80ch;margin:clamp(18px,2.2vw,26px) 0 0;font-size:12.5px;
  line-height:1.6;color:var(--ink-faint)}

@media (max-width:1000px){
  .hr-facts{grid-template-columns:repeat(2,1fr)}
  .hr-two{grid-template-columns:1fr}
}
@media (max-width:700px){
  /* Карта 7×24 в 360 пикселей не помещается: клетка была бы в 11 пикселей
     и подписи часов слились бы. Уводим её в прокрутку — это единственный
     элемент на сайте, который иначе не показать честно. */
  .hr-map-scroll{overflow-x:auto}
  .hr-map{min-width:560px}
  .hr-facts{grid-template-columns:1fr}
  .hr-field select{min-width:0;width:100%}
  .hr-field{flex:1 1 100%}
}