/* Atlas Talent — Competency Matrix page styles */

.layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; padding: 16px 24px 40px; }
[data-density="compact"] .layout { padding: 10px 18px 24px; }
.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Big matrix: rows = people, cols = competencies */
.matrix { padding: 10px 0 0; overflow: auto; }
.mtbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11.5px; }
.mtbl th, .mtbl td { padding: 0; border: 0; }
.mtbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
  font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); font-weight: 400;
  text-align: center; vertical-align: bottom;
  height: 110px;
  white-space: nowrap;
}
.mtbl thead th .hcol { display: inline-block; transform: rotate(-70deg); transform-origin: left top; width: 32px; }
.mtbl thead th.left {
  text-align: left;
  transform: none;
  background: var(--surface-tint);
  position: sticky; left: 0; z-index: 3;
  width: 220px;
  padding-left: 16px;
  border-right: 1px solid var(--line);
}
.mtbl thead th.role { width: 80px; }
.mtbl tbody td {
  border-bottom: 1px solid var(--line);
  text-align: center;
  height: 32px;
  width: 48px;
}
.mtbl tbody td.left {
  text-align: left;
  padding: 6px 16px;
  background: var(--surface);
  position: sticky; left: 0; z-index: 1;
  border-right: 1px solid var(--line);
}
.mtbl tbody td.left .person { display: flex; align-items: center; gap: 8px; }
.mtbl tbody td.left .person b { font-weight: 500; font-size: 12px; }
.mtbl tbody td.left .person small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin-top: 2px; }
.mtbl tbody tr:hover td { background: var(--bg-2); }
.mtbl tbody td.role { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); border-right: 1px dashed var(--line); }

.cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink);
  cursor: pointer;
}
.cell.empty { background: var(--bg-3); color: var(--ink-5); }
.cell.l1 { background: var(--heat-1); color: var(--ink-2); }
.cell.l2 { background: var(--heat-2); color: var(--ink); }
.cell.l3 { background: var(--heat-3); color: #fff; }
.cell.l4 { background: var(--heat-4); color: #fff; }
.cell.l5 { background: var(--accent); color: #fff; }
.cell.gap { box-shadow: inset 0 0 0 1.5px var(--risk); }
.cell.below { box-shadow: inset 0 0 0 1.5px var(--warn); }
.cell.target { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cell:hover { transform: scale(1.1); }

/* Radar */
.radar-card { padding: 14px 16px 18px; }
.radar-svg { width: 100%; height: 280px; display: block; }
.radar-legend { display: flex; gap: 14px; align-items: center; font-size: 11px; color: var(--ink-3); margin-top: 10px; flex-wrap: wrap; }
.radar-legend .sw { width: 12px; height: 12px; border-radius: 2px; display: inline-block; vertical-align: middle; margin-right: 4px; }

/* Critical skills list */
.critical { padding: 4px 0; }
.crit-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); align-items: center; cursor: pointer; }
.crit-row:last-child { border-bottom: 0; }
.crit-row .name { font-size: 12.5px; font-weight: 500; }
.crit-row .name small { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }
.crit-row .cov { font-family: var(--font-mono); font-size: 12px; }
.crit-row .cov small { color: var(--ink-4); }
.crit-row .bar { width: 80px; }