/* /matrix/ grid, cells, and risk chips.
   Design direction: rigid (square corners), flat (no gradients), bordered. */

#matrix-grid {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 0.5rem 0 1rem;
}

/* Uniform, hard-edged borders on every header + cell */
#matrix-grid th,
#matrix-grid td {
  border: 1px solid #4a4a4a;
}

/* Axis headers — flat fill, no gradient */
#matrix-grid thead th,
#matrix-grid th.axis-impact {
  background: #cfcabf;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.45rem 0.35rem;
}
#matrix-grid th.axis-impact {
  width: 7rem;
  text-align: right;
  padding-right: 0.5rem;
}
/* contenteditable axis cells: subtle affordance on hover */
#matrix-grid th[contenteditable="true"]:hover {
  background: #d8d3c8;
  cursor: text;
}

/* Matrix cells — fixed, uniform, content top-aligned */
td.cell {
  vertical-align: top;
  height: 6rem;
  padding: 0.3rem;
  cursor: pointer;
}

/* Band label sits quietly at the top of each cell */
td.cell .band-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-bottom: 0.3rem;
  pointer-events: none;
}

/* Each chip + its delete button share a positioned wrapper so the × can sit
   in the chip's top-right corner without nesting one button inside another. */
.chip-wrap {
  position: relative;
  display: block;
  margin: 0 0 0.25rem 0;
}
.chip-wrap:last-child { margin-bottom: 0; }

/* Risk chips — rigid, flat, bordered. Override browser button defaults. */
button.chip {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.25rem 1.5rem 0.25rem 0.4rem;   /* right pad leaves room for × */
  min-height: 1.6rem;
  background: #fffdf5;          /* flat cream, no gradient */
  color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 0;             /* rigid corners */
  box-shadow: none;             /* no bevel / gloss */
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: grab;
  /* long risk names wrap instead of overflowing the cell */
  white-space: normal;
  overflow-wrap: anywhere;
}
button.chip:hover { background: #ffffff; }
button.chip:active { cursor: grabbing; }

/* Delete (×) — flat, square, divider on its left edge */
button.chip-delete {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.4rem;
  height: 100%;
  padding: 0;
  background: transparent;
  color: #2a2a2a;
  border: 0;
  border-left: 1px solid #2a2a2a;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
button.chip-delete:hover { background: #c62828; color: #fff; }

/* Grabbed (keyboard/DnD) state */
button.chip[aria-grabbed="true"] {
  outline: 2px dashed #1a1a1a;
  outline-offset: 1px;
  background: #fff3bf;
}