/* Strategy-only conditional field and reserve card placement. */
.strategy-dependent.hidden {
  display: none;
}

/* Its own row, at the Approach card's width. */
.strategy-reserve-card {
  grid-column: 1;
}

/* The comparison sits beside the settings and spans their rows. */
.strategy-comparison {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}

.approach-compare {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
}

/* A compact comparison, not a data table: undo the global table header
   band, uppercase and row rules, as the reserve comparison does. */
.approach-compare th,
.approach-compare td {
  padding: 6px 12px 6px 0;
  text-align: left;
  vertical-align: top;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  background: transparent;
  border: 0;
  border-bottom: var(--border-thin);
}

.approach-compare thead th {
  color: var(--navy);
  font-weight: 600;
}

.approach-compare tbody th {
  color: var(--text-light);
}

.approach-compare td {
  color: var(--navy);
}

.approach-compare-note {
  margin-top: 8px;
  color: var(--text-light);
}

@media (max-width: 767px) {
  .strategy-comparison {
    grid-column: auto;
    grid-row: auto;
  }
}