/* Tony Chow – Competency Matrix (scoped to .tc-matrix)
   Yellow = Exposure → Dark Green = Ownership */

.tc-matrix {
  --panel: #121821;
  --muted: #7a8aa0;
  --text: #eaf1f9;
  --grid: #1b2430;
  --gap: 10px;
  --cell-size: 100px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  /* Heat scale (least → most) */
  --hot-1:#facc15; /* Yellow (Exposure) */
  --hot-2:#f59e0b; /* Orange (Significant) */
  --hot-3:#22c55e; /* Medium Green (Major) */
  --hot-4:#16a34a; /* Dark Green (Ownership) */
}

/* Legend */
.tc-matrix .legend {
  display:flex; align-items:center; gap:10px; color:var(--muted);
  font-size:13px; flex-wrap:wrap; margin: 0 0 14px 0;
}
.tc-matrix .legend .swatch{
  width:16px; height:16px; border-radius:4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}

/* Grid */
.tc-matrix .grid{
  display:grid;
  grid-template-columns: 220px repeat(4, var(--cell-size));
  gap: var(--gap);
  align-items:stretch;
  overflow:auto;
}
.tc-matrix .hdr, .tc-matrix .rowhdr, .tc-matrix .cell{
  background:var(--grid);
  border-radius:10px;
  padding:10px;
  color:var(--text);
}
.tc-matrix .hdr{
  font-weight:600; text-align:center;
  display:flex; align-items:center; justify-content:center;
}
.tc-matrix .hdr:first-child{ background:transparent; box-shadow:none; }
.tc-matrix .rowhdr{
  font-weight:600; display:flex; align-items:center;
}
.tc-matrix .cell{
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; outline:none; transition: background .2s;
}
.tc-matrix .cell:focus-visible{ box-shadow:0 0 0 3px #38bdf8; }

/* Soft background tint per level (Safari-friendly rgba) */
.tc-matrix .cell[data-level="1"]{ background:linear-gradient(135deg, rgba(250,204,21,.35), rgba(0,0,0,.1)); }
.tc-matrix .cell[data-level="2"]{ background:linear-gradient(135deg, rgba(245,158,11,.35), rgba(0,0,0,.1)); }
.tc-matrix .cell[data-level="3"]{ background:linear-gradient(135deg, rgba(34,197,94,.35), rgba(0,0,0,.1)); }
.tc-matrix .cell[data-level="4"]{ background:linear-gradient(135deg, rgba(22,163,74,.45), rgba(0,0,0,.1)); }

/* Dot */
.tc-matrix .cell .dot{
  width:16px; height:16px; border-radius:50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15), 0 4px 10px rgba(0,0,0,.35);
}
.tc-matrix .cell[data-level="1"] .dot{ background:var(--hot-1);} /* Yellow */
.tc-matrix .cell[data-level="2"] .dot{ background:var(--hot-2);} /* Orange */
.tc-matrix .cell[data-level="3"] .dot{ background:var(--hot-3);} /* Green */
.tc-matrix .cell[data-level="4"] .dot{ background:var(--hot-4);} /* Dark Green */

/* Tooltip */
.tc-matrix .tooltip{
  position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-120%);
  background:#0f1723; border:1px solid #1f2a3a; padding:10px 12px; border-radius:10px;
  font-size:12.5px; color:#dbe7f3; box-shadow:var(--shadow); min-width:220px; display:none;
}
.tc-matrix .tooltip .t-title{font-weight:700; margin-bottom:6px; font-size:13px}
.tc-matrix .tooltip .t-sub{color:var(--muted)}
.tc-matrix .tooltip .t-body{margin-top:6px; color:#cfe3f6}

/* Modal */
.tc-matrix .modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; z-index:9998;
}
.tc-matrix .modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center; z-index:9999;
}
.tc-matrix .modal.is-open,
.tc-matrix .modal-backdrop.is-open { display:flex; }
.tc-matrix .modal-backdrop.is-open { display:block; }

.tc-matrix .modal .panel{
  position:relative;
  width:min(800px, 92vw); max-height:85vh; overflow:auto;
  background:var(--panel); border-radius:16px; box-shadow:var(--shadow);
  padding:22px 22px 18px; color:var(--text);
}
.tc-matrix .modal h3{margin:0 0 6px 0; font-size:20px}
.tc-matrix .modal .meta{ color:var(--muted); font-size:13px; margin-bottom:12px }
.tc-matrix .modal .chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.tc-matrix .chip{ background:#0d1420; border:1px solid #223044; color:#cfe3f6; padding:6px 10px; border-radius:999px; font-size:12px }
.tc-matrix .modal .body p{margin:10px 0 0 0; line-height:1.55}
.tc-matrix .modal .body ul{margin:8px 0 0 18px}

/* Close button (ensure it’s visible above everything) */
.tc-matrix .modal .close{
  position:absolute; right:14px; top:14px;
  background:#0d1420; border:1px solid #223044;
  width:36px; height:36px; border-radius:10px; color:#cfe3f6; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; z-index:1;
}

/* Accessibility helpers */
.tc-matrix .sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* Responsive */
@media (max-width:700px){
  .tc-matrix { --cell-size:58px; }
  .tc-matrix .grid{ grid-template-columns: 170px repeat(4, var(--cell-size)); }
}