/* ============================================================================
   heatmap-grid.css -- widget #19 (rows x cols matrix -> detail)

   the scaffold's .cw-grid holds the cells; column labels and row labels are
   aligned chrome around it (fixed cell sizing keeps the three grids in lockstep).
   cell color intensity encodes the value through a theme-token ramp
   (surface -> accent) via color-mix, so no per-cell hard-coded hex.
   ============================================================================ */

.cw-hm {
    --cw-hm-cell-h: 50px;
    --cw-hm-cell-w: 80px;
    --cw-hm-gut: 104px;
    --cw-hm-gap: 6px;
}

.cw-hm-matrix { overflow-x: auto; padding-bottom: 2px; }

/* column-label row: a leading gutter cell, then one label per column */
.cw-hm-collabels {
    display: grid;
    grid-template-columns: var(--cw-hm-gut) repeat(var(--cw-hm-cols), var(--cw-hm-cell-w));
    gap: var(--cw-hm-gap);
    margin-bottom: var(--cw-hm-gap);
    min-width: max-content;
}
.cw-hm-collabel {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cw-muted);
    text-align: center;
    line-height: 1.25;
    align-self: end;
}

.cw-hm-body {
    display: flex;
    gap: var(--cw-hm-gap);
    min-width: max-content;
    align-items: start;
}

/* row labels: one fixed-height cell per row, lining up with the cell grid */
.cw-hm-rowlabels {
    display: grid;
    gap: var(--cw-hm-gap);
    width: var(--cw-hm-gut);
    flex-shrink: 0;
}
.cw-hm-rowlabel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--cw-text);
    line-height: 1.2;
    height: var(--cw-hm-cell-h);
}

/* the scaffold mount: its grid is the cell matrix */
.cw-hm-mount { min-width: 0; }
.cw-hm .cw-grid {
    grid-template-columns: repeat(var(--cw-cols), var(--cw-hm-cell-w));
    gap: var(--cw-hm-gap);
}
.cw-hm .cw-item {
    padding: 0;
    gap: 0;
    overflow: hidden;
    border-color: var(--cw-border);
}
.cw-hm .cw-item--selected { background: var(--cw-surface); }

.cw-hm-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--cw-hm-cell-h);
    padding: 0 5px;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cw-text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    background: color-mix(in srgb, var(--cw-accent) var(--cw-hm-i, 0%), var(--cw-surface));
}
.cw-hm-cell--empty {
    color: var(--cw-muted);
    text-shadow: none;
    background:
        repeating-linear-gradient(-45deg, transparent, transparent 4px, color-mix(in srgb, var(--cw-border) 70%, transparent) 4px, color-mix(in srgb, var(--cw-border) 70%, transparent) 5px);
}

/* the detail panel pins to the left edge so it stays readable when the matrix
   scrolls horizontally; pulled left by the row-label gutter so its left edge is
   flush with the widget (and the matrix), not inset under the cells */
.cw-hm .cw-detail {
    position: sticky;
    left: 0;
    margin-left: calc(-1 * (var(--cw-hm-gut) + var(--cw-hm-gap)));
    min-width: 240px;
    /* cap the detail's intrinsic width so a long paragraph can't inflate the
       matrix layout (and force horizontal scroll); it wraps to a readable measure */
    max-width: 620px;
    overflow-wrap: break-word;
}

.cw-hm-val {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cw-accent);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* --- legend ramp --- */

.cw-hm-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.72rem;
    color: var(--cw-muted);
}
.cw-hm-legend-label { margin-right: 2px; }
.cw-hm-legend-ramp {
    width: 120px;
    height: 9px;
    border-radius: 100px;
    border: 1px solid var(--cw-border);
    background: linear-gradient(to right, var(--cw-surface), var(--cw-accent));
}