/* Matrix: rotated clue headers and coloured cells */
.matrix th.clue-head {
  height: 11rem;
  vertical-align: bottom;
  padding: 0;
  width: 2rem;
}
.matrix th.clue-head > div {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 10.5rem;
  font-weight: 500;
  padding: 0.25rem 0;
}
.matrix td.cell { text-align: center; font-weight: 700; width: 2rem; }
.matrix td.cell-yes { background: color-mix(in oklab, var(--color-success) 25%, transparent); color: var(--color-success); }
.matrix td.cell-no { background: color-mix(in oklab, var(--color-error) 12%, transparent); color: var(--color-error); }
.matrix td.cell-conflict { background: color-mix(in oklab, var(--color-warning) 35%, transparent); color: var(--color-warning-content); }
.matrix td.cell-unsure { background: color-mix(in oklab, var(--color-base-content) 8%, transparent); color: var(--color-base-content); opacity: 0.7; }
.matrix td.cell-unknown { color: var(--color-base-content); opacity: 0.3; }

/* Swipe deck */
.swipe-card {
  position: absolute;
  inset: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  will-change: transform;
  cursor: grab;
}
.swipe-card.dragging { transition: none; cursor: grabbing; }
.swipe-card .stamp {
  position: absolute;
  top: 1.5rem;
  padding: 0.25rem 0.75rem;
  border: 4px solid;
  border-radius: 0.5rem;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: rotate(-15deg);
}
.swipe-card .stamp-yes { left: 1.5rem; color: var(--color-success); border-color: var(--color-success); }
.swipe-card .stamp-no { right: 1.5rem; color: var(--color-error); border-color: var(--color-error); transform: rotate(15deg); }
.swipe-card .stamp-unsure { left: 50%; top: auto; bottom: 1.5rem; transform: translateX(-50%); color: var(--color-neutral); border-color: var(--color-neutral); }

/* Matrix cells are clickable (open the correction modal) */
.matrix td.cell { cursor: pointer; transition: box-shadow 0.15s; }
.matrix td.cell:hover, .matrix td.cell:focus-visible { box-shadow: inset 0 0 0 2px var(--color-primary); outline: none; }
.matrix td.cell-flash { animation: cell-flash 0.8s ease; }
@keyframes cell-flash { 0% { box-shadow: inset 0 0 0 3px var(--color-primary); } 100% { box-shadow: none; } }

/* Never break a word inside a button (narrow grid / flex cells on mobile) */
.btn { white-space: nowrap; overflow-wrap: normal; word-break: normal; flex-shrink: 0; }