/* /skills-gap-matrix-builder only: the gap heatmap. Scoped under #smApp; colours are existing tokens. */
#smApp .sm-scroll { overflow: auto; max-width: 100%; border: 1px solid var(--bm-line); border-radius: 12px; margin: 12px 0; }
#smApp .sm-heat { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .84rem; min-width: 100%; }
#smApp .sm-heat th, #smApp .sm-heat td { padding: 6px 8px; border: 1px solid var(--bm-line-2); text-align: center; white-space: nowrap; overflow-wrap: normal; }
#smApp .sm-heat th:first-child, #smApp .sm-heat td:first-child { text-align: left; position: sticky; left: 0; background: var(--bm-surface); z-index: 1; }
#smApp .sm-heat thead th { background: var(--bm-bg); color: var(--bm-ink); font-weight: 800; }
#smApp .sm-heat tfoot td { background: var(--bm-bg); font-weight: 700; }
#smApp .sm-heat td.is-met { background: var(--ic-ok-soft); color: var(--bm-ink); }
#smApp .sm-heat td.is-gap1 { background: var(--ic-warn-soft); color: var(--bm-ink); }
#smApp .sm-heat td.is-gap2 { background: var(--ic-bad-soft); color: var(--bm-ink); font-weight: 700; }
#smApp .sm-heat td.is-na { color: var(--bm-ink-3); }
#smApp .sm-heat small { display: block; color: var(--bm-ink-2); font-size: .72rem; }
#smApp .sm-key { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--bm-ink-2); margin: 0; padding: 0; list-style: none; }
#smApp .sm-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; border: 1px solid var(--bm-line-2); }
@media (forced-colors: active) { #smApp .sm-heat td.is-gap2 { text-decoration: underline; } #smApp .sm-heat td.is-gap1 { font-style: italic; } }