/* Tase-erittelyt: one block per balance sheet line, its items beneath it.
   The amount sits on the heading line, where the eye compares it against
   the tase it came from. */
.detail {
  max-inline-size: 46rem;
  margin-block-end: var(--space-6);
}
/* The heading balance, the item amounts and the group sum all belong to one
   money column: the eye checks them against each other. Everything outside
   the table therefore carries the table's own cell padding. */
.detail-head,
.detail-sum,
.detail > p {
  padding-inline: var(--space-3);
}

.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  border-block-end: 1px solid var(--border);
  padding-block-end: var(--space-1);
}
.detail-head h3 {
  margin: 0;
  font-size: var(--text-4);
  font-weight: 600;
}
.detail-head .amount { font-weight: 600; }

/* A long description wraps, so every cell aligns to the first line: the
   date, the voucher and the amount all belong to that line, not to the
   middle of however tall the row grew. */
.detail td {
  border-block-end: 0;
  padding-block: var(--space-1);
  vertical-align: top;
}
.detail-date { color: var(--muted); white-space: nowrap; inline-size: 7rem; }
.detail-voucher { color: var(--muted); font-variant-numeric: tabular-nums; inline-size: 3rem; }

/* A balance nobody has checked against the bank is a question, not an
   error: warn tone, never the danger tone reserved for broken books. */
.detail-warning {
  color: var(--warn);
  font-size: var(--text-2);
  margin-block: var(--space-1) 0;
}

.detail-sum {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  max-inline-size: 46rem;
  font-weight: 600;
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--space-2);
}
/* Vastattavaa yhteensä closes the page the way it closes the tase. */
.detail-sum.is-final {
  font-weight: 700;
  border-block-start: 2px solid var(--ink);
  margin-block-start: var(--space-6);
}