/* heatmaps/assets/css/heatmap.css — viewer + widget. Uses GhostStat tokens with fallbacks. */
.hm-toolbar { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
.hm-field { min-width:120px; }
.hm-field.hm-grow { flex:1 1 260px; min-width:0; }
.hm-tabs { display:flex; gap:6px; flex-wrap:wrap; }

.hm-legend { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted,#8C95A1); margin-bottom:10px; }
.hm-scale { flex:0 0 160px; height:10px; border-radius:6px;
  background:linear-gradient(90deg,#2850DC 0%,#1EAA78 35%,#F0D228 60%,#F08C1E 80%,#DC2828 100%); }

.hm-stage { width:100%; }
.hm-stage-inner { position:relative; width:100%; min-height:220px; border:1px solid var(--line,#E7ECF2);
  border-radius:var(--r-card,14px); overflow:hidden; background:#F7F9FB; }
/* the screenshot sets the stage height (full page, width-scaled); the canvas overlays it exactly. */
.hm-stage-inner img.hm-shot { display:block; width:100%; height:auto; }
.hm-stage-inner canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hm-noshot { position:absolute; left:0; right:0; top:0; z-index:2; margin:10px; padding:10px 12px;
  background:rgba(255,255,255,.92); border:1px solid var(--line,#E7ECF2); border-radius:8px;
  color:var(--muted,#6B7482); font-size:12.5px; line-height:1.5; }
.hm-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted,#8C95A1); font-size:14px; text-align:center; padding:20px; background:rgba(247,249,251,.75); }

/* widget: Top Hot Pages */
.hm-hot { padding:8px 0; border-top:1px solid var(--line,#EEF1F5); }
.hm-hot:first-of-type { border-top:0; }
.hm-hot-top { display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:5px; }
.hm-hot-url { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2,#3C4350); }
.hm-hot-n { font-weight:700; color:var(--ink,#1A1D24); flex-shrink:0; }
.hm-hot-bar { height:6px; border-radius:4px; background:var(--bg,#EEF2F6); overflow:hidden; }
.hm-hot-bar i { display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,#1EAA78,#F0D228 70%,#F08C1E); }

/* segmented + tab fallbacks (used only if the base design system isn't present) */
.cc-seg-wide { display:inline-flex; border:1px solid var(--line,#E7ECF2); border-radius:10px; overflow:hidden; }
.cc-seg-wide button { border:0; background:#fff; padding:7px 12px; font-size:13px; font-weight:600;
  color:var(--ink-2,#3C4350); cursor:pointer; }
.cc-seg-wide button.on { background:var(--accent-soft,#E7F5EC); color:var(--accent-2,#178A52); }

@media (max-width:640px) {
  .hm-field, .hm-field.hm-grow { flex:1 1 100%; min-width:0; }
  .hm-stage-inner { height:420px; }
  .hm-scale { flex-basis:100px; }
}

/* range sliders (opacity/intensity) — visible track + thumb */
.hm-toolbar input[type=range]{ -webkit-appearance:none; appearance:none; width:150px; height:6px; border-radius:4px;
  background:linear-gradient(90deg,#1FA463,#CFE9DB); outline:none; margin:8px 0; vertical-align:middle; }
.hm-toolbar input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px;
  border-radius:50%; background:#1FA463; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer; }
.hm-toolbar input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#1FA463;
  border:2px solid #fff; cursor:pointer; }

/* cross-link to Session Recording (shown when recordings exist for the selected page) */
.hm-legend-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.hm-reclink{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:8px;
  background:#EAF1FE;color:#1F5FD0;font-size:13px;font-weight:600;text-decoration:none;
  border:1px solid #D3E1FB;transition:background .12s,border-color .12s}
.hm-reclink:hover{background:#DCE8FC;border-color:#B9D0F6;color:#1B54BC}
.hm-reclink .hm-rec-fr{display:inline-block;margin-left:2px;padding:1px 7px;border-radius:999px;
  background:#FCE8E8;color:#B91C1C;font-size:11px;font-weight:700}

/* Shared date-range picker (normalised to /devicedetector) */
.mb-pill{position:relative;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--line-2,#D0D4DA);border-radius:6px;background:#fff;font-size:12.5px;font-weight:600;color:var(--ink-2,#3C4350);cursor:pointer;white-space:nowrap}
.mb-pill .car{font-size:11px;color:var(--muted-2,#AAB2BD)}
.rangepick{background:#fff;border:1px solid var(--line,#E9EDF3);border-radius:10px;box-shadow:0 12px 30px rgba(16,24,40,.16);min-width:236px;padding:6px}
.rangepick .rp-presets{display:flex;flex-direction:column}
.rangepick .rm{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:6px;font-weight:600;font-size:13px;color:var(--ink-2,#3C4350);border:0;background:none;cursor:pointer}
.rangepick .rm:hover{background:#F5F7FA}
.rangepick .rm.on{background:var(--accent-soft,#E7F5EC);color:var(--accent-2,#178A52)}
.rangepick .rp-custom{border-top:1px solid #EEF1F6;margin-top:6px;padding:10px 10px 8px}
.rangepick .rp-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted,#8C95A1);margin-bottom:8px}
.rangepick .rp-dates{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rangepick .rp-dates input[type=date]{flex:1;min-width:0;height:32px;border:1px solid var(--line-2,#D0D4DA);border-radius:6px;padding:0 8px;font-size:12.5px;color:var(--ink-2,#3C4350);background:#fff}
.rangepick .rp-dates input[type=date]:focus{outline:none;border-color:var(--accent,#1FA463);box-shadow:0 0 0 3px rgba(31,164,99,.14)}
.rangepick .rp-arrow{color:var(--muted-2,#AAB2BD);font-weight:700}
.rangepick .rp-apply{width:100%;height:34px;border:0;border-radius:6px;background:var(--accent,#1FA463);color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.rangepick .rp-apply:hover{background:var(--accent-2,#178A52)}