/* Choose a colour theme: https://picocss.com/docs/customization.html */

#logo {
  font-weight: bold;
  font-style: italic;
}

.calc-amount {
  text-align: right;
}

#payer[aria-invalid="true"] + small:before {
  content: "Please select the person that paid this.";
}

.txn-date {
  font-weight: bold;
  color: var(--pico-secondary);
}

.txn-controls {
  float: inline-end;
}

.muted { color: var(--pico-muted-color); }
.expand { width: 100%; }

.balance-negative { color: var(--pico-del-color); }
.balance-positive { color: var(--pico-ins-color); }

.debt { margin: 2rem 0; padding: 0 0.5rem; }
.debt.negative { border-left: 0.5rem solid var(--pico-ins-color); }
.debt.positive { border-left: 0.5rem solid var(--pico-del-color); }

aside.helpnote {
  border-left: 0.5rem solid var(--pico-muted-border-color);
  padding: 0 0.5rem;
  font-size: 0.875em;
}
aside.helpnote h3 { --pico-font-size: 1.125rem; }

/* Allow aligning fields with an empty label inside form .grids against fields
   with a label.

   On wide screens, fields inside .grids are next to each other, so align
   vertically by adding invisible dummy text.
 */
@media (min-width: 768px) {
  label.spacer::before { content: "\00A0"; }
}

.group-summary {
  display: grid;
  grid-template-columns: 1fr 2fr 5rem 5rem;
  column-gap: 0.2rem;
  row-gap: 0.75rem;
}