/* 热力图 (market-heatmap.html) — Longbridge /markets/heatmap replica.

   Geometry measured from longbridge.com (1440 / 375, see
   reference/longbridge/_audit_heatmap/): card 1px #dbdde1 radius 8 padding 20,
   control pills 28px radius 8 on #f0f2f4 with 14px text, legend chips 24px with
   radius 6 and 12px white text, canvas 1118x550, tile text 14px weight 500 white,
   hover card radius 8 with a two-layer shadow.

   Colours come from the clarity tokens: the tile ramp is the cibo up/down pair
   (teal up, pink down) and the neutral band takes the brand ink. */

.mh-body{display:flex;flex-direction:column;min-height:600px}

/* ── Toolbar ──────────────────────────────────────────── */
.mh-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.mh-toolbar-left,.mh-toolbar-right{display:flex;align-items:center;gap:8px;min-width:0}
.mh-menu{position:relative}
.mh-menu-btn{display:inline-flex;align-items:center;gap:4px;height:28px;max-width:220px;padding:0 6px;
  border:0;border-radius:8px;background:#f0f2f4;color:var(--cl-muted,#696e77);
  font-size:14px;font-weight:500;line-height:14px;cursor:pointer}
.mh-menu-btn:hover{color:var(--cl-ink,#070a13)}
.mh-menu-btn svg{width:16px;height:16px;flex:none}
.mh-menu-btn .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh-popover{position:absolute;top:calc(100% + 4px);left:0;z-index:60;min-width:10rem;max-width:320px;
  max-height:20rem;overflow-y:auto;padding:4px 0;background:#fff;border-radius:12px;
  box-shadow:0 6px 24px rgba(7,10,19,.14);box-sizing:border-box}
.mh-popover[hidden]{display:none}
.mh-popover-sector{left:auto;right:0;min-width:15rem}
.mh-popover-scale{min-width:14rem}
.mh-popover-group{padding:6px 12px;color:var(--cl-muted,#696e77);font-size:14px;font-weight:600}
/* Three columns — label | value | tick — so the middle and right columns line up
   down the list. The tick slot is always occupied; only its glyph comes and goes. */
.mh-popover-item{display:grid;grid-template-columns:1fr auto 16px;align-items:center;gap:8px;
  padding:8px 12px;color:var(--cl-ink,#070a13);font-size:14px;line-height:20px;text-decoration:none;cursor:pointer}
.mh-popover-item:hover{background:#f0f2f4}
.mh-popover-item.is-on{font-weight:600}
.mh-tick{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--cl-brand,#7560d6)}
.mh-tick svg{width:14px;height:14px}
.mh-popover-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh-muted{color:var(--cl-muted,#696e77);font-weight:400;font-variant-numeric:tabular-nums}
.mh-popover-check{min-width:9rem;padding:4px}
.mh-check{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;
  color:var(--cl-ink,#070a13);font-size:14px;text-decoration:none}
.mh-check:hover{background:#f0f2f4}
.mh-check-box{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;
  border:1px solid var(--cl-rule,#dbdde1);border-radius:4px}
.mh-check.is-on .mh-check-box{background:var(--cl-brand,#7560d6);border-color:var(--cl-brand,#7560d6);color:#fff}
.mh-check-box svg{width:12px;height:12px}

/* ── Legend ───────────────────────────────────────────── */
.mh-legend{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.mh-legend::-webkit-scrollbar{display:none}
.mh-legend-chip{display:inline-flex;align-items:center;justify-content:center;min-width:48px;
  padding:4px 8px;border-radius:6px;color:#fff;font-size:12px;font-weight:500;line-height:16px;white-space:nowrap}

/* ── Status row ───────────────────────────────────────── */
.mh-status{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 0}
.mh-status-left{font-size:14px;line-height:20px;color:var(--cl-ink,#070a13)}
.mh-status-left b{font-weight:500;font-variant-numeric:tabular-nums}

/* ── Treemap ──────────────────────────────────────────── */
.mh-canvas-wrap{position:relative}
/* The layout is computed for a fixed canvas, so the SVG scales uniformly
   (no preserveAspectRatio="none") — stretching it would distort tile text. */
.mh-canvas{display:block;width:100%;height:auto;aspect-ratio:1118/550;max-height:70vh}
.mh-tile{cursor:pointer}
.mh-tile rect{stroke:#fff;stroke-width:2;transition:filter .12s ease}
.mh-tile:hover rect{filter:brightness(1.08)}
.mh-tile.is-on rect{stroke:var(--cl-ink,#070a13);stroke-width:3}
.mh-tile-text{font-size:14px;font-weight:500;fill:#fff;pointer-events:none}
.mh-tile-name{font-weight:500}
.mh-tile-value{font-variant-numeric:tabular-nums}

/* ── Drill-down table ─────────────────────────────────── */
.mh-table-wrap{margin-top:20px;max-height:420px;overflow:auto;border:1px solid var(--cl-rule,#dbdde1);border-radius:8px}
.mh-table{width:100%;border-collapse:collapse;font-size:14px}
.mh-table-caption{padding:10px 12px;text-align:left;color:var(--cl-muted,#696e77);font-size:13px}
.mh-table th,.mh-table td{padding:8px 12px;border-bottom:1px solid var(--cl-rule,#dbdde1);text-align:left;font-weight:400}
.mh-table thead th{position:sticky;top:0;background:#f8f9fa;color:var(--cl-muted,#696e77);font-weight:500}
.mh-table th[scope=row] a{color:var(--cl-ink,#070a13);text-decoration:none}
.mh-table th[scope=row] a:hover{color:var(--cl-brand,#7560d6)}
.mh-code{margin-left:6px;color:var(--cl-muted,#696e77);font-variant-numeric:tabular-nums}
.mh-num{text-align:right;font-variant-numeric:tabular-nums}
.mh-table .is-up{color:var(--c-teal,#2dd4bf)}
.mh-table .is-down{color:var(--c-pink,#f472b6)}

/* ── Note ─────────────────────────────────────────────── */

/* ── Hover card ───────────────────────────────────────── */
.mh-hover{position:fixed;z-index:80;width:346px;max-width:calc(100vw - 24px);padding:12px;
  background:#fff;border-radius:8px;box-shadow:0 1px 2px 10px rgba(0,0,0,.06),0 1px 10px rgba(0,0,0,.16);
  box-sizing:border-box;pointer-events:none}
.mh-hover[hidden]{display:none}
.mh-hover-title{font-size:14px;font-weight:600;line-height:20px;color:var(--cl-ink,#070a13)}
.mh-hover-meta{display:flex;gap:20px;margin:8px 0 10px;font-size:12px;color:var(--cl-muted,#696e77)}
.mh-hover-meta b{margin-left:6px;color:var(--cl-ink,#070a13);font-weight:500}
.mh-hover-rows{max-height:280px;overflow:auto}
.mh-hover-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13px;color:var(--cl-ink,#070a13)}
.mh-hover-row-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh-hover-row-num{display:flex;gap:12px;color:var(--cl-muted,#696e77);font-weight:500;font-variant-numeric:tabular-nums}

/* ── Mobile: 375px, Longbridge stacks the controls, the legend scrolls ── */
@media (max-width:768px){
  .mh-body{min-height:0}
  .mh-toolbar{gap:8px}
  .mh-toolbar-right{width:100%;justify-content:space-between}
  .mh-legend{flex:1}
  .mh-hover{width:calc(100vw - 24px)}
  .mh-table-wrap{max-height:none}
}