/* Styles that only this tool needs. Token names only, never raw colour values.
   Nothing here edits the shared sheets. */

.stage {
  background: var(--alt-row);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.stage-title {
  font-size: var(--t-h3);
  font-weight: 600;
}

.stage .field-row { gap: 16px; }

/* A negative margin reads in signal red with a minus sign. Never brackets. */
.data-table .neg { color: var(--signal-red); }

/* The deep ink total row is dark, so a negative figure there needs to stay
   readable. Signal red on deep ink holds. */
.data-table tfoot .neg { color: var(--signal-red); }

#shares-total { color: var(--rule-gray); }
#shares-total.off { color: var(--signal-red); font-weight: 600; }

.mix-line { color: var(--rule-gray); }
.mix-line.off { color: var(--signal-red); font-weight: 600; }

.mix-stage {
  display: grid;
  gap: 8px;
}

.mix-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 479px) {
  .stage { padding: 12px; }
  .mix-row { grid-template-columns: 1fr; }
}