/* Sector Heat Map (on the site's shared styles and theme) */
.hm-main { max-width: none; padding: 26px clamp(20px, 3vw, 64px) 40px; }
.hm-main h1 { margin: 0 0 4px; font-size: clamp(28px, 3.4vw, 40px); font-stretch: 112%; letter-spacing: -0.01em; }
.hm-sub { margin: 0 0 14px; color: var(--graphite); font-size: 14px; }
.hm-sub b { color: var(--ink); }
.hm-bar { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin: 6px 0 14px; }
.hm-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.hm-seg button { all: unset; cursor: pointer; padding: 7px 13px; font-size: 13.5px; font-weight: 650; color: var(--graphite); }
.hm-seg button[aria-pressed="true"] { background: #7A1E2C; color: #fff; }
.hm-seg button:focus-visible { outline: 2px solid #7A1E2C; outline-offset: -2px; }
.hm-count { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.p-up { color: #157F4C; border-color: #157F4C55; background: #157F4C0d; } .p-dn { color: #C0262D; border-color: #C0262D55; background: #C0262D0d; }
.p-ob { color: #B45309; border-color: #B4530955; background: #B453090d; } .p-os { color: #1D4ED8; border-color: #1D4ED855; background: #1D4ED80d; }
.p-nt, .p-bd { color: #5F5557; border-color: #5F555744; }
.hm-legend { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--graphite); }
.hm-legend .scale { width: 220px; height: 12px; border-radius: 6px; }
.hm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.hm-h { margin: 4px 0 8px; font-size: 14px; font-weight: 750; color: var(--graphite); text-transform: uppercase; letter-spacing: 0.06em; }
.hm-h span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.hm-tree { position: relative; height: 440px; margin-bottom: 18px; }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.hm-tile { all: unset; box-sizing: border-box; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; position: relative; overflow: hidden; transition: box-shadow 0.12s; }
.hm-tree .hm-tile { position: absolute; border: 3px solid #fff; }
.hm-grid .hm-tile { min-height: 108px; }
.hm-tile:hover, .hm-tile.sel, .hm-tile:focus-visible { box-shadow: 0 0 0 3px #1E1A1B inset, 0 8px 18px rgba(0, 0, 0, 0.16); }
.t-sym { font-weight: 800; font-size: 19px; letter-spacing: 0.01em; line-height: 1.1; }
.t-name { font-size: 12.5px; opacity: 0.92; line-height: 1.25; margin-top: 2px; }
.t-chg { font-size: 22px; font-weight: 800; line-height: 1.1; }
.t-cap { font-size: 12px; opacity: 0.95; margin-top: 2px; }
.t-st { position: absolute; top: 9px; right: 9px; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); }
.hm-tile.hm-big .t-sym { font-size: 34px; } .hm-tile.hm-big .t-name { font-size: 15px; } .hm-tile.hm-big .t-chg { font-size: 40px; } .hm-tile.hm-big .t-cap { font-size: 14px; }
.hm-tile.hm-small .t-name, .hm-tile.hm-small .t-st, .hm-tile.hm-small .t-cap { display: none; }
.hm-tile.hm-small .t-sym { font-size: 15px; } .hm-tile.hm-small .t-chg { font-size: 16px; } .hm-tile.hm-small { padding: 7px 8px; }
.hm-tile.hm-narrow .t-st { position: static; display: inline-block; margin: 4px 0 0; width: fit-content; }
.hm-note { color: var(--graphite); font-size: 12.5px; margin-top: 14px; max-width: 110ch; }
.hm-side { position: sticky; top: 12px; background: #FAF8F8; border: 1px solid #E7E1E2; border-radius: 14px; padding: 18px; }
.hm-side h2 { margin: 0; font-size: 30px; font-weight: 800; }
.hm-side .nm { color: var(--graphite); margin: 0 0 6px; }
.hm-side .capline { margin: 0 0 10px; font-size: 14px; }
.kv3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; margin: 8px 0 12px; }
.kv3 span { display: block; font-size: 12px; color: var(--graphite); } .kv3 b { font-size: 17px; }
.rsi-bar { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #1D4ED8 0%, #93C5FD 30%, #E5E7EB 30%, #E5E7EB 70%, #FDBA74 70%, #B45309 100%); margin: 6px 0 4px; }
.rsi-bar i { position: absolute; top: -5px; width: 3px; height: 22px; background: #1E1A1B; border-radius: 2px; }
.rsi-lab { display: flex; justify-content: space-between; font-size: 11px; color: var(--graphite); }
.why { font-size: 13.5px; line-height: 1.55; color: #3A3133; margin: 10px 0; }
.hist { margin: 14px 0 12px; padding: 12px 14px; border-radius: 10px; background: #FFFFFF; border: 1px solid #E7E1E2; }
.hist-h { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #7A1E2C; }
.hist.drive .hist-h { color: #1E1A1B; }
.hist-t { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: #2A2224; }
.hist-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hist-row span { display: block; font-size: 11.5px; color: var(--graphite); } .hist-row b { display: block; font-size: 16px; } .hist-row small { font-size: 11.5px; color: var(--graphite); }
.hist-n { margin: 8px 0 0; font-size: 11.5px; color: var(--graphite); }
table.drv { width: 100%; border-collapse: collapse; font-size: 13px; }
.drv th { text-align: left; font-size: 11.5px; color: var(--graphite); font-weight: 600; padding: 0 6px 4px 0; }
.drv td { padding: 5px 6px 5px 0; border-top: 1px solid #EFEAEA; }
.drv td:nth-child(2), .drv td:nth-child(3), .drv th:nth-child(2), .drv th:nth-child(3) { text-align: right; }
.hm-side .tv-link { font-size: 14px; }
@media (max-width: 1100px) { .hm-wrap { grid-template-columns: minmax(0, 1fr); } .hm-side { position: static; } }
@media (max-width: 700px) { .hm-tree { height: 620px; } }

/* phones and tablets: a tap scrolls to the panel; this link goes back to the map */
.hm-back { display: none; font-size: 13.5px; font-weight: 650; color: #7A1E2C; margin: 0 0 8px; text-decoration: none; }
@media (max-width: 1100px) { .hm-back { display: inline-block; } .hm-side { scroll-margin-top: 12px; } }

/* TradingView price box in the side panel (the shared theme removes its border and lines the logo up with the heading) */
.hm-side .hm-quote { margin: 4px 0 8px; max-width: 100%; }
.hm-side .hm-quote .lq-credit { font-size: 11.5px; }