/* The app's own styles, on top of the Ridderholt design system. The
   sign-in card, the Google button, the page that lets an assistant in and
   form.inline are the design system's: only what is this app's alone goes
   here. */

/* Spending: a row a category or a month, its name left, the sum right
   and a bar under them, the whole row a link. */
.bars { display: grid; gap: 0; margin: 0; padding: var(--space-2) var(--space-5); list-style: none; }
.bars li + li { border-top: 1px solid var(--line); }
.bars a { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: baseline; padding: var(--space-3) 0; color: inherit; }
.bars a:hover { text-decoration: none; }
.bars a:hover .bar-label { color: var(--accent); }
.bars .meter { grid-column: 1 / -1; width: 100%; }
.bars li.on .bar-label, .bars li.on .bar-value { font-weight: var(--weight-strong); }

/* The month before and after, as two round buttons. */
.month-step { display: flex; gap: var(--space-2); }
.month-step .flip .icon { transform: scaleX(-1); }

/* Connecting the bank: the steps, then the form. */
.steps { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); padding-left: 1.4em; }
.steps code { overflow-wrap: anywhere; }
#bank .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; }
#bank .card + .card, #bank .card + .folds, #bank .folds { margin-top: var(--space-4); }
#bank .about { margin-top: var(--space-4); }


/* On a phone the design system widens an odd card out at the end; after a
   hero card (a row of its own) the count is off by one, so here the odd
   one out is the even one. (To move into ridderholt-ui.) */
@media (max-width: 560px) {
  .cards > .card.hero:first-child ~ .card:last-child:nth-child(odd) { grid-column: auto; }
  .cards > .card.hero:first-child ~ .card:last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* Transactions: the search and its button on one line, the rest folded
   away. */
.search-row { display: flex; flex: 1 1 100%; align-items: end; gap: var(--space-3); }
.search-row .field { flex: 1 1 auto; min-width: 0; }
.filters .filter-fold { flex: 1 1 100%; }
.filter-fold .fold-body.filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }