.range-control .segmented { white-space: nowrap; }
.market-toolbar { gap: 12px 20px; align-items: center; }
.market-toolbar > p { flex: 1 1 240px; text-align: right; }
#heatmap-control select { max-width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 6px 25px 6px 10px; color: var(--ink); background: white; }
.heatmap-panel { padding: 12px 16px 0; overflow: hidden; }
.heatmap-columns, .heatmap-row { display: grid; grid-template-columns: minmax(100px, .8fr) repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.heatmap-columns { padding: 8px 0 14px; color: var(--muted); font-size: 11px; }
.heatmap-columns > :first-child { padding-left: 10px; }
.heatmap-columns .market-product-heading { padding-left: 12px; }
.heatmap-row { margin-bottom: 8px; }
.heatmap-market { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 10px; color: var(--muted); }
.heatmap-market strong { font-size: 12px; font-weight: 550; }
.heatmap-market > span { font-size: 10px; color: var(--forest-dark); }
.heatmap-row.is-selected .heatmap-market { color: var(--forest-dark); }
.heat-cell { position: relative; display: flex; min-width: 0; min-height: 72px; padding: 12px; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid transparent; border-radius: 7px; text-align: left; color: #26483e; background: #f0f4f2; font-variant-numeric: tabular-nums; transition: border-color .18s, box-shadow .18s; }
.heat-cell strong { font-size: 18px; font-weight: 600; letter-spacing: -.035em; line-height: 1.4; overflow-wrap: anywhere; }
.heat-cell:hover { border-color: #78998d; box-shadow: inset 0 0 0 1px #78998d; }
.heat-cell:focus-visible { z-index: 1; outline-offset: 1px; }
.heat-product { display: none; }
.heat-detail { margin-top: 2px; color: #40574f; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.heat-link { position: absolute; right: 9px; top: 6px; color: #40574f; opacity: 0; font-size: 13px; }
.heat-cell:hover .heat-link, .heat-cell:focus-visible .heat-link { opacity: 1; }
.heat-positive.heat-level-1 { background: #edf5f0; }
.heat-positive.heat-level-2 { background: #dceee3; }
.heat-positive.heat-level-3 { background: #c9e4d5; }
.heat-positive.heat-level-4 { background: #b1d9c3; }
.heat-positive.heat-level-5 { background: #95cab0; }
.heat-negative { color: #6e3c35; }
.heat-negative .heat-detail, .heat-negative .heat-link { color: #714a43; }
.heat-negative.heat-level-1 { background: #fbf0ed; }
.heat-negative.heat-level-2 { background: #f7e1da; }
.heat-negative.heat-level-3 { background: #f0cec4; }
.heat-negative.heat-level-4 { background: #e7b9ac; }
.heat-negative.heat-level-5 { background: #dca08f; }
.heat-zero { background: #eef1f2; color: #4d5a61; }
.heat-zero .heat-detail { color: #5c6870; }
.heat-missing { background: repeating-linear-gradient(135deg, #f6f7f8, #f6f7f8 5px, #f0f2f3 5px, #f0f2f3 6px); color: #5d6b75; }
.heat-unavailable { background: #f8f9f9; color: #5d6b75; border-color: #e8ecee; }
.heat-unavailable strong, .heat-error strong { font-size: 13px; letter-spacing: 0; }
.heat-missing .heat-detail, .heat-unavailable .heat-detail { color: #5d6b75; }
.heat-error { background: #fff3d8; color: #725522; border-color: #ecd8aa; }
.heat-error .heat-detail { color: #725522; }
.heatmap-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 20px; padding: 12px 0 14px; color: var(--muted); font-size: 10px; }
.heatmap-scale, .heatmap-state-key { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.heat-swatch { display: inline-block; width: 16px; height: 12px; border: 1px solid #d9e2de; border-radius: 2px; }
.heatmap-state-key .heat-error { border-color: #d8bf88; }
@media (max-width: 700px) {
  .market-toolbar > p { flex-basis: 100%; text-align: left; }
  .heatmap-panel { border: 0; padding: 0; background: transparent; overflow: visible; }
  .heatmap-columns { display: none; }
  .heatmap-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
  .heatmap-market { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; padding: 2px; }
  .heatmap-market strong { font-size: 13px; }
  .heat-cell { min-height: 100px; padding: 12px; }
  .heat-cell strong { font-size: 19px; }
  .heat-product { display: block; margin-bottom: 4px; color: #42534c; font-size: 11px; font-weight: 500; }
  .heat-link { opacity: 1; }
  .heatmap-legend { padding-block: 0 8px; }
}