/* ============================================================================
   The relationship table.

   It is a grid of ticks, and a grid of ticks is unreadable the moment it is
   wider than the screen — you lose which row you are on and which column you
   are under. So: the person column stays put, the header stays put, and the
   cell you are pointing at lights its whole row and column.

   Every colour here is a theme variable or a mix of the project's own colour.
   The old rules hardcoded four hex values and an 8px font, which is why it
   looked like it belonged to a different application.
   ========================================================================== */

.matrix-wrap{
  overflow:auto;
  max-height:calc(100vh - 230px);
  padding:0;
  /* the sticky corner needs a background to sit on, not the page showing through */
  background:var(--surface,#fff);
  /* A soft, contained card rather than an edge-to-edge grid — reads calmer. */
  border:1px solid var(--line,#dce7eb);
  border-radius:16px;
  box-shadow:0 10px 30px color-mix(in srgb,var(--text,#12263F) 6%,transparent);
}
.matrix-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}

/* ------------------------------------------------------------- the header */
.matrix-table thead th{
  position:sticky;top:0;z-index:3;
  background:var(--surface,#fff);
  /* Names run to one, two or three lines. Aligning to the bottom lands them all
     on the same baseline, which is what makes the row read as a row. */
  vertical-align:bottom;
  padding:14px 10px 11px;
  border-bottom:1px solid var(--line,#dce7eb);
  font-size:12px;font-weight:620;letter-spacing:-.005em;line-height:1.35;
  color:var(--text,#12263F);
  text-align:left;
}
.matrix-head{min-width:132px;max-width:132px}
.matrix-head .dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:6px;vertical-align:middle;flex:0 0 auto;
}
.matrix-head span{display:inline}

/* ------------------------------------------------- the person column, fixed */
.matrix-corner,.matrix-person{
  position:sticky;left:0;
  background:var(--surface,#fff);
  min-width:190px;max-width:190px;
  text-align:left;
}
.matrix-corner{z-index:4;padding-left:22px}
.matrix-person{
  z-index:2;
  padding:13px 16px 13px 22px;
  border-bottom:1px solid color-mix(in srgb,var(--line,#dce7eb) 55%,transparent);
  border-right:1px solid var(--line,#dce7eb);
  font-weight:500;cursor:pointer;
  display:table-cell;
}
.matrix-person strong{display:block;font-size:13.5px;font-weight:600;color:var(--text,#12263F);line-height:1.3}
.matrix-person span{display:block;font-size:11.5px;color:var(--muted,#8894ab);line-height:1.35;margin-top:2px}
.matrix-person:hover{background:var(--sunken,#f3f7fa)}

/* --------------------------------------------------------------- the cells */
.matrix-cell{
  text-align:center;vertical-align:middle;
  min-width:132px;max-width:132px;
  padding:9px 8px;
  border-bottom:1px solid color-mix(in srgb,var(--line,#dce7eb) 60%,transparent);
  transition:background .12s ease;
}
/* A connected cell is tinted with the project's OWN colour, so a column reads
   as one thing and you can see a person's spread across the table at a glance. */
.matrix-cell.on{background:color-mix(in srgb,var(--pc) 5%,transparent)}
.matrix-table tbody tr:hover .matrix-cell{background:color-mix(in srgb,var(--pc, #1E7FD0) 4%,var(--sunken,#f3f7fa))}
.matrix-table tbody tr:hover .matrix-cell.on{background:color-mix(in srgb,var(--pc) 10%,transparent)}

/* the tick itself: a soft square, not a browser checkbox */
.matrix-tick{display:inline-flex;cursor:pointer;position:relative}
.matrix-tick input{position:absolute;opacity:0;width:0;height:0}
.matrix-tick span{
  position:relative;
  width:18px;height:18px;border-radius:6px;display:block;
  border:1.5px solid color-mix(in srgb,var(--line,#dce7eb) 82%,var(--pc) 18%);
  background:var(--surface,#fff);
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
}
.matrix-tick:hover span{border-color:var(--pc);transform:scale(1.08)}
.matrix-tick input:focus-visible + span{outline:2px solid var(--pc);outline-offset:2px}
.matrix-tick input:checked + span{background:color-mix(in srgb,var(--pc) 90%,#fff);border-color:color-mix(in srgb,var(--pc) 90%,#fff);box-shadow:0 2px 6px color-mix(in srgb,var(--pc) 30%,transparent)}
/* The tick: two borders on a rotated box. Crisper than a glyph at this size,
   and it cannot shift when the font changes. (Gradients were tried first and
   render as a smudge at 19px.) */
.matrix-tick span::after{
  content:'';position:absolute;left:6px;top:2.5px;
  width:4.5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(43deg) scale(.3);
  opacity:0;
  transition:opacity .12s ease,transform .16s cubic-bezier(.3,1.4,.5,1);
}
.matrix-tick input:checked + span::after{opacity:1;transform:rotate(43deg) scale(1)}

/* the role, legible this time */
.rel-role{
  display:block;margin:6px auto 0;max-width:118px;
  border:1px solid color-mix(in srgb,var(--pc) 16%,transparent);
  background:color-mix(in srgb,var(--pc) 8%,var(--surface,#fff));
  color:color-mix(in srgb,var(--pc) 64%,var(--text,#12263F));
  font:inherit;font-size:10.5px;font-weight:620;letter-spacing:.01em;
  border-radius:999px;padding:3px 9px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background .14s ease;
}
.rel-role:hover{background:color-mix(in srgb,var(--pc) 20%,var(--surface,#fff))}

@media(max-width:760px){
  .matrix-corner,.matrix-person{min-width:140px;max-width:140px}
  .matrix-head,.matrix-cell{min-width:104px;max-width:104px}
  .matrix-wrap{max-height:none}
}
@media(prefers-reduced-motion:reduce){
  .matrix-tick span,.matrix-cell,.rel-role{transition:none}
  .matrix-tick:hover span{transform:none}
}