/* Account page: balance, invoices, ledger. Scrolls normally — only the search
   screen owns the viewport. */
.usage {
  width: min(42rem, 100%);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.usage__back {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  text-decoration: none;
}

.usage__back:hover {
  color: var(--color-text);
}

.usage__title {
  margin-top: var(--space-sm);
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
}

.usage__subtitle {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}

.usage__balance {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.balance {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.balance__count {
  font-size: 2rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
}

.balance__label {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}

.balance__note {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}

.balance__fine {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

.usage__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.usage__heading {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.usage__heading-note {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.usage__empty {
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

.usage__note {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}

/* Invoices and ledger share a row rhythm: a hairline between rows, nothing
   around the list itself. */
.invoices,
.ledger {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  overflow: hidden;
}

.invoices__row,
.ledger__row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
}

/* Holds the stretched link of a search line — see .ledger__open below. */
.ledger__row {
  position: relative;
  transition: background-color 0.12s ease;
}

.invoices__row + .invoices__row,
.ledger__row + .ledger__row {
  border-top: 1px solid var(--color-border);
}

.invoices__number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.invoices__date,
.invoices__credits,
.ledger__date {
  color: var(--color-text-soft);
}

.invoices__amount {
  margin-left: auto;
  font-weight: var(--weight-medium);
}

.invoices__link {
  font-weight: var(--weight-medium);
}

/* A fixed column so the plus and minus signs line up down the list. */
.ledger__amount {
  flex: none;
  width: 3rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-align: right;
}

.ledger__amount--credit {
  color: var(--color-saved);
}

.ledger__amount--debit {
  color: var(--color-text-faint);
}

/* A search line stacks what the history under the form stacks: what was asked
   for, on what criteria, then whatever leads out of the row. The body takes the
   space the label used to, so the right-hand column stays put whether or not
   there is a second line. */
.ledger__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4xs);
}

.ledger__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A search line is a target: the whole row reopens it, so the link over the
   label is stretched to the row's edges rather than confined to its text —
   aiming at four words in a list is aiming at nothing. The badge, which leads
   to the saved addresses instead, is lifted above that overlay in pill.css. */
.ledger__open {
  color: inherit;
  text-decoration: none;
}

.ledger__open::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Painted from the row rather than from the link, since the link's own box is
   only the label. The badge sits above the overlay, so hovering it tints
   nothing — which is the truth: it goes somewhere else. */
.ledger__row:has(.ledger__open:hover) {
  background-color: var(--color-land-soft);
}

.ledger__row:has(.ledger__open:hover) .ledger__label {
  color: var(--color-land);
}

/* Wraps rather than truncates: a criterion cut in half says less than nothing,
   and the rows are few enough to afford the height. */
.ledger__criteria {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

/* The line under the criteria, holding whatever leads out of the row: the
   advert, and the badge for the addresses kept from this search. They wrap
   rather than squeeze — on a phone the two together leave the advert seventy
   pixels, which is enough for the site and nothing of the reference at the end,
   and the reference is the whole reason the advert is printed. */
.ledger__leads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-2xs);
  min-width: 0;
  margin-top: 2px;
}

/* The right-hand column: how many parcels answered, then the day it was asked.
   Stacked and right-aligned so the figures line up down the list. */
.ledger__meta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}

.ledger__count {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A search that came back with nothing is still worth printing — it is what
   stops you reopening it a second time — but it is not worth reading first, so
   it recedes to the weight of the date beside it. */
.ledger__count--none {
  color: var(--color-text-faint);
  font-weight: var(--weight-regular);
}

.ledger__date {
  flex: none;
  font-size: var(--text-xs);
  white-space: nowrap;
}