/* Knowledge guide visual cards stay light, including on dark-mode devices. */
:root .visual-unit.viz-root {
  color-scheme: light;
  --surface-1: #fff;
  --page: #f7f4ee;
  --surface-2: #f4f1ea;
  --text-primary: #22282e;
  --text-secondary: #5c666f;
  --text-muted: #7e878f;
  --rule: #e6e0d5;
  --border: rgba(34, 40, 46, .12);
}

/* The cash-gap calculator also uses `.out`; keep its spacing from shifting
   the right half of the loan-rule scale. */
.visual-loan .scale .bar {
  align-items: stretch;
}

.visual-loan .scale .in,
.visual-loan .scale .out {
  margin: 0;
  height: 100%;
  padding: 0;
}

@media (max-width: 420px) {
  .visual-loan .scale .bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    height: auto;
  }

  .visual-loan .scale .in,
  .visual-loan .scale .out {
    min-width: 0;
    min-height: 34px;
    padding: 0 12px;
    justify-content: flex-start;
    border-radius: 6px;
  }

  .visual-loan .scale .cap {
    align-items: flex-start;
    gap: 6px;
  }

  .visual-loan .scale .cap span:last-child {
    flex: none;
  }
}