/* /integrations/ and one page per accounting tool (81-21). Prefix: ig-. */

/* The Tuppence bank account in the books, as the tool lists it. */
.ig-books .ui-window__body {
  gap: 10px;
}
.ig-books__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink-100);
}
.ig-books__title {
  font-weight: 700;
  font-size: var(--fs-label);
}
.ig-books__sub {
  color: var(--ink-500);
  font-size: var(--fs-caption);
}
.ig-books .ui-row {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}
.ig-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.ig-amount--in {
  color: var(--mint-700);
}
.ig-books__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  font-size: var(--fs-caption);
  color: var(--ink-500);
}
.ig-books__foot b {
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

/* The tools, one card each. */
.ig-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
/* Each tool's own mark, as its maker draws it (assets/img/integrations/). */
.ig-tool__logo {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
}
.ig-tool__where {
  color: var(--ink-500);
  font-size: var(--fs-caption);
}

/* Tuppence and the tool, side by side, above a tool page's heading. */
.ig-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
}
.ig-pair > img,
.ig-pair__tuppence {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.ig-pair__tuppence {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--ink-100);
}
.ig-pair__tuppence img {
  width: 28px;
  height: 28px;
}
.ig-pair__plus {
  display: inline-flex;
  color: var(--ink-400);
}

/* A worked day's documents. */
.ig-table td:last-child,
.ig-table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ig-table tr.ig-table__total td {
  font-weight: 700;
}

@media (max-width: 640px) {
  .ig-books .ui-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px;
  }
}