@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Inconsolata:wght@400;500;600&family=Source+Serif+4:ital,wght@0,300;0,400;1,300&display=swap');

:root {
  --cream: #faf7f2;
  --cream-dark: #f2ede4;
  --cream-mid: #ede8df;
  --rule: #d8d0c4;
  --rule-dark: #c4b9aa;
  --ink: #1e2433;
  --ink-mid: #3d4458;
  --ink-light: #6b7280;
  --ink-faint: #9ca3b0;
  --accent: #1e3a5f;
  --accent-light: #e8eef5;
  --accent-mid: #4a6fa5;
  --green: #1a5c3a;
  --green-bg: #eef7f2;
  --red: #8b1a1a;
  --red-bg: #fdf0f0;
  --gold: #b08030;
  --gold-bg: #fdf8ee;
  --focus-ring: rgba(30,58,95,0.18);
  --mono: 'Inconsolata', monospace;
  --serif: 'Source Serif 4', serif;
  --display: 'Playfair Display', serif;
  --row-h: 38px;
}

body {
  font-family: sans-serif;
}

.mono {
  font-family: var(--mono);
}

.ink-mid {
  color: var(--ink-mid);
}

.accent-mid {
  color: var(--accent-mid);
}

.bg-accent-light {
  background-color: var(--accent-light);
}

.bg-accent {
  background-color: var(--accent);
}

.b--accent {
  border-color: var(--accent);
}

.b--rule {
  border-color: var(--rule);
}

.b--rule-dark {
  border-color: var(--rule-dark);
}

.green {
  color: var(--green);
}

.gold {
  color: var(--gold);
}

.ink-light {
  color: var(--ink-light);
}

.ink-faint {
  color: var(--ink-faint);
}

.reconcile-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 2rem;
  height: 1.1rem;
  background: var(--rule-dark);
  border-radius: 1rem;
  cursor: pointer;
  position: relative;
  transition: background .2s;
  vertical-align: middle;
  flex-shrink: 0;
}

.reconcile-toggle::after {
  content: '';
  position: absolute;
  width: .8rem;
  height: .8rem;
  background: white;
  border-radius: 50%;
  top: .15rem;
  left: .15rem;
  transition: transform .2s;
}

.reconcile-toggle:checked {
  background: var(--green);
}

.reconcile-toggle:checked::after {
  transform: translateX(.9rem);
}

.reconcile-btn {
  background: var(--accent-light);
  border: 1px solid var(--ink-mid);
  color: var(--ink-mid);
  transition: opacity 0.15s;
}

.reconcile-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.reconcile-btn-delete {
  background: white;
  border-color: var(--red);
  color: var(--red);
}

/* Account tab navigation */
.account-tab-nav {
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1rem;
}

.account-tab {
  display: inline-block;
  padding: 0.45rem 1.1rem 0.55rem;
  font-size: 0.8125rem;
  text-decoration: none;
  color: var(--ink-light);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.01em;
}

.account-tab:hover {
  color: var(--ink);
}

.account-tab-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}