.assessment-matrix { --assessment-matrix-axis-width: 10rem; --assessment-matrix-column-width: 3rem; width: 100%; max-width: 100%; min-width: 0; border: 1px solid var(--cui-border-color, #d8dbe0); border-radius: .75rem; background: var(--cui-card-bg, #fff); overflow: hidden; box-shadow: 0 4px 14px rgba(15, 23, 42, .035); }
.assessment-matrix__scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.assessment-matrix__table { width: max-content; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.assessment-matrix__table th,
.assessment-matrix__table td { border-right: 1px solid var(--cui-border-color, #d8dbe0); border-bottom: 1px solid var(--cui-border-color, #d8dbe0); }
.assessment-matrix__table thead th { width: var(--assessment-matrix-column-width); min-width: var(--assessment-matrix-column-width); max-width: var(--assessment-matrix-column-width); height: 6.5rem; padding: .2rem; overflow: visible; background: rgba(0,0,0,.045); font-size: .72rem; text-align: center; vertical-align: bottom; }
.assessment-matrix__table thead th[data-column-id] { position: relative; transform: skewX(-45deg); transform-origin: bottom; }
.assessment-matrix__corner + th[data-column-id] { border-left: 1px solid var(--cui-border-color, #d8dbe0); }
.assessment-matrix__axis { position: sticky; left: 0; z-index: 1; width: var(--assessment-matrix-axis-width); min-width: var(--assessment-matrix-axis-width); padding: .45rem .75rem; border-left: 1px solid var(--cui-border-color, #d8dbe0); background: var(--cui-card-bg, #fff); text-align: left; }
.assessment-matrix__table thead .assessment-matrix__axis { width: var(--assessment-matrix-axis-width); min-width: var(--assessment-matrix-axis-width); max-width: var(--assessment-matrix-axis-width); }
.assessment-matrix__corner { z-index: 2; background: var(--cui-tertiary-bg, #f3f4f7) !important; }
.assessment-matrix__corner--empty { border-right-color: transparent !important; border-bottom: 1px solid var(--cui-border-color, #d8dbe0) !important; background: transparent !important; }
.assessment-matrix__column-label { position: absolute; bottom: .35rem; left: 50%; width: 8rem; margin: 0; overflow: hidden; font-weight: 750; line-height: 1.1; text-align: left; text-overflow: ellipsis; white-space: nowrap; transform: skewX(45deg) rotate(-45deg); transform-origin: left center; }
.assessment-matrix__column-maximum { margin-top: .22rem; color: var(--cui-secondary-color, #6b7280); font-size: .66rem; font-weight: 500; }
.assessment-matrix__total-heading { position: relative; width: var(--assessment-matrix-column-width) !important; min-width: var(--assessment-matrix-column-width) !important; max-width: var(--assessment-matrix-column-width) !important; transform: skewX(-45deg); transform-origin: bottom; background: var(--cui-tertiary-bg, #f3f4f7) !important; }
.assessment-matrix__total-heading .assessment-matrix__sort-button,
.assessment-matrix__total-label { position: absolute; bottom: .35rem; left: 50%; width: 8rem; margin: 0; padding: 0; justify-content: flex-start; gap: .2rem; overflow: hidden; font-weight: 750; line-height: 1.1; text-align: left; text-overflow: ellipsis; white-space: nowrap; transform: skewX(45deg) rotate(-45deg); transform-origin: left center; }
.assessment-matrix__total-heading .assessment-matrix__sort-indicator { display: inline-flex; flex: 0 0 auto; transform: rotate(45deg); transform-origin: center; }
.assessment-matrix__evaluation-heading { position: relative; width: var(--assessment-matrix-column-width) !important; min-width: var(--assessment-matrix-column-width) !important; max-width: var(--assessment-matrix-column-width) !important; transform: skewX(-45deg); transform-origin: bottom; background: var(--cui-tertiary-bg, #f3f4f7) !important; }
.assessment-matrix__table thead th:not(.assessment-matrix__evaluation-heading) + .assessment-matrix__evaluation-heading { border-left: 1px solid var(--cui-border-color, #d8dbe0); }
.assessment-matrix__evaluation-heading .assessment-matrix__evaluation-label { position: absolute; bottom: .35rem; left: 50%; width: 8rem; padding: 0; overflow: hidden; font-weight: 750; line-height: 1.1; text-align: left; text-overflow: ellipsis; white-space: nowrap; transform: skewX(45deg) rotate(-45deg); transform-origin: left center; }
.assessment-matrix__evaluation-heading .assessment-matrix__sort-indicator { display: inline-flex; flex: 0 0 auto; transform: rotate(45deg); transform-origin: center; }
.assessment-matrix__sort-button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; padding: .25rem; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 750; cursor: pointer; }
.assessment-matrix__sort-button:hover { color: var(--cui-primary, #321fdb); }
.assessment-matrix__sort-button--axis { justify-content: flex-start; padding: 0; text-align: left; }
.assessment-matrix__sort-indicator { font-size: .78rem; line-height: 1; }
.assessment-matrix__label { max-width: calc(var(--assessment-matrix-axis-width) - 1.5rem); overflow: hidden; font-size: .84rem; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.assessment-matrix__secondary { max-width: calc(var(--assessment-matrix-axis-width) - 1.5rem); overflow: hidden; color: var(--cui-secondary-color, #6b7280); font-size: .72rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.assessment-matrix__cell { width: var(--assessment-matrix-column-width); min-width: var(--assessment-matrix-column-width); max-width: var(--assessment-matrix-column-width); height: 3.1rem; padding-inline: .2rem; color: var(--cui-secondary-color, #9ca3af); text-align: center; font-weight: 700; }
.assessment-matrix__total { width: var(--assessment-matrix-column-width); min-width: var(--assessment-matrix-column-width); max-width: var(--assessment-matrix-column-width); height: 3.1rem; background: rgba(0,0,0,.025); color: var(--cui-body-color, #212631); text-align: center; font-size: .88rem; font-weight: 750; }
.assessment-matrix__evaluation { width: var(--assessment-matrix-column-width); min-width: var(--assessment-matrix-column-width); max-width: var(--assessment-matrix-column-width); height: 3.1rem; background: rgba(0,0,0,.025); color: var(--cui-body-color, #212631); text-align: center; font-size: .82rem; font-weight: 750; }
.assessment-matrix__coverage--danger { color: var(--cui-danger-text-emphasis, #671414) !important; background: var(--cui-danger-bg-subtle, #f9d4d4) !important; }
.assessment-matrix__coverage--warning { color: var(--cui-warning-text-emphasis, #764705) !important; background: var(--cui-warning-bg-subtle, #feecc5) !important; }
.assessment-matrix__coverage--success { color: var(--cui-success-text-emphasis, #0f5722) !important; background: var(--cui-success-bg-subtle, #cbedd6) !important; }
.assessment-matrix__table tbody tr:hover > * { background-color: rgba(50, 31, 219, .035); }
.assessment-matrix__table tfoot th,
.assessment-matrix__table tfoot td { height: 3rem; background: var(--cui-tertiary-bg, #f3f4f7); text-align: center; font-size: .82rem; font-weight: 800; }
.assessment-matrix__table tfoot .assessment-matrix__axis { z-index: 1; text-align: left; }
.assessment-matrix__summary--average th,
.assessment-matrix__summary--average td { color: var(--cui-secondary-color, #6b7280); }
.assessment-matrix__summary-value { width: var(--assessment-matrix-column-width); min-width: var(--assessment-matrix-column-width); max-width: var(--assessment-matrix-column-width); }
.assessment-matrix__checkbox { cursor: pointer; }
.assessment-matrix__select { width: 2.65rem; margin: 0 auto; padding-right: 1.25rem; padding-left: .35rem; cursor: pointer; }
.assessment-matrix__score { display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; padding: 0; border: 1px solid transparent; border-radius: .55rem; font-weight: 800; line-height: 1; transition: transform .12s ease, box-shadow .12s ease; }
.assessment-matrix__score:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,.14); }
.assessment-matrix__score--none { color: var(--cui-secondary-color, #6d7d9c); background: var(--cui-tertiary-bg, #f3f4f7); border-color: var(--cui-border-color, #dbdfe6); }
.assessment-matrix__score--low { color: var(--cui-danger-text-emphasis, #671414); background: var(--cui-danger-bg-subtle, #f9d4d4); border-color: var(--cui-danger-border-subtle, #f2a9a9); }
.assessment-matrix__score--developing { color: var(--cui-warning-text-emphasis, #764705); background: var(--cui-warning-bg-subtle, #feecc5); border-color: var(--cui-warning-border-subtle, #fcd88a); }
.assessment-matrix__score--proficient { color: var(--cui-info-text-emphasis, #184c77); background: var(--cui-info-bg-subtle, #c0e6ff); border-color: var(--cui-info-border-subtle, #80c6ff); }
.assessment-matrix__score--high { color: var(--cui-success-text-emphasis, #0f5722); background: var(--cui-success-bg-subtle, #cbedd6); border-color: var(--cui-success-border-subtle, #96dbad); }
.assessment-matrix__score--expert { color: var(--cui-primary-text-emphasis, #3634a3); background: var(--cui-primary-bg-subtle, #cfc7f3); border-color: var(--cui-primary-border-subtle, #9d92e6); }
.assessment-matrix__score--planned { color: var(--cui-primary-text-emphasis, #3634a3); background: var(--cui-tertiary-bg, #f3f4f7); background: color-mix(in srgb, var(--cui-primary-bg-subtle, #cfc7f3) 38%, var(--cui-tertiary-bg, #f3f4f7)); border-color: var(--cui-border-color, #dbdfe6); border-color: color-mix(in srgb, var(--cui-primary-border-subtle, #9d92e6) 35%, var(--cui-border-color, #dbdfe6)); }
.assessment-legend { display: flex; width: 100%; min-width: 0; align-items: center; flex-wrap: wrap; gap: .35rem .55rem; padding: .65rem .85rem; border-bottom: 1px solid var(--cui-border-color, #d8dbe0); color: var(--cui-secondary-color, #6b7280); font-size: .7rem; }
.assessment-legend__label { margin-right: .15rem; color: var(--cui-body-color, #212631); font-weight: 700; }
.assessment-legend__information { display: inline-flex; min-width: 0; align-items: center; gap: .3rem; margin-left: auto; padding: .15rem .4rem; border: 1px solid var(--cui-border-color, #d8dbe0); border-radius: 999px; background: var(--cui-tertiary-bg, #f3f4f7); color: var(--cui-primary, #321fdb); font: inherit; font-weight: 650; cursor: help; }
.assessment-legend__information:hover { border-color: var(--cui-primary, #321fdb); background: var(--cui-primary, #321fdb); color: var(--cui-white, #fff); }
.assessment-legend__information:focus-visible { outline: 2px solid var(--cui-primary, #321fdb); outline-offset: 2px; }
.assessment-legend__information-icon { display: inline-flex; width: 1rem; height: 1rem; flex: 0 0 1rem; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; font-size: .58rem; font-weight: 800; line-height: 1; }
.assessment-legend__item { display: inline-flex; min-width: 0; align-items: center; gap: .35rem; padding: .15rem .25rem; border: 0; border-radius: .4rem; background: transparent; color: inherit; font: inherit; text-align: left; cursor: help; }
.assessment-legend__item:hover { background: rgba(50, 31, 219, .045); color: var(--cui-body-color, #212631); }
.assessment-legend__item:focus-visible { outline: 2px solid var(--cui-primary, #321fdb); outline-offset: 2px; }
.assessment-legend__swatch { display: inline-flex; width: 1.35rem; height: 1.35rem; flex: 0 0 1.35rem; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: .35rem; font-size: .62rem; font-weight: 800; }
.assessment-legend__text { white-space: nowrap; }
.assessment-matrix__empty { padding: 2rem; color: var(--cui-secondary-color, #6b7280); text-align: center; }

/* Toolbar - group filter, search and row count. Sits above the scroller so it stays put while the
   matrix scrolls sideways under it. Classes mirror the commit graph's so the two read as one control. */
.assessment-matrix__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .55rem .85rem; border-bottom: 1px solid var(--cui-border-color, #d8dbe0); background: var(--cui-card-bg, #fff); }
.assessment-matrix__toolbar-label { margin: 0; color: var(--cui-emphasis-color, #080a0c); font-size: .875rem; font-weight: 600; }
.assessment-matrix__toolbar-select { max-width: 20rem; padding: .2rem 1.6rem .2rem .5rem; border: 1px solid var(--cui-border-color, #d8dbe0); border-radius: .4rem; background: var(--cui-card-bg, #fff); color: var(--cui-body-color, #212631); font-size: .875rem; font-weight: 600; cursor: pointer; }
.assessment-matrix__toolbar-select:focus-visible { outline: 2px solid var(--cui-primary, #321fdb); outline-offset: 1px; }
.assessment-matrix__search .nova-grid-search-input { width: 13rem; }
.assessment-matrix__toolbar-count { color: var(--cui-secondary-color, #6b7280); font-size: .72rem; white-space: nowrap; }
.assessment-matrix__toolbar-count--empty { color: var(--cui-emphasis-color, #080a0c); font-weight: 600; }

/* Horizontal column headings. The slanted band above is what makes thirty narrow skill columns fit;
   a handful of wide ones read better straight across, and the header stops eating 6.5rem of height
   to do it. Everything the slant needed - the counter-rotation, the absolute placement that hung a
   long label off the corner - is undone here rather than made conditional above. */
.assessment-matrix--horizontal-headers .assessment-matrix__table thead th { height: auto; padding: .55rem .4rem; vertical-align: middle; }
.assessment-matrix--horizontal-headers .assessment-matrix__table thead th[data-column-id],
.assessment-matrix--horizontal-headers .assessment-matrix__total-heading,
.assessment-matrix--horizontal-headers .assessment-matrix__evaluation-heading { transform: none; }
.assessment-matrix--horizontal-headers .assessment-matrix__column-label,
.assessment-matrix--horizontal-headers .assessment-matrix__total-heading .assessment-matrix__sort-button,
.assessment-matrix--horizontal-headers .assessment-matrix__total-label,
.assessment-matrix--horizontal-headers .assessment-matrix__evaluation-heading .assessment-matrix__evaluation-label { position: static; width: auto; overflow: hidden; text-align: center; text-overflow: ellipsis; transform: none; }
.assessment-matrix--horizontal-headers .assessment-matrix__total-heading .assessment-matrix__sort-button { justify-content: center; }
.assessment-matrix--horizontal-headers .assessment-matrix__sort-indicator { transform: none; }

/* Compact rows. The 3.1rem pitch is sized for a scored cell; a row that carries two lines of label
   and a checkbox does not need it, and the row axis is the one that grows - so buying rows back is
   worth more here than anywhere else on the table. */
.assessment-matrix--compact .assessment-matrix__cell,
.assessment-matrix--compact .assessment-matrix__total,
.assessment-matrix--compact .assessment-matrix__evaluation { height: 2.15rem; }
.assessment-matrix--compact .assessment-matrix__axis { padding-top: .18rem; padding-bottom: .18rem; }
.assessment-matrix--compact .assessment-matrix__label { line-height: 1.15; }
.assessment-matrix--compact .assessment-matrix__secondary { line-height: 1.15; }
.assessment-matrix--compact .assessment-matrix__score { width: 1.75rem; height: 1.75rem; }

/* One line of label over a checkbox - the second line moved into the shared tooltip, so the
   two-line height is no longer what sets the pitch. */
.assessment-matrix--compact.assessment-matrix--secondary-on-hover .assessment-matrix__cell,
.assessment-matrix--compact.assessment-matrix--secondary-on-hover .assessment-matrix__total,
.assessment-matrix--compact.assessment-matrix--secondary-on-hover .assessment-matrix__evaluation { height: 1.8rem; }

/* Sticky column headings. The row axis is already sticky sideways; this adds the heading row
   sticking downwards, so the two together keep both labels of a cell in view. The heading's wash is
   re-laid as an opaque colour plus the same tint on top - rgba alone would let the rows scrolling
   underneath show straight through it. */
.assessment-matrix--sticky-headers .assessment-matrix__table thead th,
.assessment-matrix--sticky-headers .assessment-matrix__table thead th[data-column-id],
.assessment-matrix--sticky-headers .assessment-matrix__total-heading,
.assessment-matrix--sticky-headers .assessment-matrix__evaluation-heading {
    position: sticky; top: 0; z-index: 3;
    background-color: var(--cui-card-bg, #fff);
    background-image: linear-gradient(rgba(0, 0, 0, .045), rgba(0, 0, 0, .045));
}
/* Sideways and downwards at once, so it stays over both the axis column and the heading row. */
.assessment-matrix--sticky-headers .assessment-matrix__corner { z-index: 5; }