/* Heatmap viewer: the framed page is the hero, controls and the ranked lists stay quiet around it (owner.css tokens). */
.hm-main{max-width:1500px}
.hm-status{min-height:1.4em;font-size:.88rem;color:var(--muted)}.hm-status[data-tone="warn"]{color:var(--warn);font-weight:700}
.hm-gate{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:8px}
.hm-controls{display:flex;flex-wrap:wrap;align-items:end;gap:12px 18px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.hm-field{display:grid;gap:4px;font-size:.8rem;font-weight:700;color:var(--muted)}
.hm-field select{min-width:12rem;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-weight:600}
.hm-seg{display:inline-flex;margin:0;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.hm-seg label{position:relative;cursor:pointer}.hm-seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.hm-seg span{display:block;padding:6px 12px;border-radius:8px;font-size:.87rem;font-weight:700;color:var(--muted);transition:background .15s ease,color .15s ease}
.hm-seg input:checked+span{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #4b4a6726}
.hm-seg input:focus-visible+span{outline:2px solid var(--rose-deep);outline-offset:1px}
.hm-summary{font-size:1rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.hm-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.hm-stage{position:relative;margin:0;min-height:320px;padding:14px;background:#2f2c46;border-radius:18px;overflow:hidden}
.hm-frame-wrap{position:relative;margin:0 auto;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 10px 30px #0006}
.hm-frame-wrap iframe{display:block;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.hm-legend{position:sticky;bottom:10px;display:flex;align-items:center;gap:8px;width:max-content;margin:12px auto 0;padding:6px 12px;border-radius:999px;background:#fffffff0;font-size:.8rem;font-weight:700;color:var(--muted)}
.hm-ramp{display:inline-block;width:120px;height:10px;border-radius:5px;background:linear-gradient(90deg,#285aff,#00c8dc,#3cdc50,#ffdc00,#f02828)}
.hm-empty{position:absolute;inset:24px 24px auto;z-index:1;padding:12px 14px;border-radius:12px;background:var(--warn-bg);color:var(--warn);font-weight:700;text-align:center}
.hm-side{position:sticky;top:70px;display:grid;gap:18px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.hm-reach,.hm-targets{display:grid;gap:8px}
.hm-reach li,.hm-targets li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;font-size:.86rem}
.hm-reach-at,.hm-target{color:var(--ink);overflow-wrap:anywhere}
.hm-bar{grid-column:1/-1;grid-row:2;height:6px;border-radius:3px;background:var(--panel);position:relative;overflow:hidden}
.hm-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0);border-radius:3px;background:var(--rose-deep)}
.hm-reach li b,.hm-targets li b{font-variant-numeric:tabular-nums}
.hm-rage{margin-left:8px;padding:1px 7px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:.74rem;font-style:normal;font-weight:800}
@media (max-width:1100px){.hm-layout{grid-template-columns:minmax(0,1fr)}.hm-side{position:static}}